异步 JavaScript 和 XML（Ajax）代表了一种 Web 开发技术：它能够在不强制整个页面重新加载的情况下，实现服务器和网页之间的动态交互。术语“异步”强调数据交换可以在后台进行，独立于用户的体验干扰。Ajax 使得特定网页部分能够实现实时更新，而不是等待整个页面刷新，从而提供了一个更加无缝和响应式的界面。
Ajax 如何工作？
使动态更新无需完整页面重载的核心角色属于 JavaScript 的 Ajax 功能中的 XMLHttpRequest 对象。这个过程允许服务器和网页之间的异步通信。当这个对象发送请求后，服务器通常会以 JSON 或 XML 格式回应数据。JavaScript 的任务则是处理这些数据，并实时更新网页的特定部分。异步这一特性对于现代 Web 开发至关重要，因为它确保这些操作在后台悄无声息地发生，从而通过异步获取和发送数据增强了交互性。
在这里，我们将探索 Ajax 以便更深入地了解它。
有四种方法可以调用 Ajax 或在 JavaScript 中实现 Ajax：
在所有示例中，我们将使用 JSONPlaceholder 以便更好地理解。
JSONPlaceholder 是一个开源的模拟 REST API 提供者，它让开发者能够测试他们的原型应用。它为各种资源（如用户、帖子、评论等）提供假/虚拟数据。JSONPlaceholder 的 API 端点可以通过 HTTP 请求调用，并且在无需任何身份验证的情况下模仿真实 API 的行为。我们的目标是使用这些 API/端点来理解 JavaScript-Ajax。
使用 XMLHttpRequest
使用 XMLHttpRequest 的原生 JavaScript 方法代表了最古老的异步请求方法。它依赖 XMLHttpRequest 对象来创建和发送 HTTP 请求。此方法涉及设置回调函数来处理请求的各种状态，使其适用于简单场景。不过，与更现代的方法相比，它有一些局限性。
示例
<!DOCTYPE html>
<html lang="en">
<body>
<p>原生 XMLHttpRequest 示例</p>
<button onclick="nativeAjax()">发起请求</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 = '原生 XMLHttpRequest:\n' + responseData;
}
};
xhr.send();
}
</script>
</body>
</html>
使用 Fetch API
Fetch API 提供了一个比 XMLHttpRequest 更现代化的选择，它提供了更直接和强大的语法；它返回 Promise，从而增强了异步操作的直观处理。支持广泛的 HTTP 方法和头信息：这为开发人员提供了一种更简洁、简明的方法来进行异步请求。由于其清晰性和易用性，现代 JavaScript 应用程序经常首选它。
示例
<!DOCTYPE html>
<html>
<body>
<h1>Fetch API 示例</h1>
<button onclick="fetchApi()">发起请求</button>
<pre id="result"></pre>
<script>
function fetchApi() {
fetch('https://jsonplaceholder.typicode.com/users/3')
.then(response => {
if (!response.ok) {
throw new Error('网络响应异常');
}
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.message;
});
}
</script>
</body>
</html>
使用 Axios
设计用于发出 HTTP 请求，Axios 成为一种流行的 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 示例</h1>
<button onclick="axiosExample()">发起请求</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.message;
});
}
</script>
</body>
</html>
使用 jQuery Ajax
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 示例</h1>
<button onclick="jqueryAjax()">发起请求</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;
}
});
}
</script>
</body>
</html>
Ajax 应用场景
在实际应用场景中，开发人员常常用 Ajax 创建既响应又交互的 Web 应用。一个相关的例子是社交媒体平台，在这里，由于 Ajax 的存在，用户可以在后台添加或加载新的评论而无需整个页面刷新。动态更新确保了一个流畅且不间断的用户体验，允许个人无缝地与内容和其他人互动。这个过程产生了一个更具响应性和吸引力的平台；它放大了用户的互动，从而增强了满意度。
使用 Ajax 以增强用户体验的著名公司包括 Google（Gmail，Maps）、Facebook、Twitter、Amazon、Netflix、GitHub、LinkedIn、YouTube、Microsoft Office Online 和 Uber。Ajax 在它们各自的平台上用于实现实时更新、动态内容加载以及无缝互动。