Skip to content

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

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

入门案例:

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

html
<!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 请求,替代了传统的 XMLHttpRequestfetch 函数返回一个 Promise,使得异步请求的处理更加方便。

基本语法如下:

javascript
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: 相较于 XMLHttpRequestfetch 更加现代化,更符合现代 JavaScript 开发的标准。

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

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

javascript
// 发起 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 函数:

html
<!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。