ajax的原生实现-XMLHttpRequest

摘要：的交互原理则是请求事件目标从而到达后端事件目标。事件目标对请求事件进行验证实现业务逻辑，最后可以响应处理结果与前端交互。

ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。当初JavaScript的变革就是ajax的出现而改变。在现代web领域对数据的异步加载和局部更新上也在大量采用ajax这项技术。
目前浏览器在使用ajax技术上都是使用XMLHttpRequest(XHR)对象来对服务器进行交互。对于IE低版本（6/7）上则是使用的另一种实现方式（ActiveXObject),我们可以从URL获取数据，而不用让整个页面刷新，从而实现局部刷新。这样请求的次数也会大大减少,有效节约资源浪费。XMLHttpRequest的交互原理则是XMLHttpRequst请求事件目标（XMLHttpRequestEventTarget)从而到达后端事件目标。事件目标对请求事件进行验证实现业务逻辑，最后可以响应处理结果与前端交互。XMLHttpRequest不光能请求XML类型的数据（文本、图片、html，信息流等），同样还支持HTTP以外的协议，比如文件流和ftp等等。类似的还有WebSockets（全双工通信），Server-Sent event（HTML5服务器发送事件）。

在使用XMLHttpRequest之前我们需要初始化一个XMLHttpRequest对象，才能使用它的属性和方法。

常用方法和属性：

// 初始化对象，将最先调用该对象的构造函数
var oReq = new XMLHttpRequest();  
oReq.open(method,url,async);  // 初始化一个请求，例如 oReq.open("GET",url,true)


++++++++++++++++++++++++++++++++++++++++++
function reqListener () {
  console.log(this.responseText);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener; // 请求加载完成调用此方法
oReq.open("get", "yourFile.txt", true);
oReq.send();
// XMLHttpRequest同样也支持多种时间绑定，第一个参数为触发时间，第二个参数为绑定执行函数
var req = new XMLHttpRequest();
req.addEventListener("progress", updateProgress, false);
req.addEventListener("load", transferComplete, false);
req.addEventListener("error", transferFailed, false);
req.addEventListener("abort", transferCanceled, false);
req.open();
//注意：必须在open()之前添加事件监听，否则progress(进度)事件将不会被触发
// 此外XMLHttpRequest还能够接收二进制数据，具体操作可以阅读相关文档
var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder || window.BlobBuilder;
var oReq = new XMLHttpRequest();
oReq.open("GET", "/myfile.png", true);
oReq.responseType = "arraybuffer";
oReq.onload = function(oEvent) {
  var blobBuilder = new BlobBuilder();
  blobBuilder.append(oReq.response);
  var blob = blobBuilder.getBlob("image/png");
  // ...
};
oReq.send();
+++++++++++++++++++++++++++++++++++++++++++++


oReq.setRequestHeader(header,value); //针对post方法需要设置头部信息才能有效解析参数
oReq.setRequestHeader("content-type","application/x-www-form-urlencoded");
oReq.send()方法，如果是get协议可以为空，但是如果是post协议，则传递给服务端的参数需要在这里面指定
xhr.send("foo=bar&lorem=ipsum");  // post表单数据可以通过for/in拼接字符串来进行
// xhr.send("string"); 
// xhr.send(new Blob()); 
// xhr.send(new Int8Array()); 
// xhr.send({ form: "data" }); 
// xhr.send(document);
oReq.onreadystatechange = fn;  // 在readyStatus属性状态发生改变时触发
// 当readyStatus就绪状态发生改变时调用函数，状态有0-4
xhr.onreadystatechange = function() {
    if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
        // 请求结束后,在此处写处理代码
    }
}
oReq.response // 返回响应的正文，它和reponseText的区别是，response还可以是其他类型的数据，不光是文本类型
oReq.responseText // 请求成功会返回一个响应的字符串，如果发送失败或未发送则返回null
var xhr = new XMLHttpRequest();
xhr.open("GET", "/server", true);
// If specified, responseType must be empty string or "text"
xhr.responseType = "text";
xhr.onload = function () {
    if (xhr.readyState === xhr.DONE) {
        if (xhr.status === 200) {
            console.log(xhr.response);
            console.log(xhr.responseText);
        }
    }
};
xhr.send(null);
// 返回一个无符号请求响应状态，比如 200，304,501,404
oReq.status 
其他属性和方法我们可以打印XMLHttpRequest对象或者参考官方文档来进行使用

需要注意缓存问题和编码,针对中文可以使用url编码工具进行处理，对于缓存问题可以使用添加时间随机数来解决。

var xhr = new XMLHttpRequest();
// 第三个参数为true则使用异步I/O处理方式，fase为同步I/O处理方式(阻塞式，在没有响应数据返回时程序会等待）
xhr.open("get","index.php?username"+encodeURI("严总")+"&age=30&"+ new Date().getTime(),true);
xhr.send();
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        consoel.log(xhr.responseText);
    } else {
        console.log("status:"+xhr.status);
        return false;
    }
};

声明了请求头之后会自动进行编码，也没有缓存问题

后台在接收到数据之后，在返回数据的时候可以使用json的格式进行返回（例如：echo json_encode($arr);)

注意： 后端返回的responseText总是字符串格式，直接使用属性方法是不能获取到数据的，我们需要对响应的数据进行格式转换。
方法有两种，如果后端返回的是json格式的，那么XMLHttpRequest接收的时候回转换成字符串形式的，
我们可以使用JSON.parse(str) 和 eval("("+str+")")进行转换成json对象的形式，这样一来我们就可以使用for/in对数据进行迭代处理。可以动态更新页面数据

// 此处回提示undefined，因为是字符串形式的数据
console.log(xhr.responseText.username);
// 转换方式一
var reponseData = JSON.parse(xhr.responseText);
// 抓换方式二
var reponseData = eval("("+xhr.responseText+")");

参考文献：
MDN-Web-DOCS-XMLHttpRequest
W3C.ORG-XMLHttpRequest