返回首页
当前位置: 主页 > 网络编程 > Ajax实例教程 >

Ajax的原理及例子

时间:2012-06-28 19:15来源:知行网www.zhixing123.cn 编辑:麦田守望者

构建一个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技巧
------分隔线----------------------------
推荐内容
猜你感兴趣