长沙住房和城乡建设部网站安徽建设工程信息网官网优秀中项网
什么是 AJAX？
AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分页面内容。AJAX 的核心是通过 JavaScript 发送 HTTP 请求，并在后台与服务器通信，然后根据服务器的响应动态更新页面。
AJAX 的工作原理
- 创建 XMLHttpRequest 对象：通过 JavaScript 创建一个
XMLHttpRequest对象（现代浏览器也支持fetchAPI）。 - 发送请求：使用该对象向服务器发送请求。
- 接收响应：服务器处理请求并返回数据（通常是 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);});
});
总结
AJAX 允许网页在不重新加载的情况下与服务器通信，提升用户体验。通过 XMLHttpRequest 或 fetch API，可以轻松实现异步数据请求和页面更新。