最も簡単なAjaxアプリケーション、非同期認証ユーザー名
Ajax非同期インタラクション技術は現在ウェブページの作成において非常に流行しており、ここではまずjQueryを使用してAjaxの非同期認証ユーザー名を完成させる方法を紹介します.
それから更に深く分析して、純粋なJSを使ってXMLHttpRequestオブジェクトを作成して、jQueryの下層のカプセル化の内容を完成して、以下はまずjQueryの実現を実証して、実は
とても簡単です.
ほとんどの説明はコードの注釈に書かれていますが、実際には何も説明する必要はありません.これはget側の接尾辞データを使用してバックグラウンドサーバに渡されます.
もちろん、バックグラウンドサーバコードは次のとおりです.
次に、XMLHttpRequestオブジェクトの作成とインタラクティブな効果を純粋なJSで完了します.バックグラウンドコードは同じです.jQueryは私たちを助けてくれます.
多い
それから更に深く分析して、純粋なJSを使ってXMLHttpRequestオブジェクトを作成して、jQueryの下層のカプセル化の内容を完成して、以下はまずjQueryの実現を実証して、実は
とても簡単です.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function test(){
//1.
var value = $("#userName").val();
//2.
// jQuery XMLHTTPRequest
$.get("/Ajax/servlet/AjaxServlet?name="+value,null,callback);
}
function callback(data){//
//3.
//alert(data);
//4.
$("#div1").html(data);
}
</script>
</head>
<body>
:<input type="text" id="userName" onblur="test();"/><span id="div1" style="color: red"></span>
<br/>
:<input type="password" id="password" /><br/>
:<input type="text" id="mail" />
</body>
</html>
ほとんどの説明はコードの注釈に書かれていますが、実際には何も説明する必要はありません.これはget側の接尾辞データを使用してバックグラウンドサーバに渡されます.
もちろん、バックグラウンドサーバコードは次のとおりです.
package com.bird.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
String name = request.getParameter("name");
name = new String(name.getBytes("ISO-8859-1"),"UTF-8");
PrintWriter out = response.getWriter();
if(name.equals("bird")){
out.println(" "+name+" ");
}else{
out.println(" ， ");
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
次に、XMLHttpRequestオブジェクトの作成とインタラクティブな効果を純粋なJSで完了します.バックグラウンドコードは同じです.jQueryは私たちを助けてくれます.
多い
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax1.html</title>
<script type="text/javascript">
var xmlhttp;
function verify(){// XMLHttpRequest Ajax
//1. dom
var userName = document.getElementById("userName").value;
//2. XMLHTTPRequest
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
// ie6
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
// XMLHTTPRequest ，
for(var i=0; i < activexName.length; i++){
try{
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
// xmlhttprequest
if(!xmlhttp){
alert(" ");
return;
}else{
//2. ,
xmlhttp.onreadystatechange = callback;
//3.
xmlhttp.open("GET","/Ajax/servlet/AjaxServlet?name="+userName, true);
//4. ，
xmlhttp.send(null);
}
}
//
function callback(){
//
if(xmlhttp.readyState==4){
// http
if(xmlhttp.status==200){
//
//
var responseText = xmlhttp.responseText;
document.getElementById("div1").innerHTML=responseText;
}
}
}
</script>
</head>
<body>
:<input type="text" id="userName" onblur="verify();"/><span id="div1" style="color: red"></span>
<br/>
:<input type="password" id="password" /><br/>
:<input type="text" id="mail" />
</body>
</html>