前端知识——Ajax入门详解

最新推荐文章于 2025-06-14 20:41:11 发布

Pray4m1

最新推荐文章于 2025-06-14 20:41:11 发布

阅读量821

点赞数 12

CC 4.0 BY-SA版权

文章标签：前端 ajax javascript

本文链接：https://blog.csdn.net/2302_80480647/article/details/147929686

一.认识Ajax

AJAX (Async JavaScript and XML) 是一种用于创建快速动态网页的技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。

通俗来说Ajax就是一个用于交换前后端数据的工具，但是Ajax有着异步性的特点，这使得用户在使用浏览器时不会因为向后端发送请求而中断其他操作进程，同时在交换数据时只更新部分网页而不是刷新整个页面。

了解了ajax的定义后，我们需要了解它最大的特点异步性是什么意思。
异步请求：当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。一般默认值为true，异步。这一特点可以很大程度上提升用户的体验，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

二.AJAX的优势

用户体验更好：无刷新加载，响应更快。
减少带宽：只传输必要数据。
使用方便：不需要安装插件，原生js即可使用。

三.AJAX的使用

1.触发事件

用户操作（如点击按钮、输入内容、滚动页面等）触发 AJAX 请求：

document.getElementById("loadDataBtn").addEventListener("click", fetchData);

2.创造请求对象

使用 XMLHttpRequest（传统方式）或现代 fetch() API 创建 HTTP 请求：

方式 1：XMLHttpRequest（传统）

const xhr = new XMLHttpRequest();

方式 2：Fetch API（现代推荐）

fetch("https://api.example.com/data");

3.配置请求

设置请求方法（GET/POST/PUT/DELETE）、URL 和是否异步（通常为 true）：

xhr.open("GET", "https://api.example.com/data", true);

4.设置回调函数

定义请求成功、失败或完成时的处理逻辑：

XMLHttpRequest 方式

xhr.onload = function() {
  if (xhr.status === 200) {  // 请求成功（HTTP 200）
    const data = JSON.parse(xhr.responseText);
    updatePage(data);
  } else {
    console.error("请求失败:", xhr.status);
  }
};

Fetch API 方式（Promise 风格）

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) throw new Error("请求失败");
    return response.json();  // 解析 JSON
  })
  .then(data => updatePage(data))
  .catch(error => console.error("Error:", error));

5. 发送请求

XMLHttpRequest

fetch("https://api.example.com/data", {
  method: "POST",  // 可改为 GET/PUT/DELETE
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ key: "value" })  // POST 数据
});

Fetch API

fetch("https://api.example.com/data", {
  method: "POST",  // 可改为 GET/PUT/DELETE
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ key: "value" })  // POST 数据
});

6. 服务器处理请求

服务器（如 Node.js、PHP、Java 等）接收请求，处理数据，并返回响应（通常是 JSON/XML/HTML）：

// Node.js 示例（Express）
app.get("/data", (req, res) => {
  res.json({ message: "Hello AJAX!" });
});

7. 客户端处理响应

JavaScript 解析服务器返回的数据，并更新页面（不刷新）：

function updatePage(data) {
  document.getElementById("result").innerHTML = data.message;
}

8. 页面局部更新

DOM 被动态修改，用户看到新内容，但整个页面没有刷新：

<div id="result">Hello AJAX!</div>  <!-- 被 JS 更新 -->

完整 AJAX 示例（XMLHttpRequest）

<!DOCTYPE html>
<html>
<head>
    <title>AJAX with XMLHttpRequest</title>
    <script>
        function loadData() {
            // 1. 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 2. 配置请求
            xhr.open('GET', 'URL', true);
            
            // 3. 设置回调函数
            xhr.onload = function() {
                if (xhr.status >= 200 && xhr.status < 300) {
                    // 请求成功
                    var response = JSON.parse(xhr.responseText);
                    document.getElementById('result').innerHTML = 
                        '<h3>' + response.title + '</h3>' + 
                        '<p>' + response.body + '</p>';
                } else {
                    // 请求失败
                    document.getElementById('result').innerHTML = 
                        '请求失败，状态码: ' + xhr.status;
                }
            };
            
            // 4. 错误处理
            xhr.onerror = function() {
                document.getElementById('result').innerHTML = '请求出错';
            };
            
            // 5. 发送请求
            xhr.send();
        }
    </script>
</head>
<body>
    <h1>AJAX XMLHttpRequest 示例</h1>
    <button onclick="loadData()">加载数据</button>
    <div id="result" style="margin-top:20px; padding:10px; border:1px solid #ccc;"></div>
</body>
</html>

完整 AJAX 示例（Fetch API）

// 1. 用户点击按钮触发
document.getElementById("loadDataBtn").addEventListener("click", () => {
  // 2. 使用 Fetch 发送请求
  fetch("URL")
    .then(response => response.json())  // 3. 解析 JSON
    .then(data => {
      // 4. 更新页面
      document.getElementById("result").textContent = data.message;
    })
    .catch(error => console.error("Error:", error));
});