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

《AJAX深入浅出》是一本关于AJAX编程的经典教材。在这本书中，异步请求的实现主要依赖于JavaScript中的XMLHttpRequest对象。以下是一个简单的示例，展示了如何使用XMLHttpRequest对象实现异步请求：

1. 创建一个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> 元素，用于显示请求的结果。

1. 创建一个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()方法发送请求。

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！