(转)JAVA AJAX教程第三章—AJAX详细讲解

现在开始深入AJAX，这里还是按老思路，理论和实践相结合。这章的内容主要是讲解AJAX步骤详解，下一张将会用一个AJAX技术实现页面提示效果的实例来说明AJAX的实现。

一、AJAX步骤详解

AJAX实质上是遵循Request/Server模式来进行工作的，这个框架基本的流程包括下面几个具体的步骤：

（1）       XMLHttpRequest对象初始化

（2）       发送请求

（3）       服务器接收请求并进行处理

（4）       服务器返回响应数据

（5）       客户端接收

（6）       依据响应数据修改客户端页面内容

整个过程中的通信交互方式都是异步的。下面根据具体步骤讲解AJAX的核心工作机制：

1、  初始化并创建XMLHttpRequest对象并发出XMLHttpRequest请求

为了让JAVASCRIPT可以向服务器发送HTTP请求，必须使用XMLHttpRequest对象。使用之前，要先将XMLHttpRequest对象实例化。各个浏览器对这个实例化过程实现不公。IE浏览器以AcitiveX控件的形式提供，而Mozilla浏览器等浏览器则直接以XMLHttpRequest类的形式提供。所以在第一章为了编写的程序可以跨浏览器运行，这样写：

if(window.XMLHttpRequest){

XMLHttpReq = new XMLHttpRequest();

}else if(window.ActiveXObject){

try{

XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP");

}catch(e){

try{

XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP");

}catch(e1){}

}

}

另外，有些Mozilla浏览器处理服务器信息未包含XML mime-type头部信息的返回内容时会出错。因此，要确保返回的内容包含text/xml信息：

XMLHttpRequest = new XMLHttpRequest();

XMLHttpRequest.overrideMimeType(“text/xml”);

2、  指定响应处理函数

下来要指定当前服务器返回信息时客户端的处理方式，只要将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性就可以了。比如：

XMLHttpRequest.onreadystatechange = processResponse;

需要注意，这个函数名不加括号，不指定参数。也可以用JAVASCRIPT即时定义函数的方式定义相应函数。比如：

XMLHttpRequest.onreadystatechange = function () {  };

3、  发出HTTP请求

指定响应处理函数之后，就可以向服务器发送HTTP请求了。这一部调用了XMLHttpRequest对象的open和send方法。

XMLHttpRequest.open(“GET”,url,true);

XMLHttpRequest.send(null);//发送请求

Open的第一参数是HTTP请求的方法，为GET、POST或者Head。Open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的，否则提示“没有权限”的错误。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。Open的第三个参数只是指定在等待服务器返回信息的时间内是否继续执行下面的代码。如果为ture，则不会继续执行，直到服务器返回信息。默认为true。

按照顺序，open调用完毕之后要调用send方法。Send的参数如果是以POST方式发出的话，可以是任何想传给服务器的内容。

4、  处理服务器返回的信息

首先，检查XMLHttpRequest的readyState值，判断请求目前的状态。参照前面的属性表可以知道，readyState值为4时，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。例如：

if(XMLHttpReq.readyState == 4){

//信息已返回，可以开始处理

}else{

//信息还未返回，等待

}

信息返回后还需判断HTTP状态码，确定返回的页面没有错误。其中200代表页面正常，基本程序如下：

if(XMLHttpReq.status == 200){

//页面正常，可以开始处理信息

}else{

//页面有问题

}

XMLHttpRequest对成功返回的信息有两种处理方式，一种为responseText，即将传回的信息当字符串使用；另一种为reponseXML，即将传回的信息当XML文档使用，可以使用DOM处理。

总结以上的步骤我们就可以整个出一个初步的AJAX开发框架，供以后调用了。例子代码如下，以后只需在其中改变具体的数据：

<script language="javascript">

var XMLHttpReq = false;

function createXMLHttpRequest(){

if(window.XMLHttpRequest){

XMLHttpReq = new XMLHttpRequest();

}else if(window.ActiveXObject){

try{

XMLHttpReq = new ActiveXObject("MSXML2.XMLHTTP");

}catch(e){

try{

XMLHttpReq = new ActiveXObject("Mircsoft.XMLHTTP");

}catch(e1){}

}

}

}

function sendRequest(url){

//创建XMLHttpRequest对象

createXMLHttpRequest();

//调用open方法

XMLHttpReq.open("GET",url,true);

//指定服务器返回信息时客户端的处理函数

XMLHttpReq.onreadystatechange = processResponse;

//向服务器发送请求

XMLHttpReq.send(null);

}

function processResponse(){

//判断相应情况

if(XMLHttpReq.readyState == 4){

//判断HTTP状态码

if(XMLHttpReq.status == 200){

var res = XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;

window.alert(res);

document.myform.uname.value="";

document.myform.pwd.value="";

}else{

window.alert("你请求的页面有异常");

}

}

}

function userCheck(){

var uname = document.myform.uname.value;

var pwd = document.myform.pwd.value;

if(uname == ""){

window.alert("用户名不能为空");

document.myform.pwd.value="";

document.myform.uname.focus();

return false;

}else{

//调用AJAX初步框架

sendRequest("login?uname="+uname+"&pwd="+pwd);

}

}

</script>