ajax深入浅出怎样实现异步请求

《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()方法发送请求。

当用户点击“发送请求”按钮时，浏览器会发起一个异步请求，并在请求完成后执行相应的回调函数。这样，我们就可以在不刷新整个页面的情况下，实现与服务器的数据交互。

最新问答

相关标签