当前位置：首页 > article >正文

什么是Ajax

article 2025/2/21 23:58:03

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分页面内容。AJAX 的核心是通过 JavaScript 发送 HTTP 请求，并在后台与服务器通信，然后根据服务器的响应动态更新页面。

AJAX 的工作原理

创建 XMLHttpRequest 对象：通过 JavaScript 创建一个 XMLHttpRequest 对象（现代浏览器也支持 fetch API）。
发送请求：使用该对象向服务器发送请求。
接收响应：服务器处理请求并返回数据（通常是 JSON 或 XML 格式）。
更新页面：JavaScript 解析服务器返回的数据，并动态更新网页内容。

简单的 AJAX 代码示例

以下是一个使用 XMLHttpRequest 对象的简单 AJAX 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AJAX 示例</title>
</head>
<body>
    <h1>AJAX 示例</h1>
    <button id="loadData">加载数据</button>
    <div id="content"></div>

    <script>
        document.getElementById('loadData').addEventListener('click', function() {
            // 1. 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 2. 配置请求
            xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);

            // 3. 设置回调函数，处理响应
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 请求成功，解析响应数据
                    var data = JSON.parse(xhr.responseText);
                    document.getElementById('content').innerHTML = `
                        <h2>${data.title}</h2>
                        <p>${data.body}</p>
                    `;
                } else {
                    // 请求失败
                    console.error('请求失败:', xhr.statusText);
                }
            };

            // 4. 发送请求
            xhr.send();
        });
    </script>
</body>
</html>

代码解释

创建 XMLHttpRequest 对象：var xhr = new XMLHttpRequest();
配置请求：xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
- GET：请求方法。
- 'https://jsonplaceholder.typicode.com/posts/1'：请求的 URL。
- true：表示异步请求。
设置回调函数：xhr.onload 用于处理服务器响应。
- 如果请求成功（状态码 200-299），解析响应数据并更新页面内容。
- 如果请求失败，输出错误信息。
发送请求：xhr.send();

使用 `fetch` API 的示例

现代 JavaScript 推荐使用 fetch API，它更简洁且支持 Promise：

document.getElementById('loadData').addEventListener('click', function() {
    fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => {
            if (!response.ok) {
                throw new Error('请求失败');
            }
            return response.json();
        })
        .then(data => {
            document.getElementById('content').innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        })
        .catch(error => {
            console.error('错误:', error);
        });
});