Ajax快速入门

本文旨在帮你快速学会如何使用Ajax，只需要简单几个步骤，就能帮你应付Ajax相关地绝大部分工作。

基本概念

        AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

        Ajax主要是客户端与服务器交换数据的一种技术，它有2个主要功能：

ã»åæå¡å¨ååºè¯·æ±ï¼èä¸éæ°å è½½é¡µé¢ ã»æ¥ååå¤çæå¡å¨è¿åçæ°æ®

1 2 3

・向服务器发出请求，而不重新加载页面   ・接受和处理服务器返回的数据

如何发送HTTP请求？

第一步：需要创建一个XMLHttpRequest 对象，它是浏览器和服务器之间数据交换的桥梁。

                所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

                创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

1	variable=new XMLHttpRequest();

                老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable = new ActiveXObject("Microsoft.XMLHTTP");

1	variable = new ActiveXObject("Microsoft.XMLHTTP");

第二步：使用 XMLHttpRequest 对象的 open() 和 send() 方法将请求发送到服务器。

XMLHttpRequest.open("GET","test1.txt",true); XMLHttpRequest.send();

1 2 3

XMLHttpRequest.open("GET","test1.txt",true);   XMLHttpRequest.send();

两个方法：
open(method,url,async)，规定请求的类型、URL 以及是否异步处理请求。

methodï¼è¯·æ±çç±»åï¼GET æ POST urlï¼æ件å¨æå¡å¨ä¸çä½ç½® asyncï¼trueï¼å¼æ­¥ï¼æ falseï¼åæ­¥ï¼

1 2 3 4 5

method：请求的类型；GET 或 POST   url：文件在服务器上的位置   async：true（异步）或 false（同步）

send(string)，将请求发送到服务器。

stringï¼ä»ç¨äº POST 请æ±

1	string：仅用于 POST 请求

GET 还是 POST？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
        然而，在以下情况中，请使用 POST 请求：

       <em>æ æ³ä½¿ç¨ç¼å­æ件ï¼æ´æ°æå¡å¨ä¸çæ件ææ°æ®åºï¼        åæå¡å¨åé大éæ°æ®ï¼POST 没ææ°æ®ééå¶ï¼        åéåå«æªç¥å­ç¬¦çç¨æ·è¾å¥æ¶ï¼POST æ¯ GET æ´ç¨³å®ä¹æ´å¯é </em>

1 2 3 4 5

<em>无法使用缓存文件（更新服务器上的文件或数据库）          向服务器发送大量数据（POST 没有数据量限制）          发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠</em>

服务器响应

        如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseTextï¼è·å¾å­ç¬¦ä¸²å½¢å¼çååºæ°æ®ã responseXMLï¼è·å¾ XML å½¢å¼çååºæ°æ®ã

1 2 3

responseText：获得字符串形式的响应数据。   responseXML：获得 XML 形式的响应数据。

处理服务器响应

        在处理服务器返回的数据之前，我们首先要知道服务器处理请求的状态（是已经返回数据还是处理出错了）。

        XMLHttpRequest 对象的readyState属性，就是用来标识当前XMLHttpRequest对象处于什么状态的。它有5个状态，如下：

值	状态	描述
0	UNSENT	未初始化状态：此时，已经创建了一个XMLHttpRequest对象
1	OPENED	准备发送状态：此时，已经调用了XMLHttpRequest对象的open方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端
2	HEADERS_RECEIVED	已经发送状态：此时，已经通过send方法把一个请求发送到服务器端，但是还没有收到一个响应
3	LOADING	正在接收状态：此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收到
4	DONE	完成响应状态：此时，已经完成了HTTP响应的接收

if (httpRequest.readyState === 4) { // ä¸åé½å¾å¥½ï¼æ¶å°åå¤ } else { // è¿æ²¡åå¤å¥½ }

1 2 3 4 5

if (httpRequest.readyState === 4) {   // 一切都很好，收到回复 } else {   // 还没准备好 }

接下来我们就要根据服务器不同的响应执行不同的任务。每当 readyState 改变时，会触发 onreadystatechange 事件。onreadystatechange事件存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

        最后，我们还要检查HTTP服务器响应的响应代码，status表示响应的HTTP状态码，它也是XMLHttpRequest对象的一个属性。

         status的状态码可以在网上找到，如200表示请求成功，这里不再赘述。

if (httpRequest.status === 200) { // å®ç¾! } else { // æä¸ä¸ªé®é¢çè¯·æ± //ä¾å¦ååºå¯è½åå«404ï¼æ¾ä¸å°ï¼ //æ500ï¼åé¨æå¡å¨é误ï¼ååºä»£ç  }

1 2 3 4 5 6 7

if (httpRequest.status === 200) {   // 完美! } else {   // 有一个问题的请求   //例如响应可能包含404（找不到）   //或500（内部服务器错误）响应代码 }

现在，在检查请求的状态和响应的HTTP状态代码后，您可以根据需要对服务器发送给您的数据进行任何操作
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

XMLHttpRequest.onreadystatechange=function() ï½ if (httpRequest.readyState === 4 && httpRequest.status === 200) { // è¦æ§è¡çä»»å¡ } ï½

1 2 3 4 5

XMLHttpRequest.onreadystatechange=function() ｛   if (httpRequest.readyState === 4 && httpRequest.status === 200) {     // 要执行的任务   } ｝