JavaScript Ajax详解

Ajax(Asynchronous JavaScript + XML)是一种能够向服务器发送请求而不用卸载页面的技术，其核心是XMLHttpRequest对象(简称XHR)。

一、XMLHttpRequest对象

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。除了版本小于IE6的浏览器，其他所有浏览器都内容XMLHttpRequest对象。下面是跨浏览器获得XMLHttpRequest的方法。

function getXMLHttpRequest() {
    if(window.XMLHttpRequest) {
        //Chrome, IE7+, Firefox, Opera, Safari
        return new XMLHttpRequest();
    } else {
        // IE6, IE5
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}

当XHR创建好后，就可以发送ajax请求了。可以通过以下代码发送ajax请求。

function showList() {
    var xhr = getXMLHttpRequest();
    xhr.open('GET', 'AjaxTestServlet', true);
    xhr.send();
}

其中open方法接受三个参数: 请求的类型, 请求的URl, 是否异步(true表示异步)。这里要注意的是URL要与当前URL同源(协议、域名、端口号一致)。当调用open()方法并不会真正发送请求，而只是启动一个请求以备发送。send方法将请求发送到服务器，当请求类型为"POST"请求时，可以将请求主题发送的参数传给send方法。

当发送完请求后，如果需要获得来自服务器的响应，通过XHR对象中的status属性和readyState属性来判断请求到什么状态了，通过responseText和responseXML来接受响应的数据。

responseText：作为响应主体被返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM 文档。
status：响应的HTTP 状态。200表示成功，404表示未找到页面。
readyState：HTTP 状态的说明。其中【0: 请求未初始化；1: 服务器连接已建立；2: 请求已接收；3: 请求处理中；4: 请求已完成，且响应已就绪】

而当readyState发生变化时，会触发XHR对象上的onreadystatechange事件。所以上边请求，我们可以这样写来处理响应成功后的返回数据。

function showList(callbackFun) {
    var xhr = getXMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
            if(callbackFun && typeof callbackFun === 'function') {
                callbackFun();
            }
        }
    };
    xhr.open('GET', 'AjaxTestServlet', true);
    xhr.send();
    console.log('send');
}

需要注意的地方是必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

二、GET请求和POST请求

GET请求和POST请求时我们最常用的请求方式。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用 POST 请求：

1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

在使用GET请求时，你可能得到的是缓存的结果，为了避免这种情况，可以向URL添加一个唯一ID。如

    xhr.open('GET', 'AjaxTestServlet?t=' + Math.random(), true);
    xhr.send();

另外值得注意的是，无论是GET请求还是POST请求，URL后面跟的请求数据必须使用encodeURIComponent()进行编码。

在使用POST方式发送ajax时， 我们可以使用XHR来模仿表单提交：首先将Content-Type 头部信息设置为application/x-www-form-urlencoded，也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串。在设置头信息时，代码必须位于open函数和send函数之间。

function showPOST(callbackFun) {
    var xhr = getXMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
            if(callbackFun && typeof callbackFun === 'function') {
                callbackFun();
            }
        }
    };
    xhr.open('POST', 'AjaxTestServlet', true);
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xhr.send('name=ZhangSan&age=22');
    console.log('send');
}