首字母略缩词AJAX,全名Asynchronous Javascript And XML
卖点当然是第一个词:Asynchronous,即异步;
而最后一个词是XML,当然要谈到XMLHttpRequest这个对象,是发起AJAX的核心;
文章目录
- 流程5点
- xhr.readyState,表达的是request的状态:
- xhr.status,表达的是response的状态
- 封装
MDN:通过交互式网站和现代 Web 标准,AJAX正在逐渐被 JavaScript 框架中的函数和官方的 Fetch API 标准取代。
流程5点
先参考一下 HTTP 请求:
- 设置目标网址、请求方法(get/post)。
- 提交请求的数据、请求主体。
- 接收响应回来的内容。
发送 Ajax 请求的5点:
- 创建xhr对象,即
new
一个 XMLHttpRequest()
; - 调用
open(method, url, async=true)
设置请求参数:请求方法、目标url、是否异步。async默认 true。 - 调用
send()
发送请求: - 定义事件回调:
onreadystatechange = callback()
,状态改变时就会调用。 - 服务端响应,在回调函数中获取返回的数据。
看看一般情况下GET的代码即可,正好5步骤对应5行
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api', true);
xhr.send(null);
xhr.onreadystatechange = function () {
};
如果使用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);
xhr.open('GET', '/api', true);
console.log('OPENED', xhr.readyState);
xhr.onprogress = function () {
console.log('LOADING', xhr.readyState);
};
xhr.onload = function () {
console.log('DONE', xhr.readyState);
};
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));
}
};
封装
function myAjax(url, callback, failback) {
const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.send();
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);
});
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)