返回首頁
當前位置: 主頁 > 網絡編程 > Ajax實例教程 >

Ajax的原理及例子

時間:2012-06-28 19:15來源:知行網www.bccsxs.icu 編輯:麥田守望者

構建一個Ajax應用的步驟:

1、創建XMLHTTPRequest對象。

2、向Ajax引擎發送請求。

3、Ajax向服務器發送請求,服務器返回Ajax引擎。

4、Ajax向客戶端返回信息。

Ajax的原理即是在客戶端與服務器端加入了Ajax中間層,從而通過XMLHTTPRequest對象來與服務器交互,客戶端與服務端即可以實現異步了。

下面是一個簡單的判斷用戶代碼是否重復的Ajax例子:

1、給input添加觸發事件onblur()。添加一個span用來顯示ajax返回的信息(responseText)

幫助
1
2
3
<input name="userId" type="text" id="userId"
size="10" maxlength="10" onkeypress="userIdonKeyPress()" value="<%=userId %>" onblur="validate(this)">
<span id="spanUserId"><span>

2、js代碼

 
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
 
function validate(field){
if(trim(field.value).length!=0){
//創建Ajax核心對象XMLHTTPRequest
var xmlHttp;
//表示當前瀏覽器不是ie,如ns,firefox
if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
 
//考慮到瀏覽器緩沖問題,加上時間戳。
var url="user_validate.jsp?userId="+trim(field.value)+"&time="+new Date().getTime();
//設置請求方式為GET,設置請求的URL,設置為異步請求
xmlHttp.open("get",url,true);
 
//將方法地址復制給onreadystatechange屬性
xmlHttp.onreadystatechange=function(){
//alert(xmlHttp.readyState);
//Ajax引擎狀態成功
if(xmlHttp.readyState==4){
//Http協議狀態成功
if(xmlHttp.status==200){
//alert(xmlHttp.responseText);
if(xmlHttp.responseText!=""){
document.getElementById("spanUserId").innerHTML="<font color='red'>"+xmlHttp.responseText+"</font>";
}else{
document.getElementById("spanUserId").innerHTML="";
}
}else{
alert("請求失敗,錯誤碼="+xmlHttp.status);
}
}
};
 
//請設置信息發送到Ajax引擎
xmlHttp.send(null);
}
else{
document.getElementById("spanUserId").innerHTML="";
}
}

3、服務端代碼,user_validate.jsp

 
1
2
3
4
5
6
7
<%
//延長停滯時間,測試異步效果:Thread.currentThread().sleep(5000);
String userId=request.getParameter("userId");
if(UserManager.getInstance().findUserById(userId)!=null){
out.println("用戶代碼已經存在");
}
%>

Ajax的原理就是這樣,像其他的一些js框架,如Jquery,Extjs,dwr,底層的代碼也就是這些。所以,了解原理很重要

------分隔線----------------------------
標簽(Tag):ajax Ajax實例教程 Ajax基礎教程 Ajax源代碼 Ajax技巧
------分隔線----------------------------
推薦內容
猜你感興趣
赛车pk10官网开奖记录