1.什么是Ajax？
- Ajax是Asynchronous JavaScript and XML 的缩写，即异步的Javascript和XML。
- 可以使用Ajax在不加载整个网页的情况下更新部分网页信息。
- Ajax以XMLHttpRequest对象为核心，结合了Javascript、DOM、CSS的新技术。
- Ajax的主要特征是异步发送请求以及动态加载相应数据。
2.Ajax应用的处理流程：
- 使用JavaScript脚本创建XMLHttpRequest对象
- 使用 XMLHttpRequest对象向服务器发送请求，GET和POST请求均可以发送，推荐使用POST
- 为XMLHttpRequest对象的onreadystatechange，绑定时间监听函数
- 当服务器响应送回到浏览器时，通过XMLHttpRequest对象获取服务器的相应数据
- 使用JavaScript通过DOM动态更新Html页面，也可为服务器响应数据增加CSS样式
3.下面是一个使用简单的Ajax的小例子：
首先使用JavaScript创建XMLHttpRequest对象，下面是创建XML对象的JS代码：
JavaScript Code
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
var xmlreq;
function creatXMLHttpRequest(){ if(window.XMLHttpRequest){ xmlreq=new XMLHttpRequest(); //IE7以上版本及其它浏览器 }else if(window.ActiveXObject){ try { xmlreq=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlreq=new ActiveXObject("Micorosoft.XMLHTTP");//IE5、IE6 } catch (e) { } } } } |
然后是使用XMLHttpRequest对象向服务器发送请求，代码如下：
JavaScript Code
|
2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
function sendRequest()
{ creatXMLHttpRequest(); //创建XMLHttpRequest对象 var uri = "index.jsp"; //定义请求url xmlreq.open("POST", uri, true); //打开与服务器的连接 xmlreq.onreadystatechange = changeProcess; //定义XMLHttpRequest对象的状态改变时的处理函数 xmlreq.send(null); //发送请求 } |
定义XMLHttpRequest状态改变时的事件处理函数（回调函数），代码如下：
JavaScript Code
|
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
function changeProcess()
{ if (xmlreq.readyState == 4) //XMLHttpRequest对象处理状态为4，表示对象读取服务器响应结束 { if (xmlreq.status == 200) //服务器返回状态码为200表示响应完成 { var students = 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
|
2 3 4 5 6 |
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.Random" %> <% Random random=new Random(System.currentTimeMillis()); out.println(random.nextInt(10)+"$"+random.nextInt(10)+"$"+random.nextInt(10)); %> |
html Code
|
2 3 4 5 6 |
<body>
mysql的学习人数是：<div id="mysql"></div> java的学习人数是：<div id="java"></div> Tomcat的学习人数是：<div id="tomcat"></div> </body> |
便可以看到，在页面上的人数会每隔3秒刷新一次。