XMLHttpRequest详解

xhr产生的意义

传统的web交互是用户触发一个http请求服务器，服务器收到之后，再做出响应到用户，并且返回一个新的页面。 AJAX 是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。

响应流程

准备页面请求，创建XMLHttpRequest对象-->使用 XMLHttpRequest对象的open()和send()方法发送资源请求给服务器-->后台计算-->onreadystatechange函数，状态改变时发送数据回客户端，使用XMLHttpRequest对象的responseText或responseXML属性获得服务器的响应。

优势

1. 不需要插件支持（一般浏览器且默认开启 JavaScript 即可）
2. 用户体验极佳（不刷新页面即可获取更新的数据）
3. 提升 Web 程序的性能（在传递数据方面做到按需放送，不必整体提交）
4. 减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）

不足

1. 前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）
2. 搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）

ajax请求模板

// GET
var xhr= new XMLHttpRequest();
xhr.open("GET","url",true); //get请求，url请求地址，true代表异步
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4）{
        if (xhr.status == 200) {
            console.log(xhr.responseText);
        }     
     }
}
//POST
var ajax = new XMLHttpRequest();
ajax.open("POST","url",true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("name=zhangsan&age=18");
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
     var json = JSON.parse(ajax.responseText);
     fn(json);
}

readyState不同值的意义

0 － （未初始化）还没有调用send()方法

1 － （载入）已调用send()方法，正在发送请求

2 － （载入完成）send()方法执行完成，已经接收到全部响应内容

3 － （交互）正在解析响应内容

4 － （完成）响应内容解析完成，可以在客户端进行调用