使用XMLHttpRequest发送异步请求

1.AJAX
AJAX并不是发明了一个新技术，而是它可以实现本该是浏览器的责任-就是发送HTTP请求并接收响应，并且可以同步或异步执行发送和接收。比如你用浏览器打开一个网址，并且该网址有评论功能，你输入了一些评论，并点击了确定，这时候浏览器就会帮你发送请求并刷新网页让你的评论加载出来；如果用AJAX完成这个添加评论的功能，你会发现浏览器并没有刷新网页，而你的评论已经消消地加载到网页上了。

了解一下同步和异步执行代码的区别：

code_1;
code_2;
code_3;

在同步执行下，code_1执行完毕之后，执行code_2，然后同理执行code_3，但如果code_1执行花费了10分钟，那么code_2就要等待10分钟之后才能执行，同理code_3要等待code_2的执行结束，这就是同步执行。
在异步执行下，code_1开始了，它也要执行10分钟，但code_2此时却不会等待code_1执行完毕，而会直接开始自己的执行，同理code_3也不会等待code_2会直接开始执行自己的代码，这就是异步执行。

2.使用XMLHttpRequest对象实现AJAX
XMLHttpRequest对象直属于window对象，利用它的方法和属性来实现我们的AJAX，上述加载评论功能的步骤：
1.新建一个 XMLHTTPRequest 对象；
2.向服务器发送请求；
3.接收服务器的响应，根据响应结果确定接下来的步骤；
4.如果出错则可以给出提示，否则跳转步骤5；
5.利用服务的响应结果使用JS动态修改网页，完成本次AJAX操作。
一次AJAX操作：

// 新建一个XMLHttpRequest对象
var xhs = new XMLHttpRequest();
// 绑定事件，在xhs的readystate属性发生改变时做出处理
xhs.onreadystatechange = readyStateChange;
try{
    // 使用open方法初始化
    // 第一个参数为请求方法 可以为GET、POST或其他
    // 第二个参数为请求的地址
    // 第三个参数为true 则为异步执行，为false 则为同步执行
    xhs.open("GET","http://yourserver.com",true);

    // 中间可以使用xhs.setRequestHeader(k,v)添加HTTP请求头部字段
    // 比如设置不接受过期的缓存
    xhs.setRequestHeader("Cache-Control","no-cache");

    // 使用send方法发送请求，这一步真正开始和服务器交互
    xhs.send();
    // 如果使用同步请求，写在send方法之后的代码都会卡住，一直等待服务器返回结果为止
} catch (err){
    // 记录错误到控制台
    console.log(err.message);
}
// 事件处理函数，当xhs的readystate属性改变时调用
function readyStateChange(){
    switch(xhs.readyState){
        case 0:
            // 此时对象尚未初始化，也没有调用open方法
            console.log("创建请求...");
            break;
        case 1:
            // 此时对象已经调用了open方法，当没有调用send方法
            console.log("请求创建成功，准备发送请求...");
            break;
        case 2:
            // 此时调用了send方法，但服务器还没有给出响应
            console.log("请求发送完毕，等待接收响应...");
            break;
        case 3:
            // 此时正在接收服务器的请求，当还没有结束，一般这里不做处理
            break;
        case 4:
            // 此时已经得到了服务器放回的数据，可以开始处理
            console.log("接收响应成功，开始处理...");

            // 调用自定义的函数处理结果
            handleResult();

            console.log("响应处理完毕，本次AJAX结束。");
            break;
    }
}
// 用这个方法对xhs返回的结果进行处理
function handleResult(){
    switch (xhs.status){
        case 200:
            // 正确的响应
            // 使用 xhs.responseText 拿到服务器响应的字符串形式，比如它是一个JSON字符串格式
            var res = JSON.parse(xhs.responseText);
            // 然后 res.XXX 之类的使用它们
            // 比如我们添加评论，这返回结果可以包含一个是否添加成功标识，根据标识使用DOM将评论动态更新到网页上
            break;
        case 404:
            console.log("未找到页面");
            break;
        case 500:
            console.log("服务器处理过程中发生错误");
            break;
        default:
            console.log("发生了未预料的错误");
    }
}

3.使用JQuery完成AJAX
使用JQuery的话，其实它也是使用XMLHttpRequest对象完成的AJAX，但是它帮助我们进行了一次封装，让我们可以更方便的使用AJAX，但个人推荐学会XMLHttpRequest，逐步放弃对JQuery的依赖，示例：

// 在已经引入JQuery的js脚本情况下
// 第二个参数使用了 {} ，这个参数用来给服务传递额外的数据
$.get("http://yourserver.com",{},function(res){
    // 这里可以使用使用参数 res 进行处理，res即为服务器返回的数据
},"json");
// 指定最后一个参数为json,将自动为服务器返回的结果字符串进行JSON转换

需要注意在IE6或以下是没有XMLHttpRequest对象的，它使用 new ActiveXObject(“Msxml2.XMLHTTP.5.0”) 或 new ActiveXObject(“Microsoft.XMLHTTP”) 实现AJAX功能。