2.4 Ajax
(注：本节内容涉及简单地PHP服务器端编程，若要动手实验，请参考PHP一节来运行PHP程序)
Ajax即Asynchronous JavaScript and XML，是一种Web浏览器端的局部页面更新技术。它可以在不重新加载整个Web页面的情况下，使用服务器的数据更新局部Web页面。Ajax依赖若干其他技术：它使用JavaScript向服务器请求数据；通过操纵DOM来更新页面。
一个Ajax的例子如下：
index.html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AJAX</title>
</head>
<body>
<button id="btn">现在几点？</button>
<div id="result"></div>
<script>
var btn = document.getElementById('btn');
var result = document.getElementById('result');
btn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'time.php');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200)
result.innerHTML = xhr.responseText;
else
alert('Error: ' + xhr.status);
}
};
xhr.send(null);
};
</script>
</body>
</html>
time.php：
<?php echo date('H:i:s') ?>
Ajax依赖XMLHttpRequest对象向服务器请求数据。
xhr.open('GET', 'time.php');
这行代码向服务器发出一个异步的GET请求，请求的资源（URI）是time.php。因为请求是异步的，所以不会马上返回结果，需要我们注册onreadystatechange事件来获得结果：
xhr.onreadystatechange = function () {
//...
};
在HTTP请求进行的过程中，xhr的readyState的值会发生若干次改变，依次是：
- 1 (OPENED)，当open方法成功调用后
- 2 (HEADERS_RECEIVED)，当HTTP应答头部（header）接收完成时
- 3 (LOADING)，当应答消息主体（message body）开始加载时
- 4 (DONE)，当请求完成时（也可能是由于错误而终止）
我们在请求成功完成时把结果（通过responseText得到）显示出来；如果出错则显示一个错误警告：
if (xhr.readyState === 4) {
if (xhr.status === 200)
result.innerHTML = xhr.responseText;
else
alert('Error: ' + xhr.status);
}
xhr的send方法真正开始进行HTTP请求。
另外，XMLHttpRequest发出的HTTP请求不必是异步的，获得的结果也不必是XML（本例中它就是一段普通文本）——实际上JSON用得更广泛。更多关于XMLHttpRequest的更多信息可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
需要说明的是，AJAX技术受到同源（same-origin）条件限制：简单地说，假设一个HTML文档的URL是http://www.example.com/path/to/doc.html，那么它的XMLHttpRequest对象发出的HTTP请求的URL就只限于http://www.example.com/*，其中*是一个通配符，代表任何字符序列，也可以为空。同源是浏览器出于安全原因加上的一个限制。更多关于同源以及如何“跨源”的信息可参考： https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy
更多关于Ajax的信息可参考：https://developer.mozilla.org/zh-CN/docs/AJAX