JavaScript 中的 AJAX(Asynchronous JavaScript and XML)执行顺序主要涉及到异步编程的概念。以下是对 AJAX 执行顺序及相关基础概念的详细解释:
XMLHttpRequest
对象与服务器进行通信。XMLHttpRequest
对象实例。var xhr = new XMLHttpRequest();
open()
方法配置请求类型(GET、POST 等)、URL 和是否异步。xhr.open('GET', 'example.php', true); // true 表示异步
onreadystatechange
事件设置回调函数,当请求状态改变时,该函数会被调用。xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 请求成功,处理响应数据
console.log(xhr.responseText);
}
};
send()
方法发送请求。xhr.send();
send()
方法也是同步执行的,但请求本身是异步的。onreadystatechange
回调函数会被调用。由于 AJAX 是异步的,回调函数的执行不会阻塞后续代码的执行。console.log('开始发送请求');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log('请求成功,响应数据:', xhr.responseText);
}
};
xhr.send();
console.log('请求已发送,继续执行后续代码');
function fetchData() {
return new Promise((resolve, reject) => {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
领取专属 10元无门槛券
手把手带您无忧上云