javascript ajax的5种状态介绍

下面来详细讲解“JavaScript Ajax的5种状态介绍”的完整攻略。

什么是Ajax

Ajax，全称Asynchronous JavaScript and XML，是指一种创建交互式，动态的Web应用程序的Web开发技术。它使得Web页面和服务器之间异步通信变得更加轻松和高效。

在Web中，Ajax最常用的场景是使用JavaScript进行异步请求并更新页面内容。通过Ajax，编写者可以在其Web应用程序中使用JavaScript请求服务器端资源，而无需刷新整个页面。

在使用JavaScript执行Ajax请求时，您将遇到五个可能的不同请求状态。随着进展，您将需要了解每个请求状态，并在相应状态代码中编写您的JavaScript代码以实现它们。

五种Ajax请求状态

1. 0（请求未初始化）：代表已创建XMLHttpRequest对象，但未调用open()方法。

2. 1（服务器连接已建立）：代表正在通过open()方法建立与Web服务器的链接。

示例代码：

javascript
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // 调用open()方法建立连接
console.log(xhr.readyState); // 输出 1
xhr.send(); // 发送请求

在上面的代码中，首先创建了一个XMLHttpRequest对象，然后调用了open()方法建立了与Web服务器的连接，此时XMLHttpRequest对象的readyState属性的值为1。

1. 2（请求已接收）：代表已通过send()方法向Web服务器发送请求，并且已经收到了Web服务器的响应。

示例代码：

javascript
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // 调用open()方法建立连接
xhr.send(); // 发送请求
console.log(xhr.readyState); // 输出 2

在上面的代码中，首先创建了一个XMLHttpRequest对象，并调用了open()方法建立了与Web服务器的连接，紧接着又调用了send()方法向Web服务器发送请求，此时XMLHttpRequest对象的readyState属性的值为2。

1. 3（请求处理中）：代表正在处理Web服务器的响应数据。

示例代码：

javascript
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.onreadystatechange = function() {
console.log(xhr.readyState); // 输出 3
}
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // 调用open()方法建立连接
xhr.send(); // 发送请求

在上面的代码中，我们在XMLHttpRequest对象的onreadystatechange事件中监听了readyState属性的变化，当readyState属性变为3时，输出值为3。

1. 4（请求已完成）：代表XMLHttpRequest实例已经准备就绪，且响应已经完全接收。

示例代码：

javascript
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.onreadystatechange = function() {
console.log(xhr.readyState); // 输出 4
console.log(xhr.responseText); // 输出响应内容（字符串形式）
}
xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // 调用open()方法建立连接
xhr.send(); // 发送请求

在上面的代码中，我们在XMLHttpRequest对象的onreadystatechange事件中监听了readyState属性的变化，当readyState属性变为4时，输出值为4，并输出响应的内容。

总之，了解这5种状态以及在请求过程的不同点是非常重要的。它们将帮助您编写更准确的JavaScript代码，并确保您的Web应用程序保持高效和流畅，为您的用户提供更好的体验。