JacaScript学习--Ajax

什么是Ajax？

• Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
• Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，会带来更好的用户体验。
• Ajax的技术核心是XMLHttpRequest对象（简称XHR）。
• Ajax通信与数据结构无关。

创建XMLHttpRequest对象

IE7+和FireFox、Chrome、Opera、Safari都支持原生的XMLHttpRequest对象。

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest()''
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
            i,len;
            for(i = 0,len = version.length; i < len; ++i) {
                try {
                    new ActiveXObject(version[i]);
                    arguments.callee.activeXString = version[i];
                    break;
                } catch (ex){
                    // 跳过
                }
            } 
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR object available");
    }
}

XMLHttpRequest的用法

var xhr = createXHR();
xhr.open("get","example.txt",false);
xhr.send(null);

open()方法调用三个参数，第三个参数是表示是否异步发送请求的布尔值。需要注意：

• URL相当于执行代码的当前页面（也可以是绝对路径）
• 调用open()方法并不会真正地发送请求。
• 如果不需要通过主体发送数据，则必须传入null，因为这个参数对某些浏览器来说是必须的。

只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别，都会引起安全错误。

在收到响应之后，响应的数据会填充XMLHttpRequest对象的属性。属性如下：

• responseTEXT：作为响应主体被返回的文本。
• responseXML：如果响应的内容是“text/html”或“application/xml”，这个属性中将保存着响应数据的XML DOM文档。
• status：响应的HTTP状态。
• statusText：HTTP状态的说明。

接收到像一个之后，如果此时状态代码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。
请求状态即readyState属性：

• 0:未初始化。尚未调用open()方法。
• 1:启动。已经调用open()方法，但是没有调用send()方法。
• 2:发送。已经发送send()方法，但尚未收到响应。
• 3:接收。已经接收到部分数据了。
• 4:完成。已经接收到全部响应数据，而且可以在客户端使用了。

onreadystatechange这个事件可以用来检测每次状态变化后readyState的值的情况

var xhr = new createXHR();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful:" + xhr.status);
        }
    }
}
xhr.open("get","example.txt",true);
xhr.send(null);

在接收到响应之前可以用xhr.abort()来取消异步请求。由于内存原因，不建议重用XMLHttpRequest对象

Http头部信息

每个Http请求和响应都会带来相应的头部请求。
t默认情况下，在发送XMLHttpRequest请求时，也会发送下列头部信息。

• Accept: 浏览器能够处理的内容类型。
• Accept-Charse:浏览器能够显示的字符集。
• Accept-Encoding:浏览器能够处理的压缩编码。
• Accept-Language浏览器当前设置的语言。
• Connection:浏览器与服务器之间链接的类型。
• Cookie:当前页面设置的任何Cookie。
• Host:发出请求的页面所在的域。
• Referer:发出请求的页面的URL。

要成功发送请求头部信息。setRequestHeader()这个方法接受两个参数：头部字段的名称和头部字段的值。这个字段可以自定义。getRequestHeader()这个方法可以获取相应头部字段的值

GET请求

• 对于XMLHttpRequest而言，位于open()方法内的URL末尾的查询字符串必须经过正确的编码才行。
• 查询字符串的每个参数的名称和值都必须使用**encodeURIComponent()**进行编码，然后才能放到URL末尾，而且所有的名-值都必须用“&”分隔。

向现有的URL末尾添加查询字符串参数

function addURLParam(url,name,value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

POST请求

post请求的主体可以包含非常多的数据。
提交表单和一般的post请求是不一样的。

POST请求解析web表单

var xhr = new createXHR();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful:" + xhr.status);
        }
    }
}
xhr.open("get","example.txt",true);
xhr.setRequestHeader("Content-type","application/x-wwww-form-urlencoded");
var form = document.getElementById("user-info");
xhr.send(serialize(form));

表单序列化：

function serialize(form) {
    var parts = [],
    field = null,
    i,len,j,optLen,option,optValue;
    for (i = 0,len = form.elements.length; i < len; ++i) {
        field = form.elements[i];
        switch(field.type) {
            case "select-one":
            case "selece-multiple":
            if (field.name.length) {
                for (j = 0,optLen = field.options.length; j < optLen; ++j) {
                    option = field.options[j];
                    if (option.selected) {
                        optValue = "";
                        if (option.hasAttribute) {
                            optValue = (option.hasAttribute("value") ? option.value:option.text);
                        } else {
                            optValue = (option.hasAttribute("value").specified ? option.value:option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(optValue));
                    }
                }
            }
            break;
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;
            case "radio":
            case "checkbox":
                if (!field.checked) {
                    break;
                }
                // 执行默认操作
            default: 
                // 不包含没有名字的表单字段
                if (field.name.length) {
                    parts.push(encodeURIComponent(field.name) + "=" + encodeURIComponent(field.name));
                }
        }
    }
} 

XMLHttpRequest2级

XMLHttpRequest级只是进行了基本实现，而XMLHttpRequest2级对其进行了扩展。
FormData

var data = FormData();
data.append("name","Nicholas");

可以将data直接传给send函数。
超时设定
设置了一个timeout属性，表示请求在等待响应多少毫秒之后就终止，仅适用于IE8+。

xhr.open("get","example.txt",true);
xhr.timeout = 1000;
shr.ontimeout  = function () {
	alert("request did not return in a second");
}
xhr.send(null);

overrideMimeType
用于重写XMLHttpRequest的MIME类型。

xhr.overrideMimeType("text/xml")保证响应当作XML文档而非纯文本来处理。

参考：
《JavaScript高级程序设计（第3版）》