阅读量:0
《AJAX深入浅出》是一本关于AJAX编程的经典教材。在这本书中，异步请求的实现主要依赖于JavaScript中的XMLHttpRequest对象。以下是一个简单的示例，展示了如何使用XMLHttpRequest对象实现异步请求：
- 创建一个HTML文件，如
ajax_example.html，并在其中添加以下内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AJAX 异步请求示例</title> <script src="ajax_example.js"></script> </head> <body> <button onclick="sendRequest()">发送请求</button> <div id="result"></div> </body> </html> 在这个示例中，我们创建了一个按钮，当点击该按钮时，会触发sendRequest函数。同时，我们还有一个<div>元素，用于显示请求的结果。
- 创建一个JavaScript文件，如
ajax_example.js，并在其中添加以下内容：
function sendRequest() { // 创建一个新的XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 设置请求的类型和URL xhr.open('GET', 'https://jsonplaceholder.typicode.com/todos/1', true); // 设置请求完成时的回调函数 xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 400) { // 请求成功，将返回的数据解析为JSON格式，并在页面上显示 var data = JSON.parse(xhr.responseText); document.getElementById('result').innerHTML = data.title; } else { // 请求失败，显示错误信息 document.getElementById('result').innerHTML = '请求失败，状态码：' + xhr.status; } }; // 设置请求错误时的回调函数 xhr.onerror = function() { document.getElementById('result').innerHTML = '请求出错'; }; // 发送请求 xhr.send(); } 在这个示例中，我们首先创建了一个新的XMLHttpRequest对象，然后设置了请求的类型（GET）、URL（https://jsonplaceholder.typicode.com/todos/1）以及是否异步（true）。接下来，我们设置了请求完成时的回调函数，用于处理返回的数据。如果请求成功，我们将返回的数据解析为JSON格式，并在页面上显示；如果请求失败，我们显示错误信息。最后，我们调用xhr.send()方法发送请求。
当用户点击“发送请求”按钮时，浏览器会发起一个异步请求，并在请求完成后执行相应的回调函数。这样，我们就可以在不刷新整个页面的情况下，实现与服务器的数据交互。
