ajax的回调函数（ajax回调函数 bug）

## AJAX 的回调函数### 简介AJAX（Asynchronous JavaScript And XML，异步 JavaScript 和 XML）是一种用于创建快速动态网页的技术，它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分内容。回调函数在 AJAX 中扮演着至关重要的角色，它允许我们在 AJAX 请求完成后执行特定的 JavaScript 代码。### 回调函数的作用在 AJAX 中，我们使用 `XMLHttpRequest` 对象向服务器发送异步请求。异步意味着 JavaScript 代码不会阻塞等待服务器响应，而是继续执行后续代码。当服务器响应就绪时，我们需要一种机制来处理响应数据，这就是回调函数的用武之地。回调函数是一个作为参数传递给另一个函数的函数，并在其所传递到的函数执行完成后被调用。在 AJAX 中，我们将回调函数传递给 `XMLHttpRequest` 对象的 `onreadystatechange` 属性或使用更现代的 `Promise` 对象。### 使用 `onreadystatechange` 属性以下是如何使用 `onreadystatechange` 属性处理 AJAX 响应的示例：```javascript function makeRequest(url) {const xhr = new XMLHttpRequest();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {// 处理响应数据console.log(xhr.responseText);}};xhr.open("GET", url);xhr.send(); } ```在这个例子中：

我们创建了一个新的 `XMLHttpRequest` 对象。

我们将一个匿名函数分配给 `onreadystatechange` 属性，这个函数就是我们的回调函数。

在回调函数内部，我们检查 `readyState` 属性是否等于 4（请求已完成）以及 `status` 属性是否等于 200（请求成功）。

如果两个条件都满足，我们就可以访问 `responseText` 属性来获取服务器响应的数据。### 使用 `Promise` 对象`Promise` 对象提供了一种更现代、更简洁的方式来处理 AJAX 请求。以下是如何使用 `Promise` 对象处理 AJAX 响应的示例：```javascript function makeRequest(url) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open("GET", url);xhr.onload = () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(xhr.responseText);} else {reject(xhr.statusText);}};xhr.onerror = () => reject(xhr.statusText);xhr.send();}); }makeRequest('https://example.com/api/data').then(data => console.log(data)).catch(error => console.error(error)); ```在这个例子中：

我们创建了一个新的 `Promise` 对象。

在 `Promise` 构造函数中，我们执行 AJAX 请求。

如果请求成功，我们调用 `resolve` 函数并将响应数据传递给它。

如果请求失败，我们调用 `reject` 函数并将错误信息传递给它。

通过 `then` 方法处理成功响应，`catch` 方法处理失败响应。### 总结回调函数是 AJAX 中不可或缺的一部分，它允许我们在服务器响应就绪时执行特定的代码。无论是使用传统的 `onreadystatechange` 属性还是更现代的 `Promise` 对象，理解回调函数的工作原理对于编写高效的 AJAX 应用至关重要。