什么是Ajax
- 电脑硬件
- 2025-08-29 14:18:01
什么是 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', ' jsonplaceholder.typicode /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', ' jsonplaceholder.typicode /posts/1', true); GET：请求方法。' jsonplaceholder.typicode /posts/1'：请求的 URL。true：表示异步请求。 设置回调函数：xhr.onload 用于处理服务器响应。 如果请求成功（状态码 200-299），解析响应数据并更新页面内容。如果请求失败，输出错误信息。 发送请求：xhr.send(); 使用 fetch API 的示例现代 JavaScript 推荐使用 fetch API，它更简洁且支持 Promise：
document.getElementById('loadData').addEventListener('click', function() { fetch(' jsonplaceholder.typicode /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); }); }); 总结AJAX 允许网页在不重新加载的情况下与服务器通信，提升用户体验。通过 XMLHttpRequest 或 fetch API，可以轻松实现异步数据请求和页面更新。
