AJAX

Last updated: ... / Reads: 42 Edit

AJAX（Asynchronous JavaScript and XML）是一种用于在不重新加载整个页面的情况下，通过后台异步加载数据的技术。它使用 JavaScript、XML（现在通常使用 JSON）和异步请求来实现在页面上动态更新内容的目的。通过 AJAX，可以在用户与页面交互的同时，向服务器请求新的数据并将其集成到页面上，而无需刷新整个页面。

AJAX 的主要目标是提高用户体验，加快页面加载速度，减少不必要的页面刷新，以及在后台异步获取和发送数据。这种技术使得网页可以更加动态和交互，并且更具响应性。

入门案例：

以下是一个简单的基本示例，演示如何使用 XMLHttpRequest 对象进行简单的HTTP请求。在这个例子中，我们将使用一个简单的API，该API返回一些文本数据。这个例子是基于纯JavaScript，没有使用任何库或框架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XMLHttpRequest 示例</title>
</head>
<body>

<button onclick="makeRequest()">发起请求</button>
<div id="result"></div>

<script>
function makeRequest() {
    // 创建 XMLHttpRequest 对象
    var xhr = new XMLHttpRequest();

    // 配置请求，指定请求方法和要获取的数据的URL
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);

    // 设置回调函数，处理响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 当请求完成且响应成功时执行此处的代码
            var responseData = JSON.parse(xhr.responseText);
            document.getElementById("result").innerHTML = "用户ID: " + responseData.userId + "<br>标题: " + responseData.title;
        } else if (xhr.readyState == 4 && xhr.status != 200) {
            // 处理请求失败的情况
            document.getElementById("result").innerHTML = "请求失败，状态码: " + xhr.status;
        }
    };

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

</body>
</html>

在这个例子中，当用户点击按钮时，makeRequest 函数被调用。该函数创建了一个 XMLHttpRequest 对象，配置了一个简单的GET请求，并指定了要获取数据的URL。然后，通过设置 onreadystatechange 事件处理程序来监听请求的状态变化。当请求完成并且状态码为200时，表示请求成功，我们解析响应的JSON数据并在页面上显示。如果请求失败，我们也进行相应的处理。

使用Fetch API

fetch 函数

fetch 是一个现代的 Web API，用于进行网络请求。它提供了一种更简单和强大的方式来进行 HTTP 请求，替代了传统的 XMLHttpRequest。fetch 函数返回一个 Promise，使得异步请求的处理更加方便。

基本语法如下：

fetch(url[, options])
  .then(response => {
    // 处理成功的响应
    return response.json(); // 或者 response.text()，response.blob()，等等
  })
  .then(data => {
    // 处理获取的数据
  })
  .catch(error => {
    // 处理请求失败的情况
  });
  • url: 请求的 URL。
  • options (可选): 一个配置对象，可以包含请求的各种设置，比如请求方法、头信息等。

fetch 的基本特点：

  1. Promise-based: fetch 返回一个 Promise 对象，使得你可以使用 .then() 和 .catch() 处理异步请求。

  2. 更现代的 API: 相较于 XMLHttpRequest，fetch 更加现代化，更符合现代 JavaScript 开发的标准。

  3. 默认不携带 Cookies: 默认情况下，fetch 不会携带跨域的 Cookies。如果需要携带，可以设置 credentials 选项为 'include'。

下面是一个更详细的例子，展示了 fetch 的基本用法：

// 发起 GET 请求
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败，状态码: ' + response.status);
    }
    return response.json();
  })
  .then(data => {
    console.log('获取的数据:', data);
  })
  .catch(error => {
    console.error('发生错误:', error);
  });

需要注意的是，fetch 不会在网络请求返回 HTTP 错误状态码（如 404 或 500）时抛出异常。它只会在网络故障、请求被阻止等问题时才抛出异常。因此，上面的例子使用 response.ok 来检查请求是否成功。

使用 Fetch API

使用 Fetch API 是现代Web开发中更推荐的方式，它提供了更简洁、灵活的异步请求方法。下面是一个使用 Fetch API 的简单案例，与前面的例子相似，但使用了 fetch 函数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API 示例</title>
</head>
<body>

<button onclick="makeRequest()">发起请求</button>
<div id="result"></div>

<script>
function makeRequest() {
    // 发起 Fetch 请求
    fetch("https://jsonplaceholder.typicode.com/posts/1")
        .then(response => {
            // 检查请求是否成功
            if (!response.ok) {
                throw new Error("请求失败，状态码: " + response.status);
            }
            // 将响应解析为 JSON
            return response.json();
        })
        .then(data => {
            // 处理获取的数据
            document.getElementById("result").innerHTML = "用户ID: " + data.userId + "<br>标题: " + data.title;
        })
        .catch(error => {
            // 处理请求失败的情况
            document.getElementById("result").innerHTML = error.message;
        });
}
</script>

</body>
</html>

在这个例子中，fetch 函数返回一个 Promise 对象，该对象在接收到响应后进行解析。使用 .then() 处理成功的响应，并使用 .catch() 处理失败的情况。这种方式相较于 XMLHttpRequest 更加现代、清晰，并且支持 Promises 和 async/await。

Comments

Make a comment

  • Index