Ajax学习(1)-简单ajax案例_H5之家 - 中国HTML5教程资源分享第一站

Ajax学习(1)-简单ajax案例，有需要的朋友可以参考下。

1.什么是Ajax？

2.Ajax应用的处理流程：

3.下面是一个使用简单的Ajax的小例子：

首先使用JavaScript创建XMLHttpRequest对象，下面是创建XML对象的JS代码：

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

varxmlreq;

functioncreatXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlreq=newXMLHttpRequest(); //IE7以上版本及其它浏览器
}elseif(window.ActiveXObject){
try{
xmlreq=newActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlreq=newActiveXObject("Micorosoft.XMLHTTP");//IE5、IE6
}catch(e){
}
}
}

}

然后是使用XMLHttpRequest对象向服务器发送请求，代码如下：

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14

functionsendRequest()
{

creatXMLHttpRequest();//创建XMLHttpRequest对象

varuri="index.jsp";//定义请求url

xmlreq.open("POST",uri,true);//打开与服务器的连接

xmlreq.onreadystatechange=changeProcess;//定义XMLHttpRequest对象的状态改变时的处理函数

xmlreq.send(null);//发送请求
}

定义XMLHttpRequest状态改变时的事件处理函数（回调函数），代码如下：

JavaScript Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

functionchangeProcess()
{

if(xmlreq.readyState==4)//XMLHttpRequest对象处理状态为4，表示对象读取服务器响应结束
{

if(xmlreq.status==200)//服务器返回状态码为200表示响应完成
{

varstudents=xmlreq.responseText.split("$");

//通过innerHTML属性来动态向DIV中填充内容,运行时删除Id后面_x_x的字符
document.getElementById("mysql").innerHTML=students[0];

document.getElementById("java").innerHTML=students[1];

document.getElementById("tomcat").innerHTML=students[2];
}
}

setInterval(sendRequest, 3000);

服务器对请求处理的jsp文件为index.jsp

JSP Code

1
2
3
4
5
6

<%@pagelanguage="java"import="java.util.*"pageEncoding="ISO-8859-1"%>
<%@pageimport="java.util.Random"%>
<%
Randomrandom=newRandom(System.currentTimeMillis());
out.println(random.nextInt(10)+"$"+random.nextInt(10)+"$"+random.nextInt(10));
%>

页面文件ajax1.html，并且将上述的JavaScript代码均放入此文件中。

html Code

1
2
3
4
5
6

<body>
mysql的学习人数是：<divid="mysql"></div>
java的学习人数是：<divid="java"></div>
Tomcat的学习人数是：<divid="tomcat"></div>
</body>

至此，打开服务器，访问：localhost：8080/工程名/ajax1.html

便可以看到，在页面上的人数会每隔3秒刷新一次。