《Ajax基础教程》学习笔记

2019独角兽企业重金招聘Python工程师标准>>>

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

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

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

1. 有变化时如何向用户提供可视化的提示？黄褪技术（Yellow Fade Technique, YFT）？Loading加载记号？
2. 不同于IFRAME和隐藏框架，通过XHR做出请求不会修改浏览器的历史栈。因此后退按钮未能按预想的效果进行。
3. 与其他基于浏览器的方法不同，Ajax不会修改地址栏中显示的链接。因此不能建书签或发链接。 使用Ajax不要过度。

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

1. JavaScript
2. HTML
3. DOM
4. CSS
5. 测试驱动（JsUnit，Selenium）

4. Ajax的设计模式：www.ajaxpatterns.org

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

代码示例如下：

01	var xmlHttp; //创建一个全局变量保存对XMLHttpRequest对象的引用

02

03	function createXMLHttpRequest(){

04	if(window.ActiveXObject){ //IE浏览器

05	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

06

}

07	else if(window.XMLHttpRequest){ //非IE浏览器

08	xmlHttp = new XMLHttpRequest();

09

}

10

}

6. XMLHttpRequest的方法 ：

1. abort()：停止当前请求。
2. getAllResponseHeaders()：返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content-Length、Date和URI。
3. getResponseHeader("header")：与getAllResponseHeaders()类似，不过它有一个参数表示希望得到的指定首部值，并把这个值作为串返回。
4. open("method", "url", "asynch", "username", "password")：建立对服务器的调用，前两个是必选参数，后三个是可选参数。第一个参数提供调用的特定方法（GET、POST、PUT），第二个参数提供调用资源的URL，第三个参数指示这个调用是异步（默认，true）还是同步（false），最后两个参数分别设置用户名和密码。
5. send(content)：向服务器发送请求，如果请求声明是异步的，该方法立即返回，否则会等待到接收到响应为止。可选参数可以是DOM对象的实例、输入流或者串。传入这个方法的内容会作为请求体的一部分发送。
6. setRequestHeader("header", "value")：为HTTP请求中一个给定的首部设置值，第一个参数表示要设置的首部，第二个参数表示要在首部中放置的值，该方法在调用open()之后才能使用。

7. XMLHttpRequest的属性：

1. onreadystatechange：每个状态改变时会触发这个事件处理器，通常会调用一个js函数
2. readyState：请求的状态（0=未初始化，1=正在加载，2=已加载，3=交互中，4=完成）
3. responseText：服务器的响应，表示为一个串
4. responseXML：服务器的响应，表示为XML，这个对象可以解析为DOM对象
5. status：服务器的HTTP状态码（200对应OK，404对应Not Found）
6. statusText：HTTP状态码的相应文本

8. 标准ajax交互示意图：

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

1	<input type="text"d="email" name="email" οnblur="validateEmail()";>

2. 创建XMLHttpRequest对象的一个实例。使用open()方法建立调用，并设置URL以及所希望的HTTP方法（通常是GET或POST）。请求实际上通过一个send()方法调用触发。可能的代码如下所示：

01	var xmlHttp;

02	function validateEmail() {

03	var email = document.getElementById("email");

04	var url = "validate?email=" + escape(email.value);

05	if (window.ActiveXObject) {

06	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

07

}

08	else if (window.XMLHttpRequest) {

09	xmlHttp = new XMLHttpRequest();

10

}

11	xmlHttp.open("GET", url);

12	xmlHttp.onreadystatechange = callback;

13	xmlHttp.send(null);

14

}

3. 向服务器做出请求。可能调用servlet、CGI脚本，或者任何服务器端技术。

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

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

1	response.setHeader("Cache-Control", "no-cache");

2	response.setHeader("Pragma", "no-cache");

【注】定义Pragma是为了保证向后兼容，它和Cache-Control功能一样。

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

1	function callback() {

2	if (xmlHttp.readyState == 4) {

3	if (xmlHttp.status == 200) {

4	//do something interesting here

5

}

6

}

7

}

9. Ajax框架 ：

浏览器端框架

• Dojo：一个古老的框架，2004年9月开始开发，重点关注可用性。目标是建立充分利用XHR的DHTML工具包，支持向后和向前按钮，解决书签问题。
• Rico：由Sabre Airline Solutions开发，重点关注拖放动作、数据网格和所谓的电影效果（移动部件、淡入淡出等）。
• qooxdoo：提供一个基于JavaScript的工具包来弥补HTML的不足。可以模拟标准胖客户应用中的一些特性。
• TIBET：可能是现存最老的框架，从1997年就开始开发。目标是提供企业级Ajax支持。还拥有一个完全交互式的基于浏览器的IDE。
• Flash/JavaScript集成包：实现JavaScript和ActionScript之间的相互调用。
• Google AJAXSLT：基于Google Maps的工作，使用XPath的XSL转化（XSLT）的JavaScript实现。AJAXSLT允许使用JavaScript在浏览器上直接完成XML文档的转换。
• libXmlrequest：2003年就发布的古老框架，版权归作者Stephen W. Cote所有，相关文档也很少。
• RSLite：远程脚本的一个实现，由Brent Ashley编写。轻量级的，2000年开始发展。可以用来支持那些不支持XMLHttpRequest对象的浏览器。
• SACK：简单Ajax代码包。
• sarrisa：比Ajax多一点功能是它以一种独立于浏览器的方式对XML API提供了包装支持。
• XHConn：类似于SACK，相当于XMLHttpRequest对象的一个简单包装器。

服务器端框架

• CPAINT：跨平台异步接口工具包，在服务器端实现Ajax，向客户返回文本或DOM文档对象，只支持PHP和ASP。
• Sajax：可以直接从JavaScript调用服务器端代码。
• JSON/JSON-RPC：JavaScript对象注解（JSON）是一种文本格式，可用于交换数据。
• Direct Web Remoting（DWR）：从JavaScript直接调用Java方法。
• Shift Web Applications TO（SWATO）：基于Java的Ajax框架解决方案，相对复杂，但文档完备。
• Java BluePrints
• Ajax.Net：与.NET配合使用。
• Microsoft的Atlas项目
• Ruby on Rails

转载于:https://my.oschina.net/u/1163677/blog/149942