Ajax（基本介绍+使用+示例代码+场景回放）

一路向前，积极向上

4879人浏览 · 2023-11-21 13:31:26

一路向前，积极向上 · 2023-11-21 13:31:26 发布

一、基本介绍

AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，通过后台异步加载数据并更新页面的技术。虽然 AJAX 的名称中包含 “XML”，但实际上它通常使用 JSON 格式来传输数据。

AJAX 的核心是使用 XMLHttpRequest 对象（或在现代浏览器中使用 Fetch API）来与服务器进行异步通信。这允许在不刷新整个页面的情况下发送和接收数据，从而提高用户体验。

二、适用场景

AJAX（Asynchronous JavaScript and XML）适用于需要在无需重新加载整个页面的情况下，通过异步加载数据或与服务器进行通信的场景。以下是一些适用场景：

动态加载数据： 当页面需要动态加载数据，而无需刷新整个页面时，可以使用 AJAX。例如，在社交媒体网站上，动态加载新的帖子或评论，而无需刷新整个页面。
表单验证和提交： 在表单验证时，可以使用 AJAX 在后台验证用户输入，而无需提交整个表单。这允许用户在不离开当前页面的情况下得到实时反馈。如果验证通过，可以使用 AJAX 将表单数据提交到服务器。
实时搜索： 在搜索框中输入关键字时，可以使用 AJAX 向服务器发送异步请求，实时获取匹配的搜索结果，并将结果显示在页面上，而无需刷新整个页面。
聊天应用： 在在线聊天应用中，通过 AJAX 可以异步地发送和接收消息，从而实现实时聊天的效果。
更新部分页面内容： 如果只需要更新页面的一部分内容，而不是整个页面，例如在购物网站上更新购物车状态，可以使用 AJAX。
无需中断用户操作： AJAX 允许在后台进行数据交换，而不会中断用户对页面的操作。这提高了用户体验，使用户感觉页面更加流畅。
单页应用（SPA）： 在单页应用中，页面的大部分内容由前端动态加载，而不是通过传统的页面刷新方式。 AJAX 在这种情况下是不可或缺的，用于获取和更新数据，以及处理用户交互。

AJAX 是一种强大的技术，可以提高用户体验，减少页面加载时间，并允许开发者在不刷新整个页面的情况下进行数据交互。然而，需要谨慎使用，确保数据安全性和用户友好性。

三、示例

以下是一个简单的使用 AJAX 的例子，演示如何通过 JavaScript 发送异步请求并处理服务器响应：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 示例</title>
</head>
<body>

<button onclick="loadData()">加载数据</button>
<div id="result"></div>

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

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

  // 定义请求完成后的回调函数
  xhr.onreadystatechange = function() {
    // 请求完成且响应状态为 200 表示成功
    if (xhr.readyState == 4 && xhr.status == 200) {
      // 解析服务器响应的 JSON 数据
      var data = JSON.parse(xhr.responseText);

      // 更新页面上的内容
      document.getElementById("result").innerHTML = "Title: " + data.title;
    }
  };

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

</body>
</html>

在这个例子中，点击按钮会触发 loadData 函数，该函数使用 XMLHttpRequest 对象发送 GET 请求到指定的 URL（这里使用了一个示例的 JSONPlaceholder API）。在请求完成后，通过回调函数处理服务器的响应，更新页面上的内容。

需要注意的是，现代的前端开发通常使用 Fetch API 替代 XMLHttpRequest，因为它提供了更简单、更强大的方式来处理异步请求。以下是一个使用 Fetch API 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 示例</title>
</head>
<body>

<button onclick="loadData()">加载数据</button>
<div id="result"></div>

<script>
function loadData() {
  // 使用 Fetch API 发送异步请求
  fetch("https://jsonplaceholder.typicode.com/posts/1")
    .then(response => response.json())
    .then(data => {
      // 更新页面上的内容
      document.getElementById("result").innerHTML = "Title: " + data.title;
    })
    .catch(error => console.error('Error:', error));
}
</script>

</body>
</html>

这个示例使用了 Fetch API，通过 fetch 函数发送异步请求，并使用 then 处理服务器的响应。 Fetch API 更简洁、易读，并支持 Promise。

当涉及 AJAX 时，有许多不同的使用情景和示例。以下是更多的 AJAX 示例，涵盖了一些常见的应用场景：

1. 实时天气预报：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 示例 - 实时天气预报</title>
</head>
<body>

<input type="text" id="cityInput" placeholder="输入城市">
<button onclick="getWeather()">获取天气</button>
<div id="weatherResult"></div>

<script>
function getWeather() {
  var city = document.getElementById("cityInput").value;

  // 使用 AJAX 获取实时天气数据
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.openweathermap.org/data/2.5/weather?q=" + city + "&appid=YOUR_API_KEY", true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var weatherData = JSON.parse(xhr.responseText);
      document.getElementById("weatherResult").innerHTML = "当前天气：" + weatherData.weather[0].description;
    }
  };

  xhr.send();
}
</script>

</body>
</html>

2. 实时股票价格：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 示例 - 实时股票价格</title>
</head>
<body>

<input type="text" id="stockSymbolInput" placeholder="输入股票代码">
<button onclick="getStockPrice()">获取股票价格</button>
<div id="stockPriceResult"></div>

<script>
function getStockPrice() {
  var stockSymbol = document.getElementById("stockSymbolInput").value;

  // 使用 AJAX 获取实时股票价格
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.example.com/stock-price?symbol=" + stockSymbol, true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var stockPriceData = JSON.parse(xhr.responseText);
      document.getElementById("stockPriceResult").innerHTML = "当前股价：" + stockPriceData.price;
    }
  };

  xhr.send();
}
</script>

</body>
</html>

3. 异步加载文章评论：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AJAX 示例 - 异步加载文章评论</title>
</head>
<body>

<button onclick="loadComments()">加载评论</button>
<ul id="commentList"></ul>

<script>
function loadComments() {
  // 使用 AJAX 异步加载文章评论
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "https://api.example.com/comments?articleId=123", true);

  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var commentsData = JSON.parse(xhr.responseText);
      var commentList = document.getElementById("commentList");

      // 清空现有评论列表
      commentList.innerHTML = "";

      // 添加新的评论
      commentsData.forEach(function(comment) {
        var li = document.createElement("li");
        li.textContent = comment.text;
        commentList.appendChild(li);
      });
    }
  };

  xhr.send();
}
</script>

</body>
</html>