这张 HTML 页面包含一个 <div> 和一个 <button>。
<div> 用于显示来自服务器的信息。
<button> 调用函数（当它被点击）。
该函数从 web 服务器请求数据并显示它
3. AJAX 如何工作
.网页中发生一个事件（页面加载、按钮点击）
. 由 JavaScript 创建 XMLHttpRequest 对象
. XMLHttpRequest 对象向 web 服务器发送请求
. 服务器处理该请求
. 服务器将响应发送回网页
. 由 JavaScript 读取响应
. 由 JavaScript 执行正确的动作（比如更新页面）
（二）XMLHttpRequest 对象
1.所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
2. 创建 XMLHttpRequest 的语法是：
variable = new XMLHttpRequest();
为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：
var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
3.出于安全原因，现代浏览器不允许跨域访问。
这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
5.
（三）ajax向服务器发送请求
1.如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();
2. GET 还是 POST？
GET 比 POST 更简单更快，可用于大多数情况下。
不过，请在以下情况始终使用 POST：
• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全
3. 一条简单的 GET 请求：
xhttp.open(“GET”, “demo_get.asp”, true);
xhttp.send();
在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：
xhttp.open(“GET”, “demo_get.asp?t=” + Math.random(), true);
xhttp.send();
如果您需要用 GET 方法来发送信息，请向 URL 添加这些信息：
xhttp.open(“GET”, “demo_get2.asp?fname=Bill&lname=Gates”, true);
xhttp.send();
4.一条简单的 POST 请求：
xhttp.open(“POST”, “demo_post.asp”, true);
xhttp.send();
如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：
xhttp.open(“POST”, “ajax_test.asp”, true);
xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
xhttp.send(“fname=Bill&lname=Gates”);
setRequestHeader(header, value)向请求添加 HTTP 头部
• header：规定头部名称
• value：规定头部值
5. url - 服务器上的文件
open() 方法的 url 参数，是服务器上文件的地址：
xhttp.open(“GET”, “ajax_test.asp”, true);
该文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php（它们可以在发送回响应之前在服务器执行操作）。
6. 如需异步发送请求，open() 方法的 async 参数必须设置为 true：
xhttp.open(“GET”, “ajax_test.asp”, true);
发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。
通过异步发送，JavaScript 不必等待服务器响应，而是可以：
• 在等待服务器响应时执行其他脚本
• 当响应就绪时处理响应
7. onreadystatechange 属性
通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。
这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById(“demo”).innerHTML = this.responseText;
}
};
8.同步请求
如需执行同步的请求，请把 open() 方法中的第三个参数设置为 false：
xhttp.open(“GET”, “ajax_info.txt”, false);
有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。
由于代码将等待服务器完成，所以不需要 onreadystatechange 函数：
xhttp.open(“GET”, “ajax_info.txt”, false);
xhttp.send();
document.getElementById(“demo”).innerHTML = xhttp.responseText;
不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。现代开发工具被鼓励对使用同步请求做出警告，并且当这种情况发生时，可能会抛出 InvalidAccessError 异常。
（四）ajax服务器响应
1.onreadystatechange 属性
readyState 属性存留 XMLHttpRequest 的状态。
onreadystatechange 属性定义当 readyState 发生变化时执行的函数。
status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。
每当 readyState 发生变化时就会调用 onreadystatechange 函数。
当 readyState 为 4，status 为 200 时，响应就绪：
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();
}
注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。
2. 回调函数是一种作为参数被传递到另一个函数的函数。
如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。
该函数应当包含 URL 以及当响应就绪时调用的函数。
