Ajax

Ajax - Asynchronous JavaScript and XML

• 用JavaScript执行异步网络请求。

Form的提交，

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

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

要让用户留在当前页面中，同时发出新的HTTP请求

• 就必须用JavaScript发送这个新请求
• 接收到数据后，再用JavaScript更新页面
• 这样用户就感觉自己仍停留在当前页面，但是数据却不断地更新。

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

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

diffferent browser

现代浏览器

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

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', '/api/categories');
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()

XMLHttpRequest对象的open()方法有3个参数，

• 第一个参数: GET还是POST，
• 第二个参数: URL地址，
• 第三个参数: 是否使用异步，默认是true，所以不用写。
  • 不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。
  • 如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

最后调用send()方法才真正发送请求。

• GET请求不需要参数，
• POST请求需要把body部分以字符串或者FormData对象传进去。

.