AJAX四条语句的详细分析(精华版)

AJAX四条语句的详细分析

ajax只有四条语句,很简单，这话没错，如果是一个没有学习过的人，还真觉得就是那么回事。但是认真分析过后，就会发现这里面的东西越来越多。

ajax简单的四句

var xhr=new XMLHttpRequest();  //new ajax对象
xhr.addEventListener("load",loadHandler); //实例侦听事件   
xhr.open("POST","http://localhost:4006");   //发送方式    地址
xhr.send('{"user":"morty","age":18}');      //发送的数据    
//GET发送方式,就不多说了

ajax 具体分析

1. var xhr=new XMLHttpRequest(); 主要是兼容写法

var xhr
try{
    xhr=new XMLHttpRequest();
}catch(error){
    xhr=new ActiveXObject("Microsoft.XMLHTTP"); //IE7
}

2. xhr.open("POST","http://localhost:4006"); // 5个参数 发送方式 地址 async(同步异步) user password

 默认是true，异步。如果设置false，是同步,向服务器发送请求后开始等待,知道服务器返回消息后,才开始执行下面的代码,所以我们一般不会设置为同步
 user  password  访问地址的用户名密码

3.xhr.send() //6种数据类型: 不发送 ArrayBuffer(二进制数据流) Blob(二进制大对象) Document(文档对象) DOMString(文本数据) FormData(表单数据)

Blob类型的发送

js代码

var file = document.querySelector('input');
var bn = document.querySelector("button");
bn.addEventListener("click", clickHandler)

function clickHandler(e) {
    sendFiles(file.files); //file.files是选中的文件  file的类型是Blob,可以直接发送给服务器
}

async function sendFiles(list) {

    for (var i = 0; i < list.length; i++) {
        await sendFile(list[i]).then(function (res) {
            console.log(res);
        })
    }
}

function sendFile(file) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
            resolve(xhr.response)
        }
        xhr.open("POST", "http://localhost:4006");
        xhr.send(file);
    })
};

html页面

<input type="file" multiple>
<button>发送</button>

FormData表单的发送

js代码

var form = document.querySelector("form");
form.addEventListener("submit", submitHandler);

function submitHandler(e) {
    e.preventDefault();  //阻止表单的默认提交,让其通过ajax来发送
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", loadHandler);
    xhr.open("POST", "http://localhost:4006");
    xhr.send(new FormData(form));  //直接把表单全部放到FormData中,会把整个表单内容发送出去
}

function loadHandler(e) {

}

html页面

<form>
        <input type="text" name="user">
        <input type="text" name="password">
        <button type="submit">提交</button>
    </form>

4.xhr.addEventListener("load",loadHandler); ajax的侦听事件

1）timeout 超时事件   超时重发,也就是断线重连(3次) 超过3次,终止加载    

var time = 0;
function ajax() {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("load", loadHandler);
    xhr.addEventListener("timeout", timeoutHandler);
    xhr.open("GET", "http://localhost:4006?user=xietian&age=30");
    xhr.timeout = 2000;   //要注意设置超时的位置  在open之后，send之前
    xhr.send();
}

function loadHandler(e) {

}

function timeoutHandler(e) {
    if (time < 3) ajax();
    else this.abort();//中止加载
}
2)abort()   当一个资源的加载已中止时，将触发 abort事件  例如:上面的三次重连后,终止加载,触发abort方法,来停止加载
3)loadstart 开始加载事件         当程序开始加载时，loadstart 事件将被触发
4)Progress  进度事件            会被触发用来指示一个操作正在进行中   Progress属性:loaded  当前加载字节      total  总字节
5)loadend   加载进度停止事件     当一个资源加载进度停止时，触发loadend事件
6)load      加载完成事件         当一个资源及其依赖资源已完成加载时，将触发load事件
7)error     加载错误事件         当一个资源加载失败时会触发error事件
8)readystatechange   加载事件    当一个文档的 readyState 属性发生更改时
readyState:0 代理开始  1  2  3  4   下载结束     数据每次改变,都会触发此事件,直接下载结束
status:响应消息的状态
信息  100-101
成功  200-206
重定向  300-307
客户端错误 400-417
服务器错误  500-505

关于侦听事件的理解:load事件是所有的下载结束后,触发,但是想要侦听过程,还要其他事件来配合使用，所以我们经常用readystatechange来侦听事件

var xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", readyHandler);
xhr.open("GET", "http://localhost:4006?user=xietian&age=30");
xhr.send();

function readyHandler(e) {
    if (xhr.readyState === 4 && xhr.status === 200) {   //通过这个判断可以侦听到访问的过程
        console.log(xhr.response);
    }
}