原生js实现Ajax的原理

Ajax(Asynchronous JavaScript and XML)表示异步的js与xml。有别于传统web的同步开发方式。
原理：通过XMLHttpRequest对象向服务器发送异步请求，从服务器获得数据，然后使用js操作DOM更新数据。
该对象是ajax的核心机制，他是在IE5中首先引入的，是一种支持异步请求的技术。
通过ajax可以及时的向服务器提出请求和处理响应，而不阻塞用户，达到无刷新更新部分页面的效果。
XMLHttpRequest这个对象的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序；
responseText 从服务器进程返回数据的字符串形式；
responseXML 从服务器进程返回的DOM兼容的文档数据对象；
status 从服务器返回的数字代码，常见的200（客户端请求成功，已就绪）和404（请求资源不存在）
statusText 伴随状态码的字符串信息 （eg：200 OK）
readyState 对象状态值
0（未初始化状态）对象已建立或已被abort()方法重置，尚未调用open方法。
1（初始化状态）open()方法已经调用，但是send()方法为调用。请求还没有被发送。
2（发送数据）send()方法法以调用,HTTP请求已发送到Web服务器。未接收到响应。
3（数据传送中）所有响应头部都已经接收到。响应体开始接受但未完成。
4（完成加载）HTTP响应已经完全接收。

                    （拓展：封装ajax？）
                    ajax({
                        url: "./TestXHR.aspx",       //请求地址
                        type: "POST",                            //请求方式
                        data: { name: "super", age: 20 },    //请求参数
                        dataType: "json",
                        success: function (response, xml) {
                          // 此处放成功后执行的代码
                        },
                        error: function (status) {
                          // 此处放失败后执行的代码
                        }
                      });
                     
                      function ajax(options) {
                        options = options || {};
                        options.type = (options.type || "GET").toUpperCase();
                        options.dataType = options.dataType || "json";
                        var params = formatParams(options.data);
                        var xhr;
                     
                        //创建 - 第一步
                        if (window.XMLHttpRequest) {
                          xhr = new XMLHttpRequest();
                        } else if(window.ActiveObject) {         //IE6及以下
                          xhr = new ActiveXObject('Microsoft.XMLHTTP');
                        }
                     
                        //连接 和 发送 - 第二步
                        if (options.type == "GET") {
                          xhr.open("GET", options.url + "?" + params, true);
                          xhr.send(null);
                        } else if (options.type == "POST") {
                          xhr.open("POST", options.url, true);
                          //设置表单提交时的内容类型
                          xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                          xhr.send(params);
                        }

                         //接收 - 第三步
                        xhr.onreadystatechange = function () {
                          if (xhr.readyState == 4) {
                            var status = xhr.status;
                            if (status >= 200 && status < 300 || status == 304) {
                              options.success && options.success(xhr.responseText, xhr.responseXML);
                            } else {
                              options.error && options.error(status);
                            }
                          }
                        }
                      }

                      //格式化参数
                      function formatParams(data) {
                        var arr = [];
                        for (var name in data) {
                          arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
                        }
                        arr.push(("v=" + Math.random()).replace("."));
                        return arr.join("&");
                      }

                      （拓展：什么是jsonp和pjax？）
                      Jsonp:(JSON with Padding/json的补充)是一种跨域的请求方式。
                              原理：利用script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码(类似于callback(data)，其中data就是传回的数据，通过网页端js函数callback引用)，这种方式和通过script标签引用外部文件的原理是一样的。
                              Jsonp由两部分组成：回调函数和数据，回调函数一般是由网页端控制，将回调函数名作为参数发往服务器端，服务器端把该函数和数据拼成字符串返回。