【AJAX】一篇带你了解AJAX相关基础知识点

OEC小胖胖

于 2024-09-17 07:00:00 发布

阅读量285

点赞数 10

分类专栏： AJAX 文章标签： ajax 前端 web javascript

本文链接：https://blog.csdn.net/2301_79858914/article/details/142305082

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX 是 Asynchronous JavaScript and XML 的缩写，代表的是一种在不刷新整个网页的情况下，通过 JavaScript 向服务器发送请求并接收响应的技术。它让网页可以动态更新内容而不需要重新加载页面，从而改善用户体验。

下面将从几个关键点来详细讲解 AJAX，包括：

什么是 AJAX？
AJAX 的工作原理
AJAX 的核心对象：XMLHttpRequest
常见的请求方式（GET/POST）
完整代码示例及解析
处理 JSON 数据
现代的替代方案（Fetch API 和 Axios）

1. 什么是 AJAX？

AJAX 是一种在浏览器中实现异步请求的技术，可以通过后台加载数据然后动态更新网页内容，而无需刷新整个页面。传统的网页应用在与服务器交互时，用户必须等待页面重新加载才能看到变化，而 AJAX 让用户在交互时可以立刻看到结果。

2. AJAX 的工作原理

AJAX 的核心思想是让浏览器能够异步地与服务器进行数据交换。基本工作流程如下：

用户在页面上进行某种操作（比如点击按钮）。
JavaScript 代码通过 XMLHttpRequest 对象发送 HTTP 请求给服务器。
服务器接收到请求后处理并返回相应的数据（比如 JSON 或 XML 格式）。
JavaScript 代码接收到服务器响应数据并更新网页的部分内容，而无需刷新整个页面。

3. AJAX 的核心对象：XMLHttpRequest

XMLHttpRequest 是 AJAX 的核心对象，用来在后台与服务器进行数据交换。创建并使用这个对象，可以实现发送 HTTP 请求并接收响应。

4. 常见的请求方式（GET/POST）

GET 请求：用于从服务器获取数据，参数直接附加在 URL 后面。
POST 请求：用于向服务器提交数据，参数放在请求体中。

5. 代码示例及解析

5.1 GET 请求的 AJAX 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX 示例 - GET 请求</title>
  <script>
    function loadData() {
      // 创建 XMLHttpRequest 对象
      var xhr = new XMLHttpRequest();

      // 设置请求方法和 URL，使用 GET 请求
      xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

      // 设置回调函数，当请求完成时会触发
      xhr.onload = function() {
        if (xhr.status === 200) { // 如果响应成功
          // 将响应文本插入到页面的元素中
          document.getElementById("data").innerHTML = xhr.responseText;
        } else {
          console.error("请求失败，状态码：" + xhr.status);
        }
      };

      // 发送请求
      xhr.send();
    }
  </script>
</head>
<body>
  <h1>AJAX 示例 - GET 请求</h1>
  <button onclick="loadData()">获取数据</button>
  <div id="data"></div>
</body>
</html>

5.2 代码解析

创建 XMLHttpRequest 对象：var xhr = new XMLHttpRequest(); 是创建 AJAX 请求的第一步。
打开请求：xhr.open("GET", "URL", true); 指定请求的类型（GET 或 POST）、请求的 URL 以及是否异步处理（true 表示异步）。
onload 回调函数：这是处理服务器响应的地方。当请求成功时（状态码 200），我们将数据插入到页面的 div 中。
发送请求：xhr.send(); 发送请求。

5.3 POST 请求的 AJAX 示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAX 示例 - POST 请求</title>
  <script>
    function sendData() {
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "https://jsonplaceholder.typicode.com/posts", true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");

      xhr.onload = function() {
        if (xhr.status === 201) { // 201 表示创建成功
          document.getElementById("data").innerHTML = "成功提交数据：" + xhr.responseText;
        } else {
          console.error("请求失败，状态码：" + xhr.status);
        }
      };

      // 发送 JSON 数据到服务器
      xhr.send(JSON.stringify({
        title: "foo",
        body: "bar",
        userId: 1
      }));
    }
  </script>
</head>
<body>
  <h1>AJAX 示例 - POST 请求</h1>
  <button onclick="sendData()">提交数据</button>
  <div id="data"></div>
</body>
</html>

5.4 代码解析

设置请求头：xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); 设置请求体的内容类型为 JSON。
发送 JSON 数据：xhr.send(JSON.stringify(...)) 将对象序列化为 JSON 格式并发送给服务器。

6. 处理 JSON 数据

在实际应用中，服务器返回的响应数据通常是 JSON 格式。我们可以使用 JSON.parse() 方法将响应的 JSON 数据转换为 JavaScript 对象，便于处理。

<script>
  function loadJSONData() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

    xhr.onload = function() {
      if (xhr.status === 200) {
        // 将 JSON 数据转换为对象
        var data = JSON.parse(xhr.responseText);
        document.getElementById("data").innerHTML = "标题：" + data.title + "<br>内容：" + data.body;
      }
    };

    xhr.send();
  }
</script>

7. 现代的替代方案（Fetch API 和 Axios）

7.1 Fetch API

Fetch API 是一个新的标准，提供了比 XMLHttpRequest 更简单的接口来发送异步请求。它使用 Promise 对象，使代码更加简洁。

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json()) // 将响应转换为 JSON
  .then(data => {
    console.log(data);
    document.getElementById("data").innerHTML = "标题：" + data.title + "<br>内容：" + data.body;
  })
  .catch(error => console.error("请求失败:", error));

7.2 Axios

Axios 是一个流行的 JavaScript 库，它封装了 XMLHttpRequest 并提供了更强大的功能。

axios.get("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => {
    document.getElementById("data").innerHTML = "标题：" + response.data.title + "<br>内容：" + response.data.body;
  })
  .catch(error => console.error("请求失败:", error));