原生AJAX（包括Fetch）

AJAX即“Asynchronous Javascript And XML”

一、Ajax的原生初级

1.1 Ajax对象创建：var xhr= new XMLHttpRequest();

1.2 请求首行：xhr.open('post/get', 'url',true/false);   第三个参数为是否异步，默认是异步（true）

1.3 数据发送：xhr.send(data);  如为get请求发送null

1.4 设置请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");   如果send内容为urlencoded格式（“a=1&b=2”），请参照该样式设置。

1.5 检查是否请求完毕：readyState属性

　　只要readyState 触发就会触发readystatechange事件！

　　readyState有5个值：0~4，分别表示：未初始化、启动、发送、接受、完成。

xhr.onreadystatechange = function(){ 
    if (xhr.readyState == 4){ 
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){      //可以在完成后调用xhr.status，查看状态码
             alert(xhr.responseText); 　　　　　　　　　　　　　　　　　　　　　　　　 //xhr.responseText即是返回的数据
        } else { 
             alert("Request was unsuccessful: " + xhr.status); 
        } } }; 

1.6 初级示例

var xhr = XMLHttpRequest(); 
     xhr.onreadystatechange = function(){ 
         if (xhr.readyState == 4){ 
             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ 
                 alert(xhr.responseText); 
             } else { 
                 alert("Request was unsuccessful: " + xhr.status); 
             }  }  };   
     xhr.open("post/get", "url", true);    
     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
     xhr.send("a=1&b=2"); 

 

二、XMLHttpRequest 中级

2.1 formData:

var data = new FormData();
用法：data.append("key","value");
        data.append(document.forms[0]);
        data.append(inputdom);
或者直接
var data = new FormData(document.forms[0]);

最后：xhr.send(FormData对象);

　　FormData主要服务于表单上传：

　　如表单中存在文件上传，原生js中可以直接将文件放入FormData，无需任何特殊处理！

        var xhr = new XMLHttpRequest();
        xhr.open('post', 'url');
        // 设置请求头(get请求可以省略,post不发送数据也可以省略)
        // 如果使用的时 formData可以不写请求头写了无法正常上传文件
        //  xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.onload = function () {
            console.log(xhr.responseText);
        }
        // XHR2.0新增 上传进度监控
        xhr.upload.onprogress = function (event) {
            //  console.log(event);
            var percent = event.loaded / event.total * 100 + '%';
            console.log(percent);
        var data = new FormData(document.querySelector('form'));
        xhr.send(data);

文件上传示例