探索高级AJAX技术：深入研究异步请求和响应处理
大家有关于JavaScript知识点不知道可以去
博客主页：阿猫的故乡
系列专栏：JavaScript专题栏
ajax专栏：ajax知识点
欢迎关注：点赞收藏✍️留言
目录
学习目标：
学习内容：
学习时间：
学习产出：
异步请求和响应概述
异步请求与同步请求的区别
XMLHttpRequest对象
发送异步请求和处理响应
Fetch API
异步请求的进一步处理
JSON数据的异步加载和解析
跨域请求
进一步的案例研究和实践
学习目标：
深入研究异步请求和响应处理
学习内容：
-
异步请求和响应概述
-
XMLHttpRequest对象
-
Fetch API
-
异步请求的进一步处理
-
JSON数据的异步加载和解析
-
跨域请求
-
进一步的案例研究和实践
学习时间：
提示：这里可以添加计划学习的时间
例如：
- 周一至周五晚上 7 点—晚上9点
- 周六上午 9 点-上午 11 点
- 周日下午 3 点-下午 6 点
学习产出：
异步请求和响应概述
AJAX（Asynchronous JavaScript and XML）是一种在Web应用程序中使用的技术，它通过使用JavaScript和XML（或JSON）来实现在后台与服务器进行异步通信，从而实现页面内容的局部更新，而不需要完全刷新整个页面。
AJAX的基本原理和工作流程如下：
-
前端页面向服务器发送异步请求：当用户在前端页面上执行某个操作（例如点击按钮），JavaScript代码会创建一个XMLHttpRequest对象，然后通过该对象向后端服务器发送异步请求。
-
后端服务器处理请求并返回结果：服务器收到请求后，会根据请求的内容进行相应的处理。服务器可以返回HTML、XML、JSON等格式的数据。
-
前端页面处理返回结果：当服务器返回结果时，JavaScript代码会通过回调函数处理返回的数据。根据返回的数据，前端页面可以动态更新部分页面内容，而不需要整个页面刷新。
-
更新页面内容：根据返回的数据，前端页面可以使用JavaScript代码来更新页面内容。这包括更新文本内容、显示隐藏元素、修改CSS样式等。
总体来说，AJAX的工作流程可以总结为以下几个步骤：前端发送请求、后端处理请求、后端返回结果、前端处理结果。通过这种方式，实现了异步通信和局部更新页面内容的效果，提升了用户体验和性能。
异步请求与同步请求的区别
异步请求和同步请求是AJAX中两种常见的请求方式，它们的主要区别在于请求和处理的方式以及对页面的影响。
异步请求：
- 异步请求是指在发送请求的同时，前端页面不会等待服务器的响应，而是可以继续执行其他操作。
- 异步请求通过使用回调函数处理返回的结果，不会阻塞其他代码的执行。
- 异步请求可以提高用户体验，因为页面不需要等待服务器响应就可以进行其他操作，例如用户可以继续浏览页面或者与页面进行交互。
- 异步请求通常使用XMLHttpRequest对象或者更现代化的Fetch API来实现。
同步请求：
- 同步请求是指在发送请求之后，前端页面会一直等待服务器的响应，期间无法进行其他操作。
- 同步请求会阻塞其后的代码执行，直到服务器响应返回或者超时。
- 同步请求可能会降低用户体验，因为页面在等待服务器响应时无法进行其他操作，体验会被中断。
- 同步请求通常使用XMLHttpRequest对象的open和send方法来实现。
在实际开发中，异步请求更为常见和推荐，因为它可以提高用户体验，允许页面进行其他操作而不被阻塞。同步请求仅在特定情况下使用，例如需要确保请求的顺序和依赖关系时。
XMLHttpRequest对象
XMLHttpRequest对象是AJAX的核心，它提供了在浏览器中与服务器进行异步数据交互的功能。
XMLHttpRequest对象具有以下一些常用的属性和方法：
属性：
- readyState: 表示请求的状态，其值变化的顺序为 0(未初始化) -> 1(打开) -> 2(发送) -> 3(接收) -> 4(完成)。
- status: 表示服务器响应的状态码，如200表示成功，404表示资源未找到。
- responseText: 作为字符串表示的响应内容。
- responseXML: 作为XML文档对象表示的响应内容。
- onreadystatechange: 当readyState属性发生变化时触发的事件。
方法：
- open(method, url, async): 创建一个新的请求，指定请求的方法（如GET或POST）、请求的URL和是否使用异步方式。
- send(data): 发送请求，如果是POST请求，可以通过data参数发送数据。
- setRequestHeader(header, value): 设置请求头，例如设置Content-Type。
- abort(): 取消当前的请求。
示例代码：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
通过以上代码，我们创建了一个XMLHttpRequest对象并发送了一个GET请求到指定的URL。在onreadystatechange事件中，我们检查了请求的状态并判断了响应的状态码，如果请求成功，我们打印出了响应内容。
XMLHttpRequest对象是AJAX的核心，它提供了在浏览器中与服务器进行异步数据交互的功能。
XMLHttpRequest对象具有以下一些常用的属性和方法：
属性：
- readyState: 表示请求的状态，其值变化的顺序为 0(未初始化) -> 1(打开) -> 2(发送) -> 3(接收) -> 4(完成)。
- status: 表示服务器响应的状态码，如200表示成功，404表示资源未找到。
- responseText: 作为字符串表示的响应内容。
- responseXML: 作为XML文档对象表示的响应内容。
- onreadystatechange: 当readyState属性发生变化时触发的事件。
方法：
- open(method, url, async): 创建一个新的请求，指定请求的方法（如GET或POST）、请求的URL和是否使用异步方式。
- send(data): 发送请求，如果是POST请求，可以通过data参数发送数据。
- setRequestHeader(header, value): 设置请求头，例如设置Content-Type。
- abort(): 取消当前的请求。
示例代码：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();
通过以上代码，我们创建了一个XMLHttpRequest对象并发送了一个GET请求到指定的URL。在onreadystatechange事件中，我们检查了请求的状态并判断了响应的状态码，如果请求成功，我们打印出了响应内容。
发送异步请求和处理响应
创建和初始化XMLHttpRequest对象的步骤如下：
-
创建XMLHttpRequest对象：使用
new XMLHttpRequest()创建一个新的XMLHttpRequest对象。 -
初始化请求：使用
open()方法来初始化请求。open()方法接受三个参数：请求的方法（GET, POST等），请求的URL和是否异步发送请求的布尔值。 -
设置请求头：如果需要设置请求头，可以使用
setRequestHeader()方法来设置。例如，如果需要发送JSON数据，可以设置请求头为'Content-Type', 'application/json'。 -
发送请求：使用
send()方法来发送请求。对于GET请求，可以将请求参数作为URL的一部分，在open()方法中将URL和请求参数连接起来；对于POST请求，可以将请求参数作为send()方法的参数。 -
处理响应：可以使用
onreadystatechange事件监听XMLHttpRequest对象的状态变化。当readyState状态为4（已完成）时，可以使用status属性来判断响应的状态码。如果状态码是200，表示请求成功，可以使用responseText或responseXML属性来获取响应的内容。
XMLHttpRequest对象的高级功能包括：
-
设置请求头：可以使用
setRequestHeader()方法来设置请求头。例如，可以设置请求头为'Content-Type', 'application/json'来发送JSON数据。 -
发送表单数据：可以使用
FormData对象来发送表单数据。可以将表单元素的值添加到FormData对象中，然后将FormData对象作为send()方法的参数进行发送。 -
监听进度：可以使用
onprogress事件监听上传或下载的进度。可以使用loaded属性获取已经传输的数据大小，使用total属性获取总共需要传输的数据大小，从而计算出传输的百分比。 -
取消请求：可以使用
abort()方法来取消请求。 -
超时处理：可以使用
timeout属性来设置超时时间，如果请求超过指定的时间还没有返回，可以触发超时事件。 -
设置凭证：可以使用
withCredentials属性将凭证（如cookie）发送给服务器，以进行身份验证或会话跟踪。 -
跨域请求：可以使用
Access-Control-Allow-Origin响应头来允许跨域请求，或使用CORS（跨源资源共享）来处理跨域请求。
总结来说，通过创建和初始化XMLHttpRequest对象，可以发送异步请求并在响应返回后进行处理。XMLHttpRequest对象还提供了一系列的高级功能，可以根据具体的需求进行使用。
Fetch API
Fetch API是一种用于发送和接收HTTP请求的现代浏览器API，它提供了一种更简洁、更强大的方式来处理网络请求。相比于传统的XMLHttpRequest对象，Fetch API更易于使用和理解。
Fetch API的特点包括：
-
Promise-based：Fetch API使用Promise来处理请求和响应，使得异步操作更加方便和可控。可以使用Promise的then()和catch()方法来处理请求成功和失败的情况。
-
简洁的API：Fetch API提供了一组简洁而灵活的方法来进行请求和处理响应。其中最常用的方法是fetch()，它接受一个URL作为参数并返回一个Promise对象。
-
支持流式数据：Fetch API支持流式数据传输，可以通过使用Response对象上的body属性来处理流式数据。
-
可以使用Headers对象来设置请求头和处理响应头。
-
支持跨域请求：Fetch API默认支持跨域请求，但在发送跨域请求时需要注意设置CORS（跨源资源共享）相关的选项。
使用Fetch API发送请求的基本步骤如下：
-
构建请求对象：使用Request对象来构建请求，可以通过传入URL和可选的配置选项来创建Request对象。
-
发送请求：使用fetch()方法来发送请求，fetch()方法返回一个Promise对象，可以使用then()方法来处理响应。
-
处理响应：在then()方法中，可以使用Response对象来处理响应。可以通过Response对象上的一系列方法和属性来获取响应的状态码、请求头、响应头和响应体等。
-
处理错误：使用catch()方法来处理请求错误，例如网络错误或请求被服务器拒绝等。
当使用Fetch API发送请求时，通常会遵循以下的代码结构：
fetch(url, options)
.then(response => {
// 处理响应
// 返回一个Promise对象
})
.catch(error => {
// 处理错误
});
在这个代码中，首先使用fetch()方法发送请求，它接受一个URL和可选的配置选项作为参数。fetch()方法返回一个Promise对象，允许我们使用then()和catch()方法来处理请求和响应。
在then()方法中，我们可以使用response对象来处理响应。Response对象提供了一系列的方法和属性，可以获取响应的状态码、请求头、响应头和响应体等。
fetch(url, options)
.then(response => {
if (response.ok) {
// 如果响应成功（状态码为200-299），则返回响应的JSON数据
return response.json();
} else {
// 如果响应失败，则抛出错误
throw new Error('请求失败');
}
})
.then(data => {
// 处理返回的JSON数据
})
.catch(error => {
// 处理请求错误
});
上面的代码演示了如何处理响应成功和失败的情况。如果响应成功（状态码为200-299），我们可以使用response.json()方法来解析响应的JSON数据。如果响应失败，则抛出一个错误。
在catch()方法中，我们可以处理请求错误，例如网络错误或请求被服务器拒绝等。
配置选项（options）是可选的，可以用来设置请求的方法、请求头、请求体和认证信息等。一些常见的选项包括：
- method：请求的方法，例如GET、POST等，默认为GET。
- headers：请求头，可以使用Headers对象或者一个普通对象来设置。
- body：请求体，可以是一个Blob、BufferSource、FormData、URLSearchParams或者一个普通对象。
- mode：请求的模式，例如cors、no-cors、same-origin等，默认为cors。
- credentials：请求发送时是否携带cookie等认证信息，默认为same-origin。
- cache：请求的缓存模式，例如default、no-store、reload等，默认为default。
以上是Fetch API的基本用法，通过使用fetch()方法和Response对象，我们可以轻松地发送请求和处理响应。
Fetch API的优点是它提供了更简洁、更强大的API来处理网络请求，并且与现代的异步操作方法（Promise）相结合，使代码更易于理解和维护。但也需要注意兼容性问题，因为Fetch API在一些旧版本的浏览器中不被支持。可以考虑使用polyfill或者库（如axios等）来处理兼容性问题。
异步请求的进一步处理
异步请求的进一步处理可以包括以下几个方面：
-
错误处理：处理请求过程中可能出现的错误，例如网络连接错误、服务器返回错误等。可以通过添加错误处理函数或使用try-catch语句来捕获并处理错误。
-
超时处理：如果请求处理时间过长，可以设置一个超时时间，如果请求在超时时间内没有返回结果，则可以进行相应的处理操作，例如重新发送请求、提示用户等。
-
进度跟踪：如果请求过程较长，可以通过回调函数或事件来跟踪请求的进度，以便在需要时更新用户界面或显示进度条等。
-
数据处理：根据返回的数据类型，可以进行相应的数据处理操作，例如解析JSON数据、提取关键信息等。
-
缓存处理：如果请求的数据可以缓存，可以在请求返回后将数据存储在本地缓存中，以便下次使用。
-
并发处理：如果有多个异步请求需要处理，可以使用Promise.all、async/await等方式进行并发处理，并等待所有请求都完成后再进行下一步操作。
-
销毁处理：如果某个异步请求不再需要，可以取消该请求，释放资源。
当使用异步请求时，可以使用一些进一步的处理方式来处理请求和响应。下面是一些常见的处理方式以及相关的代码解释：
- 错误处理：
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('请求错误');
}
return response.json();
})
.catch(error => {
console.error(error);
// 错误处理代码
});
在fetch请求的链式调用中，可以通过检查response.ok属性来判断响应是否成功。如果响应不成功，则可以通过throw关键字抛出一个错误。在链式调用中，可以使用.catch方法捕获并处理错误。
- 超时处理：
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => reject(new Error('请求超时')), 5000);
});
Promise.race([fetch(url), timeoutPromise])
.then(response => {
// 请求完成处理代码
})
.catch(error => {
console.error(error);
// 错误处理代码
});
在上述代码中，通过创建一个Promise来模拟超时处理。使用Promise.race方法，将fetch请求和超时Promise传入，只要其中一个完成或拒绝，就会执行相应的处理代码。
- 进度跟踪：
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json'
},
signal: controller.signal
})
.then(response => {
// 正常处理代码
})
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求被中止');
// 中止处理代码
} else {
console.error(error);
// 错误处理代码
}
});
const controller = new AbortController();
const signal = controller.signal;
// 中止请求
controller.abort();
在上述代码中，可以使用AbortController和AbortSignal来中止请求。通过传递signal给fetch的options对象中的signal属性，可以中止该请求。
- 数据处理：
fetch(url)
.then(response => response.json())
.then(data => {
// 数据处理代码
})
.catch(error => {
console.error(error);
// 错误处理代码
});
在上述代码中，使用response.json()方法来将响应数据解析为JSON格式。通过then方法处理解析后的数据。
这些是一些常见的异步请求进一步处理方式和代码解释，可以根据实际需求进行相应的处理操作。
总之，进一步处理异步请求需要根据具体情况来确定，以上提到的是一些常见的处理方式。
JSON数据的异步加载和解析
当需要异步加载和解析JSON数据时，可以使用Fetch API来发送异步请求，并通过Promise链式调用来处理响应数据。以下是一个示例的代码解释和注释：
fetch('http://example.com/api/data.json') // 发送异步请求获取JSON数据
.then(response => response.json()) // 将响应数据解析为JSON格式
.then(data => {
// 在这里处理解析后的JSON数据
// 可以访问和操作data对象
console.log(data);
})
.catch(error => {
console.error(error);
// 错误处理代码
});
这段代码使用了fetch函数来发送异步请求，其中传入的参数为JSON数据的URL。fetch返回一个Promise，可以使用.then()方法在响应成功时处理数据，使用.catch()方法处理错误。
在处理成功的响应时，通过调用response.json()方法将响应数据解析为JSON格式。这也返回一个Promise，可以在后续的.then()方法中访问和操作解析后的JSON数据。
在示例代码中，解析后的数据存储在data变量中，并通过console.log()函数打印在控制台上。你可以根据具体的需求来进一步处理数据，如显示在网页上或进行其他操作。
如果发生错误，如网络问题或解析错误，可以通过.catch()方法捕获错误并进行相应的处理。
这段代码展示了一个基本的异步加载和解析JSON数据的过程，你可以根据实际需求进行相应的修改和扩展。
跨域请求
跨域请求是指通过JavaScript代码发送的请求，目标URL的域与当前页面所在的域不同。由于浏览器的同源策略限制，这种请求通常是不被允许的。然而，可以通过CORS（跨源资源共享）机制来实现跨域请求。下面是一个使用Fetch API发送跨域请求的代码解释和注释：
fetch('http://api.example.com/data', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*' // 允许跨域请求的来源
}
})
.then(response => response.json())
.then(data => {
// 处理响应数据
console.log(data);
})
.catch(error => {
console.error(error);
// 错误处理代码
});
这段代码使用fetch函数发送一个GET请求到"http://api.example.com/data"，这个URL与当前页面的域不同，因此是一个跨域请求。
在fetch函数的第二个参数中，我们可以设置请求的headers。在这个例子中，我们设置了'Content-Type'为'application/json'，并添加了'Access-Control-Allow-Origin'头部字段，其值为'*'，表示允许来自任意域的跨域请求。
在成功的响应中，使用response.json()方法将响应数据解析为JSON格式，并在.then()方法中处理解析后的数据。
如果发生错误，可以通过.catch()方法捕获错误并进行相应的处理。
需要注意的是，跨域请求需要服务器端进行相应的配置，以允许跨域请求的来源。在这个例子中，服务器需要设置允许任意域的跨域请求。具体的服务器配置可能因服务器软件和配置方式而有所不同。
这段代码展示了一个简单的跨域请求的过程，你可以根据实际情况对其进行修改和扩展。
进一步的案例研究和实践
下面是使用ES6语法解释的进一步案例研究和实践代码：
场景：假设我们的应用需要从一个API中获取用户的个人信息，并在页面上展示这些信息。
代码解释：
// 从另一个域的API获取用户信息
fetch('http://api.example.com/userinfo', {
method: 'GET',
credentials: 'include', // 发送跨域请求包含凭证信息（如cookies）
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*' // 允许跨域请求的来源
}
})
.then(response => response.json())
.then(data => {
// 处理响应数据
displayUserInfo(data);
})
.catch(error => {
console.error(error);
// 错误处理代码
});
// 在页面上展示用户信息
const displayUserInfo = (user) => {
// 创建DOM元素来展示用户信息
const userContainer = document.createElement('div');
userContainer.innerHTML = `
${user.name}
Email: ${user.email}
Age: ${user.age}
`;
// 将用户信息添加到页面上
document.body.appendChild(userContainer);
};
在这个示例中，我们使用了箭头函数来定义处理响应数据的displayUserInfo函数。箭头函数提供了更简洁和可读性更强的代码风格。
另外，在fetch请求的头部中，我们使用了对象的简写语法。这意味着我们可以直接使用键名来定义属性，而无需显式地指定键和值。
同时，我们还使用了模板字符串来创建DOM元素的innerHTML，以更方便地插入用户信息。
这些都是ES6语法中的一些特性，它们可以使代码更简洁、易读和易于维护。然而，需要注意的是，这些特性可能需要在支持ES6的环境中运行，或者通过工具（如Babel）进行转换，以使代码在旧版JavaScript环境中运行。