Ajax 代码如何异步获取 html 数据

Ajax代码可以通过发送异步HTTP（Ajax）请求，从服务器获取HTML数据而不需要重新加载整个页面。这项技术广泛应用于实现页面的动态内容更新。通过使用XMLHttpRequest对象或jQuery中的$.ajax方法、配置请求的URL以及请求完成后的回调函数，开发者可以方便地实现此功能。而在这之中，通过使用XMLHttpRequest对象发送请求是最核心的一环。

一、使用`XMLHttpRequest`对象获取HTML数据

XMLHttpRequest是Ajax请求的基石。开发者通过创建XMLHttpRequest对象，可以发送请求到服务器，并处理返回的数据。首先，需要创建一个XMLHttpRequest对象实例，然后配置请求参数，包括请求的URL、请求方式等。当配置完成后，可以通过调用send方法向服务器发送请求。

创建和配置`XMLHttpRequest`对象

创建XMLHttpRequest对象通常是第一步。这个过程非常直接，只需使用new关键字实例化一个XMLHttpRequest对象即可。配置主要包括设置请求方法（GET、POST等）、请求的URL以及是否异步执行（对于Ajax请求，这里应该设置为true）。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/your-url.html', true);

发送请求并处理响应

在发送请求之前，还需要设置一个回调函数，用于处理服务器返回的数据。这是通过监听XMLHttpRequest对象的onreadystatechange事件实现的。当请求的状态变化时，会触发这个事件。特别地，当请求完成且响应就绪时（通常状态码为200且readyState为4），可以处理返回的HTML数据。

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 处理返回的HTML数据
        document.getElementById("your-element").innerHTML = xhr.responseText;
    }
};
xhr.send();

二、使用jQuery中的`$.ajax`方法

对于不熟悉原生JavaScript的开发者来说，jQuery提供了一个更简洁的方式来实现Ajax请求——$.ajax方法。这个方法封装了XMLHttpRequest的功能，并提供了更易于使用的API接口。

配置和发送Ajax请求

使用$.ajax方法时，可以通过一个参数对象来配置请求的细节，包括类型、URL、成功回调等。与使用XMLHttpRequest相比，jQuery使代码变得更加简洁和易于理解。

$.ajax({
    type: 'GET',
    url: '/your-url.html',
    success: function(data) {
        // 处理返回的HTML数据
        $("#your-element").html(data);
    }
});

错误处理

在实际开发中，处理请求可能遇到的错误也是很重要的一环。$.ajax提供了error回调函数，用于处理请求失败的情况。通过使用这个回调，开发者可以更好地控制程序的流程，比如显示错误消息给用户。

$.ajax({
    type: 'GET',
    url: '/your-url.html',
    success: function(data) {
        // 成功处理返回的数据
        $("#your-element").html(data);
    },
    error: function(xhr, status, error) {
        // 处理错误
        console.error("An error occurred: " + error);
    }
});