Ajax应用到的技术

[http://www.blogjava.net/eamoi/]

[http://spaces.msn.com/members/eamoi/]

A、 XMLHttpRequest对象

IE5.0开始，开发人员可以在Web页面内部使用XMLHTTP ActiveX组件扩展自身的功能，不用从前的Web页面导航就可以直接传输数据到服务器或者从服务器接收数据。Mozilla 1.0 以及NetScape 7 则是创建继承XML的代理类XMLHttpRequest；对于大多数情况，XMLHttpRequest对象和XMLHTTP组件相似，方法和属性类似，只是部份属性不同。

XMLHttpRequest对象初始化：

Javascript,DOM,XML

AJAX开发框架的基本流程：对象初始化->发送请求->服务器接收->服务器返回->客户端接收->修改客户端页面内容。

A、初始化对象并发出XMLHttpRequest请求

if(window.XMLHttpRequest){ //Mozilla,Safari,...

http_request=new XMLHttprequest();

}else if(window.ActiveXObject){//IE

http_request=new ActiveXOject("Microsoft.XMLHTTP");

}

B、指定响应处理函数

http_request.onreadystatechange=processRequest;

需要指出的是，这个函数名称不加括号，不指定参数。也可以用Javascript 即时定义函数的方式定义响应函数。比如：

http_request.onreadystatechange=function(){

//.......

//处理

};

C、发出HTTP请求

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

http_request.open('GET','http://www.example.org/some.file',true); //open的第一个参数是HTTP请求的方法，为Get、Post或者Head.

//open的第二个参数是目标URL。基于安全考虑，这个URL只能是同网域的。

http_request.send(null);

按照顺序，open 调用完毕之后要调用 send 方法。send的参数如果是以Post方式发出的，可以是任何想传给服务器的内容。不过，跟form一样，如果要传文件或者Post 内容给服务器，必须先调用setRequestHeader 方法，修改MIME类型。如下：

http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

这时资料以查询字符串的形式列出，作为send 的参数，例如：

name=value&anothername=othervalue&so=on

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

检查XMLHttpRequest 对象的readyState值，判断请求目前的状态．当readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了．如下：

if(http_request.readyState==4){

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

}else{

//信息还没有返回，等待

}

服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误．其中，２００代表页面正常．

if(http_request.status==200){

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

}else{

//页面有问题

}

XMLHttpRequest对成功返回的信息有两种处理方式：

responseText:将返回的信息当字符串使用；

responseXML: 将返回的信息当XML文档使用，可以用DOM处理．

一个例子：初步开发框架