AJAX | HTTP_H5之家 - 中国HTML5教程资源分享第一站

一 AJAX

AJAX is not a programming language. lt is just a technique for creating better and more interactive web applications.

1.XMLHTTPRequest用于在后台与服务器交换数据。

2.创建XMLHttpRequest对象—浏览器与服务器之间数据交换的桥梁

var xhr; if(window.XMLHttpRequest){ //code for IE 7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); }else{ //code for IE5 , IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); }

3.使用XMLHttpRequest对象的open()和send()方法将请求发送至服务器

xhr.open(method,url,async); xhr.send(string);

AJAX | HTTP

4.GET || POST

1.大部分情况下可用GET---更简单、更快 2.以下情况使用POST请求： a)无法使用缓存文件（更新服务器上的文件或数据库）---updata b)向服务器发送大量数据（POST没有数据量限制）---size c)发送包含未知字符的用户输入时，POST比GET更加稳定和可靠。---unknown character

5.通过AJAX,JavaScript无需等待服务器的相应，而是：

1.在等待服务器响应时执行其他脚本 2.在响应就绪后对相应进行处理

6.当使用async = true时（异步），规定在相应处于onreadystatechange事件中的就绪状态时执行的函数

7.当async = false时（同步），JavaScript会等到服务器相应就绪后才继续执行。如果服务器繁忙或缓慢，应用程序就会被挂起或停止。

8.服务器响应

如需获得来自服务器的响应，可使用XMLHttpRequest对象的responseText或responseXML属性。 responseText属性返回字符串形式的响应： document.getElementById('myDiv').innerHTML = xhr.responseText;

AJAX | HTTP

books.xml: <bookstore> <book category="children"> <title lang="en">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="cooking"> <title lang="en">Everyday Italian</title> <author>Giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="web" cover="paperback"> <title lang="en">Learning XML</title> <author>Erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> <book category="web"> <title lang="en">XQuery Kick Start</title> <author>James McGovern</author> <author>Per Bothner</author> <author>Kurt Cagle</author> <author>James Linn</author> <author>Vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> </bookstore> <head> <script type="text/javascript"> function loadXMLDoc(){ var xhr,txt,x,i; if(window.XMLHttpRequest){ //code for IE 7+, Firefox, Chrome, Opera, Safari xhr = new XMLHttpRequest(); }else{ //code for IE5 , IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.onreadystatechange = function(){ if(xhr.readyState ==4 && xhr.status == 200){ xmlDoc = xhr.responseXML; text = ""; x = xmlDoc.getElementsByTagName('title'); for(i = 0; i < x.length; i++){ txt = txt + x[i].childNodes[0].nodeValue + '<br />'; } document.getElementById('myDiv').innerHTML = txt; } xhr.open('GET','/example/xmle/books.xml',true); xhr.send(); } </script> </head> <body> <h2>My Book Collection:</h2> <button type = 'button' onclick = 'loadXMLDoc()'> 获得我的图书收藏列表 </button> </body>

9.处理服务器响应

1.在处理服务器返回的数据之前，我们首先要知道服务器处理请求的状态（已返回数据还是处理出错了） 2.XMLHttpRequest对象的三个重要属性 a)onreadystatechange:存储函数（或函数名）,每当readyState改变时，就会调用该函数。 b)readyState：标识当前XMLHttpRequest对象处于什么状态，它有5个状态： 0：unsent---未初始化状态---此时，已经创建了一个XMLHttpRequest对象。 1：opened---准备发送状态---此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端。 2：Headers_received----已经发送状态----此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应。 3：loading---正在接收状态---此时，已经收到HTTP响应头部信息，但是消息体部分还没有完全接收到。 4：done---完成响应状态----此时，已经完成了HTTP响应的接收。 c)status---标识响应的HTTP状态码： 200： "OK" 404：未找到页面 500：（内部服务器错误）响应代码 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //要执行的任务 } };