AJAX 是开发人员的梦想,因为您可以:
从网络服务器读取数据 - 页面加载后
更新网页而不重新加载页面
将数据发送到网络服务器 - 在后台
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML =
this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
</script>
</body>
</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> 调用一个函数(如果单击它)。
该函数从网络请求数据 服务器并显示它:
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=A同步JavaScript And XML。
AJAX 不是一种编程语言。
AJAX 仅使用以下组合:
浏览器内置 XMLHttpRequest
对象(用于从 Web 服务器请求数据)
JavaScript 和 HTML DOM(用于显示或使用数据)
AJAX 是一个误导性的名称。 AJAX 应用程序可能使用 XML 来传输数据, 但以纯文本或 JSON 文本形式传输数据也同样常见。
AJAX 允许通过在后台与 Web 服务器交换数据来异步更新网页。 这意味着可以更新网页的部分内容,而无需重新加载整个页面。
1. 网页中发生事件(页面被加载,按钮被点击)
2. JavaScript 创建一个 XMLHttpRequest 对象
3. XMLHttpRequest对象向Web服务器发送请求
4. 服务器处理请求
5. 服务器将响应发送回网页
6. JavaScript 读取响应
7. 正确的操作(如页面更新)由 JavaScript 执行
现代浏览器可以使用 Fetch API 而不是 XMLHttpRequest 对象。
Fetch API 接口允许 Web 浏览器向 Web 服务器发出 HTTP 请求。
如果您使用 XMLHttpRequest 对象,Fetch 可以以更简单的方式执行相同的操作。