2.4 Ajax · Web全栈技术指南

# 2.4 Ajax ## 2.4 Ajax (注：本节内容涉及简单地PHP服务器端编程，若要动手实验，请参考[PHP](php.html)一节来运行PHP程序) Ajax即**Asynchronous JavaScript and XML**，是一种Web浏览器端的局部页面更新技术。它可以在不重新加载整个Web页面的情况下，使用服务器的数据更新局部Web页面。Ajax依赖若干其他技术：它使用JavaScript向服务器请求数据；通过操纵DOM来更新页面。一个Ajax的例子如下： index.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](https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy) 更多关于Ajax的信息可参考：<https://developer.mozilla.org/zh-CN/docs/AJAX>