AJAX

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

如果仔细观察一个Form的提交，你就会发现，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面，然后在新页面里告诉你操作是成功了还是失败了。如果不幸由于网络太慢或者其他原因，就会得到一个404页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

最早大规模使用AJAX的就是Gmail，Gmail的页面在首次加载后，剩下的所有数据都依赖于AJAX来更新。

用JavaScript写一个完整的AJAX代码并不复杂，但是需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

在现代浏览器上写AJAX主要依靠 XMLHttpRequest 对象：

'use strict';



function success(text) {

var textarea = document.getElementById('test-response-text');

textarea.value = text;

}



function fail(code) {

var textarea = document.getElementById('test-response-text');

textarea.value = 'Error code: ' + code;

}



var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象



request.onreadystatechange = function () { // 状态发生变化时，函数被回调

if (request.readyState === 4) { // 成功完成

// 判断响应结果:

if (request.status === 200) {

// 成功，通过responseText拿到响应的文本:

return success(request.responseText);

} else {

// 失败，根据响应码判断失败原因:

return fail(request.status);

}

} else {

// HTTP请求还在继续…

}

}



// 发送请求:

request.open('GET', 'apicategories');

request.send();



alert('请求已发送，请等待响应…');

对于低版本的IE，需要换一个 ActiveXObject 对象：

'use strict';



function success(text) {

var textarea = document.getElementById('test-ie-response-text');

textarea.value = text;

}



function fail(code) {

var textarea = document.getElementById('test-ie-response-text');

textarea.value = 'Error code: ' + code;

}



var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象



request.onreadystatechange = function () { // 状态发生变化时，函数被回调

if (request.readyState === 4) { // 成功完成

// 判断响应结果:

if (request.status === 200) {

// 成功，通过responseText拿到响应的文本:

return success(request.responseText);

} else {

// 失败，根据响应码判断失败原因:

return fail(request.status);

}

} else {

// HTTP请求还在继续…

}

}



// 发送请求:

request.open('GET', 'apicategories');

request.send();



alert('请求已发送，请等待响应…');

如果你想把标准写法和IE写法混在一起，可以这么写：

var request;

if (window.XMLHttpRequest) {

request = new XMLHttpRequest();

} else {

request = new ActiveXObject('Microsoft.XMLHTTP');

}

通过检测 window 对象是否有 XMLHttpRequest 属性来确定浏览器是否支持标准的 XMLHttpRequest 。注意， 不要 根据浏览器的 navigator.userAgent 来检测浏览器是否支持某个JavaScript特性，一是因为这个字符串本身可以伪造，二是通过IE版本判断JavaScript特性将非常复杂。

当创建了 XMLHttpRequest 对象后，要先设置 onreadystatechange 的回调函数。在回调函数中，通常我们只需通过 readyState === 4 判断请求是否完成，如果已完成，再根据 status === 200 判断是否是一个成功的响应。

XMLHttpRequest 对象的 open() 方法有3个参数，第一个参数指定是 GET 还是 POST ，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是 true ，所以不用写。

注意 ，千万不要把第三个参数指定为 false ，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

最后调用 send() 方法才真正发送请求。 GET 请求不需要参数， POST 请求需要把body部分以字符串或者 FormData 对象传进去。