Ajax (前端必看之AJAX功能原理详解)

AJAX（Asynchronous JavaScript and XML）是一种在无需刷新网页的情况下，与服务器交换数据的技术。它可以更新网页的部分内容，而不重新加载整个页面。

AJAX的功能原理如下：

1. 创建一个XMLHttpRequest对象。
2. 设置请求的URL，方法（GET或POST）及其他自定义的HTTP头部。
3. 发送请求。
4. 接收响应数据。
5. 使用JavaScript更新页面内容。

以下是一个简单的AJAX示例，展示了如何发送GET请求：

// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 设置请求的URL与请求方法
xhr.open('GET', 'your-api-endpoint', true);
 
// 发送请求
xhr.send();
 
// 监听请求状态变化
xhr.onreadystatechange = function() {
    // 请求完成并且响应状态码为200
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理服务器响应的数据
        var response = xhr.responseText;
        // 更新页面内容
        document.getElementById('content').innerHTML = response;
    }
};

在这个示例中，我们首先创建了一个XMLHttpRequest对象，然后设置了请求的URL和方法。我们监听了onreadystatechange事件，当请求完成并且服务器响应正常时，我们通过responseText获取响应内容，并更新了页面中ID为content的元素的内容。