Ajax入门 基础概念与方法

 

 

XMLHttpRequest对象

 

除IE以外所有的浏览器都支持直接使用XMLHttpRequest对象。而IE是通过创建ActiveXObject来创建类似的对象。这里给出一种包装方法使得IE5以上的IE版本也能具有XMLHttpRequest对象，这样我们在使用XMLHttpRequest对象的时候可以使用同一的创建方法：

 

（来自《精通JavaScript》）

if (typeof XMLHttpRequest == 'undefined') {
    XMLHttpRequest = function() {
        return new ActiveXObject(
            navigator.userAgent.indexOf("MSIE 5") >= 0 ? "Microsoft.XMLHTTP" : "Msxml2.XMLHTTP"
        );
    }
}

 

发送请求

 

GET请求

 

只支持发送串行化数据（下文会有具体例子）

 

以下是GET请求发送的简单例子

 

    // 创建对象
    var xml = new XMLHttpRequest();
    // 初始化
    xml.open("GET", "test.html", true);
    // 发送
    xml.send();

 

POST请求

 

POST请求发送方式与GET请求发送方式类似，下文具体。

 

请求状态

 

我们可以通过XMLHttpRequest对象中的readyState监视请求的状态。readyState是一个整型值，各自代表的状态是：

 

0 = 未初始化

1 = 已初始化 （有些书将此状态注为下载，实际测试发现初始化后、未发送请求之前，状态已经修改为1）

2 = 下载已完成

3 = 交互的（响应被部分接收）

4 = 完成

 

在我们的Ajax应用中，一般只需要使用4-完成状态。

 

当请求状态变化时，会触发onreadystatechange事件，我们处理ajax响应就是为这个事件绑定处理函数。

 

客户端完整示例

 

以下结合上述内容，写一个完整的客户端ajax示例

 

    var xml = new XMLHttpRequest();
    
    // 未初始化 xml.readyState 为 0
    xml.open("POST", "test.html", true);
    // 已初始化 xml.readyState 为 1
    
    xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    if (xml.overrideMimeType)
        xml.setRequestHeader("Connection", "close");
    
    // 绑定状态变化事件处理函数
    xml.onreadystatechange = function() {
        alert(xml.readyState);
    }
    
    xml.send("abc");

 

数据对象的格式

 

根据数据对象的特点，我们可以选择合适的发送方式。

 

串行化

 

利用HTTP GET标准请求，即类似: http://www.zhengchuyu.cn/?name=zcy&nick=donald 的传输方式。

 

我们需要有一个串行化函数，并且是针对表单元素和键值对对象设计的。（不能串行化多选按钮）

 

function serialize(a) {
    var s = [];
    if (a.constructor == Array) {
        // 表单元素数组
        for (var i = 0; i < a.length; i++) {
            s.push( a[i].name + "=" + encodeURIComponent(a[i].value));
        }
    }
    else {
        // 键值对对象
        for (var j in a)
            s.push(j + "=" + encodeURIComponent(a[j]));
    }
    return s.join("&");
}

 

GET请求发送串行化数据

 

    var xml = new XMLHttpRequest();
    xml.open("GET", "test.html?" + serialize(data), true);
    xml.send();

 

POST请求发送串行化数据

 

    var xml = new XMLHttpRequest();
    xml.open("POST", "test.html", true);
    // 设置content-type头部信息，告诉服务器如何解析我们发送的数据
    xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    // 保证浏览器发送的串行化数据长度正确
    if (xml.overrideMimeType)
        xml.setRequestHeader("Connection", "close");
    // 串行化数据发送
    xml.send(serialize(data));

 

xml

 

后文详述。 

 

json

 

后文详述

 

HTTP响应

 

上文已经提到可以通过判断readyState的值得知请求状态，我们可以知道客户端是否已经获得了服务器响应。但是服务器并不是每一次都能正常响应，这时我们需要通过服务器响应代码（保存在返回结果对象的status变量中）判断响应情况。

 

状态码

 

成功响应 200～300

未修改响应 304

本地文件 无状态码

 

另外有一个特殊情况（来自《精通JavaScript》，没有验证），Safari浏览器中，如果文档自上次请求未曾修改过，会返回状态码“undefined”，比较怪异。

 

以下给出一判断XMLHttpRequest对象是否处于成功响应状态的兼容函数

 

function httpSuccess(r) {
    try {
        return !r.status && location.protocol == "file:" 
            || (r.status >= 200 && r.status < 300) 
            || r.status == 304
            || navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined";
    }
    catch(e) {
        return false;
    }
}

 

超时检查

 

超时检查比较简单，就是用一个变量记录是否超时，在send发送之前用一个setTimeout设定在某个时间段后把该变量标记为超时，并在状态改变响应函数中检测这一变量就行了。 

 

服务器返回数据

 

服务器可以返回任何格式的数据。一般比较常用的是XML、HTML、JavaScript/JSON。

 

获取数据

 

获取数据通过XMLHttpRequest的两个重要属性：responseXML和responseText。

 

responseXML 可以获取XML，即服务器明确指出“Content-Type:text/xml”时才可以由这个属性获取。

responseText 可以获取HTML和JavaScript类型的数据。

 

指定类型解析数据

 

以下是一个按指定类型解析数据的函数

 

（来自《精通JavaScript》，为了便于理解，稍有改动） 

 

// type可选值：xml, script, text, html 默认值：空
function httpData(r, type) {
    var ct = r.getResponseHeader("content-type");
    var data = !type && ct && ct.indexOf("xml") >= 0;
    data = (type == "xml" || data) ? r.responseXML : r.responseText;
    if (type == "script")
        eval.call(window, data);
    return data;
}