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 () {
/* 可拿到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);
});
});
});
————————————————
版权声明:本文为CSDN博主「科粒」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/melxy1997/article/details/119141945
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。