Ajax技术

Ajax

Ajax使用的技术

Ajax是XMLRequest对象和JavaScript、XML、CSS、DOM等多种技术的结合。

使用XMLHttpRequest对象

通过XMLHTTPRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的操作交个服务器。

初始化XMLHTTPRequest对象

在使用XMLHTTPRequest对象发送请求和处理响应之前，首先要初始化对象，由于XMLHTTPRequest不是一个W3C标准，所以对于不同的浏览器，初始化的方法也不相同。通常只需要考虑两种情况。

一种是IE浏览器（把XMLHTTPRequest实例化为一个ActiveX对象）

var http_request=new ActiveXObject("Msxml2.XMLHTTP");
或者
var http_request=new ActiveXObject("Microsoft.XMLHTTP");

上面的Msxml2.XMLHTTP和Microsoft.XMLHTTP是针对IE不同的版本设置的。目前常用的是这两种。

非IE浏览器（把XMLHTTPRequest实例化为一个本地的JavaScript对象）

var http_request=new XMLHttpRequest();

为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象

if (window.XMLHttpRequest) {
    http_request=new XMLHttpRequest();
}else if (window.ActiveXObject) {
    try{
        http_request=new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            http_request=new ActiveXObject("Microsoft.XMLHTTP");
        }catch(e){}
    }
}

在上面的代码中，调用window.ActiveXObject将返回一个对象，或是null，在if语句中，会把返回值看作是true或false(如果返回的是一个对象，则为true，否则返回null，为false)。

由于JavaScript具有动态类型的特性，而且XMLHttpRequest对象在不同浏览器上的实例是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性的方法，不需要考虑创建该实例的方法是什么，所以用不同的方式创建实例，都是可以的。

XMLHttpRequest对象的常用方法

1. open()：用于设置进行异步请求目标的URL、请求方法以及其他参数信息open("method","URL"[,asyncFlag[,"username"[,"password"]]]);method：请求的类型（一般为get或post）URL：请求地址绝对或相对地址，并且可以传递查询字符串。asyncFlag：指定请求方式，异步请求为true，同步请求为false，默认情况用true。username,password：指定请求的用户名或密码，没有时可忽略。
2. send()：用于向服务器发送请求。如果请求申明为异步，该方法将立即返回，否则将等到收到接收到响应为止。send(content);content：用于指定要发送的数据，可以是DOM对象的实例，输入流或字符串。如果没有参数可以传递，可以设置为null。
3. setRequestHeader()：用于为请求的HTTP头设置值。setRequestHeader(“header”,”value”);setRequestHeader()方法必须在调用open()方法之后才能使用。在发送Post请求时，需要设置conten-Type请求头的值http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4. abort()：用于停止或放弃当前异步请求
5. getResponseHeader()：用于以字符串形式返回指定的HTTP头信息。语法为getResponseHeader("headerlabel");headerlabel:用于指定Http头，包括Server，Conten-Type，和Date等
6. getAllResponseHeaders()：用于以字符串形式返回完整的HTTP头信息，包括Server，Date，Content-Type和Content-length。

在使用onreadystatechange属性指定回调函数时，不能指定要传递的参数以及添加小括号，不过可以使用匿名函数

http_request.onreadystatechange=function(){
    getResult("添加参数");
}

XMLHttpRequest对象常用的属性

通过这些属性可以获取服务器的响应状态以及响应内容。
1. onreadystatechange属性：用于指定状态改变所触发的事件处理器。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。
2. readyState：用于获取请求状态，0：未初始化，1：正在加载，2：已加载，3：交互中，4：完成。
3. responseText：用于获取服务器的响应，表示字符串。
4. responseXML：用于获取服务器的响应，表示XML。这个对象可以解析为一个DOM对象。
5. status：用于返回服务器的状态码（200：成功，202：表示请求被接受，但尚未成功，400：错误请求，404：文件未找到，500：内部服务器错误）