前端学习笔记-AJAX

首字母略缩词AJAX，全名Asynchronous Javascript And XML
卖点当然是第一个词：Asynchronous，即异步；
而最后一个词是XML，当然要谈到XMLHttpRequest这个对象，是发起AJAX的核心；

MDN：通过交互式网站和现代 Web 标准，AJAX正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代。

流程5点

先参考一下 HTTP 请求：

1. 设置目标网址、请求方法(get/post)。
2. 提交请求的数据、请求主体。
3. 接收响应回来的内容。

发送 Ajax 请求的5点：

1. 创建xhr对象，即 new 一个 XMLHttpRequest()；
2. 调用open(method, url, async=true)设置请求参数：请求方法、目标url、是否异步。async默认 true。
3. 调用send()发送请求：
4. 定义事件回调：onreadystatechange = callback()，状态改变时就会调用。
5. 服务端响应，在回调函数中获取返回的数据。

看看一般情况下GET的代码即可，正好5步骤对应5行

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api', true);
xhr.send(null);
xhr.onreadystatechange = function () { 
	/* 可拿到xhr.responseText 或 xhr.responseXML*/
};

如果使用POST方法，就需要在send之前调用 xhr对象的 setRequestHeader() 来添加header。然后给 send()传入要发送的数据：

xhr.open('POST', '/api', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=LXY&son=MR');

xhr.readyState，表达的是request的状态：

从0~4共有5个：

值	state	状态	助记
0	unsent	未初始化	open()没被调用，请求还未初始化
1	opened	正在加载	open()被调用，已建立服务器链接
2	headers_received	加载成功	send()被调用，请求已接受
3	loading	交互	正在处理请求，下载中
4	done	完成	请求已完成 并且响应已准备好

直接看示例代码：

var xhr = new XMLHttpRequest();
console.log('UNSENT', xhr.readyState); // readyState will be 0

xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState); // readyState will be 1

xhr.onprogress = function () {
    console.log('LOADING', xhr.readyState); // readyState will be 3
};

xhr.onload = function () {
    console.log('DONE', xhr.readyState); // readyState will be 4
};

xhr.send(null);

呃，看起来很难在状态2 也就是headers_received的瞬间做什么事情……

但这段代码提醒我们，还有两个事件可以注册回调：onprogress和onload ，顾名思义吧。

xhr.status，表达的是response的状态

它的默认值取0 (完成前 或 出错后)，正常情况返回的是HTTP status codes (比如200、404那些)。

综上，当 readyState 等于 4 且状态码为 200 时，可判断请求响应的过程成功结束。

两个属性各自表示不同的状态，不要弄混，示例代码：

xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log('收到：' + JSON.stringify(xhr.responseText));
        // 后续操作：document.querySelector('h1').innerHTML = xhr.responseText;
    }
};

封装

function myAjax(url, callback, failback) {
    // 1、创建XHR对象 new
    const xhr = new XMLHttpRequest();
    // 2、发送请求 open & send
    xhr.open('GET', url, true);
    xhr.send();
    // 3、服务端响应 readyState & status 
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const obj = JSON.parse(xhr.responseText);
            console.log('返回数据：', obj);
            callback && callback(xhr.responseText);
        } else {
            failback && failback(new Error('请求失败'));
        }
    };
}

// 单次调用
myAjax('a.json', (res) => { console.log(res); });

// 多次调用，给大家表演一个回调地狱
myAjax('a.json', (resA) => {
    console.log(resA);
    myAjax('b.json', (resB) => {
        console.log(resB);
        myAjax('c.json', (resC) => {
            console.log(resC);
        });
    });
});