JavaScript - Ajax

异步 JavaScript 和 XML （Ajax）代表了一种 Web 开发技术：它支持服务器和网页之间的动态、交互式通信，而无需重新加载完整的页面。描述符 “asynchronous” 强调数据交换可以在后台进行，而不会影响用户体验。与其无所事事地等待整版刷新;Ajax 支持对网页的特定部分进行实时更新，从而产生更加无缝和响应迅速的界面。

Ajax 是如何工作的？

启用动态更新的核心角色（无需重新加载整个页面）属于 JavaScript 的 Ajax 功能中的 XMLHttpRequest 对象。此特定过程允许服务器和网页之间的异步通信。服务器在收到此对象发送的请求时，通常采用 JSON 或 XML 格式，以数据进行响应。处理这些数据是 JavaScript 的任务;它会实时更新网页的特定部分。异步特性是现代 Web 开发的关键功能，可确保这些操作在后台不引人注目地进行，从而通过允许异步获取和发送数据来增强交互性。

在这里，我们将探索 Ajax 以更深入地了解它。

有 4 种方法可以进行 Ajax 调用或在 JavaScript 中实现 Ajax，它们是：

XMLHttpRequest（较旧的方法）
Fetch API（现代方法）
Axios （HTTP 请求库）
jQuery Ajax

为了便于理解，我们将在所有示例中使用 JSONPlaceholder。

JSONPlaceholder 是一个开源的模拟 REST API 提供程序，它允许开发人员测试他们的原型应用程序。它返回各种资源（如用户、帖子、评论等）的虚假/虚拟数据。JSONPlaceholder 的 API 端点可以使用 HTTP 请求进行，它们将模拟真实 API 的性质，而无需任何身份验证。我们的目标是在 Javascript-Ajax 下使用这些 API/端点。

使用 XMLHttpRequest

使用 XMLHttpRequest 的本机 JavaScript 方法代表了异步请求的最旧方法。它依赖于 XMLHttpRequest 对象来创建和发送 HTTP 请求。此方法涉及设置回调函数来处理请求的各种状态，使其适用于更简单的方案。但是，与更现代的方法相比，它有一些局限性。

例


<!DOCTYPE html>
<html lang="en">
<body>
<p>Native XMLHttpRequest Example</p>
<button onclick="nativeAjax()">Make Request</button>
<pre id="result"></pre>
<script>
	 function nativeAjax() {
	 	 var xhr = new XMLHttpRequest();
	 	 xhr.open('GET', 'https://jsonplaceholder.typicode.com/users/2', true);
	 	 xhr.onreadystatechange = function () {
	 	 	 if (xhr.readyState == 4 && xhr.status == 200) {
	 	 	 	 var responseData = JSON.stringify(JSON.parse(xhr.responseText), null, 2);
	 	 	 	 document.getElementById('result').innerText = 'Native XMLHttpRequest:\n' + responseData;
	 	 	 }
	 	 };
	 	 xhr.send();
	 }
</script>
</body>
</html>

使用 Fetch API

Fetch API 提供了 XMLHttpRequest 的现代替代方案，它提供了一种更直接、更强大的语法;它返回 Promises，从而增强对异步操作的直观处理。支持广泛的 HTTP 方法和标头：这为开发人员提供了一种更简洁的异步请求方法。现代 JavaScript 应用程序通常更喜欢它的清晰度和易用性。

例


<!DOCTYPE html>
<html>
<body>
<h1>Fetch API Example</h1>
<button onclick="fetchApi()">Make Request</button>
<pre id="result"></pre>
<script>
	 function fetchApi() {
	 	 fetch('https://jsonplaceholder.typicode.com/users/3')
	 	 	 .then(response => {
	 	 	 	 if (!response.ok) {
	 	 	 	 	 throw new Error('Network response was not ok');
	 	 	 	 }
	 	 	 	 return response.json();
	 	 	 })
	 	 	 .then(data => {
	 	 	 	 var formattedData = JSON.stringify(data, null, 2);
	 	 	 	 document.getElementById('result').innerText = 'Fetch API:\n' + formattedData;
	 	 	 })
	 	 	 .catch(error => {
	 	 	 	 document.getElementById('result').innerText = 'Fetch API Error: ' + error.message;
	 	 	 });
	 }
</script>
</body>
</html>

使用 Axios

Axios 专为发出 HTTP 请求而设计，是一个流行的 JavaScript 库。它的受欢迎程度很大程度上归功于其简洁明了的语法：建立在 Promise 之上;此外，它还拥有自动 JSON 数据转换支持功能，使其与该领域的其他库区分开来。Axios 提供的不仅仅是基本功能，还提供请求和响应拦截器等高级功能，这是在现代 Web 开发环境环境中管理 AJAX 操作的强大选择。

例


<!DOCTYPE html>
<html>
<head>
	 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>Axios Example</h1>
<button onclick="axiosExample()">Make Request</button>
<pre id="result3"></pre>
<script>
	 function axiosExample() {
	 	 axios.get('https://jsonplaceholder.typicode.com/users/5')
	 	 	 .then(response => {
	 	 	 	 var formattedData = JSON.stringify(response.data, null, 2);
	 	 	 	 document.getElementById('result3').innerText = 'Axios:\n' + formattedData;
	 	 	 })
	 	 	 .catch(error => {
	 	 	 	 document.getElementById('result3').innerText = 'Axios Error: ' + error.message;
	 	 	 });
	 }
</script>
</body>
</html>

使用 Ajax jQuery

jQuery 中的 $.ajax 方法简化了 AJAX 请求过程：以前是一种流行的方法;然而，随着现代 JavaScript 的兴起，它的使用已经减弱。jQuery Ajax 提供了一个既一致又跨浏览器兼容的界面，由于它所具有的这些优势，它仍然适用于已经使用或需要 jQuery 特定功能的项目。但是，对于新项目，现代替代方案可能是首选。

例


<!DOCTYPE html>
<html>
<head>
	 <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<h1>jQuery Ajax Example</h1>
<button onclick="jqueryAjax()">Make Request</button>
<pre id="result4"></pre>
<script>
	 function jqueryAjax() {
	 	 $.ajax({
	 	 	 url: 'https://jsonplaceholder.typicode.com/users/7',
	 	 	 method: 'GET',
	 	 	 dataType: 'json',
	 	 	 success: function (data) {
	 	 	 	 var formattedData = JSON.stringify(data, null, 2);
	 	 	 	 document.getElementById('result4').innerText = 'jQuery Ajax:\n' + formattedData;
	 	 	 },
	 	 	 error: function (xhr, status, error) {
	 	 	 	 document.getElementById('result4').innerText = 'jQuery Ajax Error: ' + error;
	 	 	 }
	 	 });
	 }
</script>
</body>
</html>

Ajax 用例

在实际场景中，开发人员通常使用 Ajax 来创建既响应又交互的 Web 应用程序。一个相关的例子：社交媒体平台;在这里，用户能够 - 多亏了 Ajax，在后台添加或加载新注释，而无需刷新整个页面。动态更新可确保流畅且不间断的用户体验，使个人能够无缝地与内容互动，并与他人无缝互动。此过程会产生一个响应更快、更具吸引力的平台;它放大了用户互动，从而提高了满意度。

利用 Ajax 增强用户体验的知名公司包括 Google（Gmail、地图）、Facebook、Twitter、Amazon、Netflix、GitHub、LinkedIn、YouTube、Microsoft Office Online 和 Uber。Ajax 用于实时更新、动态内容加载和各自平台上的无缝交互。

<< JavaScript - DOM 节点列表 JavaScript - 异步迭代 >>