《Ajax基础教程》学习笔记（一）_H5之家 - 中国HTML5教程资源分享第一站

这篇笔记的主要内容：ajax简介，XMLHttpRequest对象使用。

1. Ajax不只是一个特定的技术，更应算是一种技巧。Adaptive Path的Jesse James Garrett最早创造了这个词。在他的文章《Ajax: A New Approach to Web Applications》中，Garrett分析了Ajax这种方法。Ajax是Asynchronous JavaScript+XML的缩写。

2. 使用Ajax时的几个常犯的错误：

3. Ajax是一个客户端技术，它并不限制服务器端使用何种技术。使用Ajax需要了解的相关技术包括：

4. Ajax的设计模式：

5. XMLHttpRequest在不同浏览器中实现方法不同。IE把它实现为一个ActiveX对象，其他浏览器把它实现为一个本地JavaScript对象。

代码示例如下：

var xmlHttp; //创建一个全局变量保存对XMLHttpRequest对象的引用 function createXMLHttpRequest(){ if(window.ActiveXObject){ //IE浏览器 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest){ //非IE浏览器 xmlHttp = new XMLHttpRequest(); } } 6. XMLHttpRequest的方法：

7. XMLHttpRequest的属性：

8. 标准ajax交互示意图：

1. 一个客户端事件触发一个Ajax事件。例如可以有如下的代码：

<input type="text"d="email" name="email" onblur="validateEmail()";> 2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用，并设置URL以及所希望的HTTP方法（通常是GET或POST）。请求实际上通过一个send()方法调用触发。可能的代码如下所示： var xmlHttp; function validateEmail() { var email = document.getElementById("email"); var url = "validate?email=" + escape(email.value); if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } xmlHttp.open("GET", url); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); } 3. 向服务器做出请求。可能调用servlet、CGI脚本，或者任何服务器端技术。

4. 服务器可以做你想做的事情，包括访问数据库，甚至访问另一个系统。

5. 请求返回到浏览器。Content-Type设置为text/xml——XMLHttpRequest对象只能处理text/html类型的结果。在另外一些更复杂示例中，响应可能涉及更广，还包括JavaScript、DOM管理以及其他相关的技术。需要说明，你还需要设置另外一些首部，使浏览器不会在本地缓存结果。为此可以使用下面的代码：

response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache"); 【注】定义Pragma是为了保证向后兼容，它和Cache-Control功能一样。

6. 在这个示例中，XMLHttpRequest对象配置为处理返回时要调用callback()函数。这个函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态码。如果一切正常，callback()函数就会在客户端上做些有意思的工作。以下就是一个典型的回调方法：

function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //do something interesting here } } }
9. Ajax框架：

浏览器端框架

服务器端框架