AJAX 简介
AJAX 是开发人员的梦想，因为它可以
- 更新网页而不重新加载页面
- 在页面加载后从服务器请求数据
- 在页面加载后从服务器接收数据
- 在后台将数据发送到服务器
每一章都有试用示例
在每一章中，您可以在线编辑示例，并单击按钮查看结果。
AJAX 示例解释
HTML 页面
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>让 AJAX 更改此文本</h2>
<button type="button" onclick="loadDoc()">更改内容</button>
</div>
</body>
</html>
HTML 页面包含一个 <div> 部分和一个 <button>。
<div> 部分用于显示来自服务器的信息。
<button> 调用一个函数（如果被点击）。
该函数从 Web 服务器请求数据并显示它
函数 loadDoc()
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
上面示例中使用的 "ajax_info.txt" 文件是一个简单的文本文件，内容如下
<h1>AJAX</h1>
<p>AJAX 不是一种编程语言。</p>
<p>AJAX 是一种从网页访问 Web 服务器的技术。</p>
<p>AJAX 代表异步 JavaScript 和 XML。</p>
什么是 AJAX？
AJAX = Asynchronous JavaScript And XML.
AJAX 不是一种编程语言。
AJAX 只是使用了一种组合
- 浏览器内置的 XMLHttpRequest 对象（用于从 Web 服务器请求数据）
- JavaScript 和 HTML DOM（用于显示或使用数据）
AJAX 是一个误导性的名称。AJAX 应用可能使用 XML 传输数据，但将数据作为纯文本或 JSON 文本传输同样常见。
AJAX 允许网页通过在后台与 Web 服务器交换数据来异步更新。这意味着可以更新网页的某些部分，而无需重新加载整个页面。
AJAX 如何工作
- 1. 网页中发生一个事件（页面加载、按钮被点击）
- 2. JavaScript 创建一个 XMLHttpRequest 对象
- 3. XMLHttpRequest 对象向 Web 服务器发送请求
- 4. 服务器处理请求
- 5. 服务器将响应发送回网页
- 6. JavaScript 读取响应
- 7. JavaScript 执行适当的操作（如页面更新）
