【翻译】异步 Javascript 系列（二）—— Ajax 请求

以下是第二课的翻译内容

---

这节课主题是Ajax 请求

上节课我们讨论了异步行为通常用于抓取数据，这节课会继续讲实际是如何抓取数据和抓取数据所需的 Ajax 请求是如何发起。

异步请求

Ajax 请求允许我们与服务端进行交互，发起一个 HTTP 请求，在页面没有刷新的情况下获取服务器端返回的数据，这种代码在网上随处可见并时常使用。

一个简单的例子，浏览一个可放大缩小或绘制的交互式地图，这就很有可能使用了 Ajax 请求来无刷新页面地更新地图里的各个图例。

好了，Ajax 全称异步 JavaScript 和 XML （Asynchronous JavaScript and XML），XML 这部分指获取的数据，目前而言更多会是使用JSON来替代。

JSON是一种更符合 JavaScript 语法的数据格式，XML 类似于 JSON 但较为丑陋。

接下来看看如何发起 HTTP 请求。（作者 Shaun 此课程使用的是 ATOM 编辑器与安装使用live server 插件实现保存文件自动刷新浏览器）

目录结构：

-- data
    |_ tweet.json
-- async.js
-- index.html

下面用代码与文字方式说明两种发起 HTTP 请求的方式，原生 Javascript 与 jQuery，然后进行对比

原生 Javascript 方式发起请求

创建 Ajax 请求并发送，监听状态变化

'async.js'
window.onload = function(){
    var http = new XMLHttpRequest(); // 创建 XMLHttpRequest 对象

    http.onreadystatechange = function () {
        // readyState 值
        // 0 请求还没初始化， new XMLHttpRequest() 之后，open 之前
        // 1 请求已建立 open 之后
        // 2 请求已发送 send 之后
        // 3 请求处理中
        // 4 请求处理完成 代表已返回数据可使用
        console.log(http.readyState);
    };

    // open 方法告诉 Javascript
    // 参数1 请求的类型(get)；
    // 参数2 获取数据的地方(data/tweet.json)；
    // 参数3 是同步还是异步处理(true 代表异步, false 代表同步);
    http.open('get', 'data/tweet.json', true);

    http.send(); // send 是真正发起请求，open 只是设置请求
};

http.onreadystatechange = function () {
    // 当请求已处理完成并状态码 200 成功
    if (http.readyState === 4 && http.status === 200) {
        var data = JSON.parse(http.response); // http.response 的是字符串内容，需要转换成 JSON 格式的对象
        console.log(data); // {name: "kirin"}
    }
};

Ajax 同步设置

http.open('get', 'data/tweet.json', false); // false 改为同步
http.send();

console.log('在 Ajax 请求处理后输出这行内容');

jQuery 方式发起请求

依赖 jQuery，不用关心 readyState、open、send 等等

// 异步方法 get
$.get('data/tweet.json', function(data){
    console.log(data);
});

$.get 方法进入 Javascript 外的线程进行抓取数据，等到数据抓取成功，触发回调函数，并将成功抓取的数据传到 data 当中以供使用

总结

两者对比而言 Shaun 更喜欢 jQuery 方式，因为更加简洁与抽象，但 Javascript 的方式能让你更好理解其中的过程。