AJAX 简介

AJAX 是开发人员的梦想，因为您可以：

从网络服务器读取数据 - 页面加载后
更新网页而不重新加载页面
将数据发送到网络服务器 - 在后台

Ajax示例

Let AJAX change this text

AJAX 示例解释

HTML 页面

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

</body>
</html>

HTML页面包含一个<div>部分和<button>。

<div>部分用于显示服务器的信息。

<button>调用功能（如果单击）。

该功能从Web服务器请求数据并显示：

函数loadDoc()

function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}

什么是 AJAX？

ajax =A同步J脚本语言ANDXML。

AJAX 不是一种编程语言。

AJAX 仅使用以下组合：

内置的浏览器XMLHttpRequest对象（从Web服务器请求数据）
JavaScript 和 HTML DOM（用于显示或使用数据）

AJAX 是一个误导性的名称。 AJAX 应用程序可能使用 XML 来传输数据，但以纯文本或 JSON 文本传输数据也同样常见。

AJAX 允许通过在后台与 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分内容，而无需重新加载整个页面。

AJAX 的工作原理

AJAX

1. 网页中发生事件（页面被加载，按钮被点击）
2. JavaScript 创建一个 XMLHttpRequest 对象
3. XMLHttpRequest对象向Web服务器发送请求
4. 服务器处理请求
5. 服务器将响应发送回网页
6. JavaScript 读取响应
7. 正确的操作（如页面更新）由 JavaScript 执行

现代浏览器（获取 API）

现代浏览器可以使用 Fetch API 而不是 XMLHttpRequest 对象。

Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。

如果您使用 XMLHttpRequest 对象，Fetch 可以以更简单的方式执行相同的操作。