AJAX当我在前两年第一次看到这个名字的时候，我有些感觉头大。因为又出了一门新语言，自从WEB应用流行起来时，就层出不穷的新技术。那时在网上看到《Ajax实战》，很郁闷，又是500多页的新技术…。但自从接触WEB以来，很多看似复杂而艰难的东西就像窗户纸一样。AJAX也不例外，不是就对当前页面数据的更新吗！（说大话了，虽然我还没用熟它。但它确实没有相像中的那么难。）
开始整理！
一、AJAX简介
1. AJAX简介
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。根据Ajax提出者Jesse James Garrett建议[1]，它：
1. 使用XHTML+CSS来表示信息；
2. 使用JavaScript操作DOM（Document Object Model）进行动态显示及交互；
3. 使用XML和XSLT进行数据交换及相关操作；
4. 使用XMLHttpRequest对象与Web服务器进行异步数据交换；
5. 使用JavaScript将所有的东西绑定在一起。
6. 使用SOAP以XML的格式来传送方法名和方法参数。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生／合成”式（derivative/composite）的技术正在出现，如“AFLAX”。
AJAX的应用使用支持以上技术的Web浏览器作为运行平台。这些浏览器目前包括：Internet Explorer、Mozilla、Firefox、Opera、Konqueror及Mac OS的Safari。但是Opera不支持XSL格式对象，也不支持XSLT[2]。
比如google搜索的提示框，google的地图都是使用AJAX来实现的。
AJAX技术，不用刷新整个页面即可完成与服务器通讯并更新页面显示数据。
AJAX不用刷新整个页面便可与服务器通讯的办法——XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词，XMLHttpRequest是核心！
2.AJAX工具包
通过简介我们知道，AJAX不是一项独有的新技术是多种技术的创新混合。
a) 服务器端语言：服务器需要具备向浏览器发送特定信息的能力，Ajax与服务器端语言无关。
b) XML (eXtensible Markup Language，可扩展标记语言) 是一种描述数据的格式。Aajx 程序需要某种格式化的格式来在服务器和客户端之间传递信息，XML 是其中的一种选择。
c) XHTML（eXtended Hypertext Markup Language,使用扩展超媒体标记语言）和 CSS（Cascading Style Sheet,级联样式单）标准化呈现。
d) DOM（Document Object Model,文档对象模型）实现动态显示和交互。
e) 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。
f) 使用JavaScript绑定和处理所有数据。
3.AJAX的缺陷
老佟在讲解新技术时，时常说的话——没有完美的技术。AJAX也不例外：
a) 由 Javascript 和 AJAX 引擎的不同导致的浏览器的兼容。
b) 页面局部刷新，导致后退等功能失效。
c) 对流媒体的支持没有FLASH、Java Applet好。
d) 一些手持设备（如手机、PDA等）支持性差。
AJAX具有这些缺陷，但它带给人们的体验和技术的发展是功不可没的！
二、XMLHttpRequest
1.简介
XMLHttprequest最早是在IE5中以ActiveX实现的，但它至今仍不是W3C的标准。XMLHttpRequest的创建方法有两大阵营，微软自己的ActiveX单兵和其他浏览器以JavaScript对象为一个阵营。虽然XMLHttpRequest的创建不同，但它们的接口和属性相同。
2.创建XMLHttpRequest对象
我们将它单独拿出来做成一个函数，因为只创建XMLHttpRequest对象一次即可：
| function getXMLHttpRequest(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else if(window.ActiveXObject){ return new ActiveXObject("Microsoft.XMLHTTP"); }else{ return null; } } |
在需要XMLHttpRequest对象的地方，直接调用上面的方法获得即可！
3.XMLHttpRequest的方法
| 方法 | 描述 |
| abort() | 停止当前的请求 |
| getAllResponseHeader() | 将HTTP请求的所有响应首部作为键/值返回 |
| getResponseHeader(“header”) | 返回指定首部的串值 |
| Open(“method”,”url”) | 建立服务器的调用。Method可以是GET、POST或PUT，URL可以是相对URL或绝对URL。 |
| Seng(content) | 向服务器发送请求。 |
| setRequestHeader(“header”,”value”) | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。 |
4.XMLHttpRequest的属性
| 属性 | 描述 |
| readyState | 请求状态，状态值：0，未初始化。1，正在加载。2，已经加载。3，交互中。4，完成。 |
| onreadystatechange | 当readyState状态值被改变时，都会调用这个属性指定的JavaScript函数。 |
| responseText | 服务器的响应，表示为一个串。 |
| responseXML | 服务器的XML响应，可以解析为 DOM对象。 |
| status | 服务器响应的HTTP状态码。 |
| statusText | 服务器响应的HTTP状态码的相应文本。 |
三、XMLHttpRequest发送与接收请求
XMLHttpRequest与服务器进行通讯包含以下三个关键部分：
1. onreadystatechange事件处理函数
2. open方法
3. seng方法
在发送和接收请求之前先了解XMLHttpRequest的onreadystatechange属性。为此属性指定一个无参数的函数。在onreadystatechange指定的函数中通过判断XMLHttpRequest的readyState值，来进行相应的处理。比如，readyState为4时说明服务器处理XMLHttpRequest的请求完成，这时我们就可以获取服务器的响应数据。readyState值是被服务器改变的。
1．发送请求
1) 准备请求
XMLHttpRequestObj .open(method, url, asynch)，open 方法允许程序员用一个Ajax调用向服务器发送请求：
method：请求类型，类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后(url+”?time=”+new Date())，就能确保URL的唯一性，从而避免浏览器缓存结果。
url：路径字符串，指向你所请求的服务器上服务的路径。可以是绝对路径或相对路径。
asynch：表示请求是否要异步传输，默认值为true。指定true，在读取后面的脚本之前，不需要等待服务器的响应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。
2) 发送请求
XMLHttpRequestObj .send(data)，send 方法可为已经待命的请求（open设置的准备就地正法）发送指令：
data：将要传递给服务器的字符串。若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);。当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null。
3) 请求信息头
XMLHttpRequestObj .setRequestHeader(header,value)：
当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。Ajax 请求中，发送首部信息的工作可以由 setRequestHeader该完成。
header： 首部的名字.
value：首部的值。
如果用POST 请求向服务器发送数据，需要将“Content-type”的首部设置为 “application/x-www-form-urlencoded”。它会告知服务器正在发送数据，并且数据已经符合URL编码了。该方法必须在open()之后才能调用。
2.接收请求
当一个请求被响应后，XMLHttpRequest的如下属性被设置（看前边的表它们分别代表什么意思）：readyState、status、responseText、responseXML。
1) readyState，表示Ajax请求的当前状态。
n 0 代表未初始化，还没有调用 open 方法。
n 1 代表正在加载，open 方法已被调用，但 send 方法还没有被调用。
n 2 代表已加载完毕，send 已被调用请求已经开始。
n 3 代表交互中，服务器正在发送响应。
n 4 代表完成，服务器响应发送完毕。
每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数指定为一个函数，那么每次 readyState 值的改变都执行该函数。
readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4。我们常处理readyState为4的应用。
2) 服务器的响应信息头，三位数的状态码是服务器发送的响应中最重要的头部信息，并且属于超文本传输协议中的一部分。常用状态码及其含义：
l 404 没找到页面(not found)
l 403 禁止访问(forbidden)
l 500 内部服务器出错(internal service error)
l 200 一切正常(ok)
l 304 没有被修改(not modified)
在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，可以确保服务器是否已发送了一个成功的响应！我们以此为标记，决定是否处理响应信息哦！~
3) responseText，此属性包含了从服务器发送的数据。它是一个HTML，XML或普通文本，这取决于服务器发送的内容。
当 readyState 属性值变成 4 时，responseText 属性可用，表明 Ajax 请求已经结束。我们通过此取获取服务器响应的信息，一般为HTML或JSON信息。我们可以直接使用HTML响应内容，如果响应内容为JSON，我们必须获取JSON体中的休息。
4) responseXML
如果服务器返回的是XML，那么数据将储存在responseXML 属性中。
只用服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml。我们通过此取获取服务器响应的信息，一般为XML信息。我们可以使用DOM获取XML中的响应内容。
三、XMLHttpRequest响应内容的数据格式
在服务器端 AJAX 是一门与语言无关的技术，在业务逻辑层使用何种服务器端语言都可以。
从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：
l XML
l JSON
l HTML
1.HTML
还记得最初编写的Serlvet吗？在Serlvet中直接向输出流打印HTML信息，JSP页面被翻译为Servlet时，也是通过输出流向浏览器输出HTML信息。浏览器，直接显示即可。所以在XMLHttpRequest处理请求信息时，可以直接使用DOM对象的innerHtml属性或JQuery对象的html()方法，将responseText文本内容直接添加到页面元素节点中。
虽然这使用HTML做为响应数据格式十分方便快捷，但当需要更新一篇文档的多个部分时HTML就不大合适了，并且innerHtml不是w3c的标准。
2.XML
XML是WEB的世界能用语言，我们可以自定义XML格式，并且可以通过DOM对象完全操作XML。使用XML作为响应数据的格式，必须保证XML的头部信息正确，比如：“<?xml version="1.0" encoding="utf-8"?>”。若这个格式不正确，那么responseXML的值将是空的。
使用XML的最大难处是，如果XML的内容庞大或复杂，使用DOM解析XML数据是痛苦的。
3. JSON
这个东西在我接触WEB时就看见它，甚至在GWT的也有看见它。当时感觉比较神秘！~~JSON是什么呢？
JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。如：
| var $itcast = { "name":"itcast", "birthday":"2000", "contact":"123456789", "address":[{"country":"china","city":"beijing"}, {"country":"america","city":"newyork"}] } |
JSON，使用:取代=号。每一条赋值语句使用,号分隔。整体使用{}包围，也可以{}潜逃使用。数组使用[]包围，成员之间使用,号分隔。
JSON中的成员值可以是字符串，数字或者布尔值也可以是函数。
如使用“$ itcast.name”获得“itcast”，使用“$ itcast.address[0].country”获取“china”。
JSON 只是一种文本字符串。它被存储在 responseText 属性中为了读取存储在 responseText 属性中的 JSON 数据，需要使用 JavaScript 的 eval函数。eval 会把字符串参数当作 JavaScript 代码来执行。因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的。
JSON提供了json.js包，下载http://www.json.org/json.js后，可以使用parseJSON()方法将字符串解析成 JS 对象。
使用JSON做为响应内容的数据格式十分灵巧，而且不需要设置数据格式。但它的语法过于严谨，并且eval函数存在风险，比如服务器发送了一个无限循环的JSON内容…。
若应用程序不需要与其他应用程序共享数据的时候，使用 HTML 片段来返回数据是最简单的。
如果数据需要重用，JSON 文件是个不错的选择，其在性能和文件大小方面有优势。
当远程应用程序未知时，XML 文档是首选，因为 XML 是 web 服务领域的 “世界语”。
四、使用JQuery操作AJAX
使用JQuery操作AJAX十分简便，在 jQuery 中最底层的方法是$.ajax()，第二层是load()，$.get() 和 $.post()，第三层是 $.getScript() 和 $.getJSON()。
1.load方法
load(url, [data], [callback])，它前将响应信息中的HTML数据直接插入到DOM中。比如$(“#id”).load(url,data,callbackfunc);直接将响应信息插入到id指向的元素节点中。
我们也可以使用选择器或过滤器来选取响应数据中的某一部分内容，方法是在url参数后边加上过滤器，中间使用空格分隔。如，$(“#id”).load(url+” ”+”a:first”,data,callbackfunc);，就是选取返回信息中的第一个a元素插入到id指定的元素中。
data与callback可以根据需要指定或不指定。当指定data时，load函数会设置请求方式为post，否则为get。Callbackfunc在处理完成才能继续的操作，这个回调函数有三个参数：代表请求返回内容的 data、代表请求状态的 textStatus 对象和 XMLHttpRequest 对象。
2.get或post方法
get()和post()方法使用get和post方式来进行异步请求。它的结构是：get(url, [data], [callback], [type]);和post(url, [data], [callback], [type]);。
它们的回调函数只有两个参数：data代表返回的内容，可以是XML文档、JSON 文件或HTML片段等；textstatus代表请求状态，其值可能为：succuss、error、notmodify、timeout 四种。
get()和post()方法是JQuery中的全局函数，而find()等方法都是对JQuery对象进行操作的方法。
（具体细节可以查看JQuery的帮助手册）
3.序列化元素
JQuery为准备“发送到服务器的 key/value 数据”提供了一个简化的方法：serialize()，该方法作用于一个JQuery对象，能将DOM元素内容序列化为字符串，用于 Ajax 请求。
比如，我们有一个登陆表单：
$.get(“ajax/login”,{“username”:$(“#username”).val(),”password”:$(“#password”).val()},function(data,textStatus){alert(data)});
如果这是一个用户注册的表单呢？需要手动填写所有这些信息？No，serialize可以帮我们解决这个问题。如下：
$.get(“ajax/login”,$(“#loginform”).serialize() ,function(data,textStatus){alert(data)});
OK，这样就搞定了。Serialize不仅可以用于Form表单，还可以用在其他有“key/value”的地方。
使用 serialize() 方法可以自动完成对参数的 url 编码。
因为该方法作用于JQuery 对象, 所以不光只要表单能使用，其它选择器选取的元素也能使用它。
五、其他
JQuery BlockUI Plugin一个比较实用的JQuery插件，将用户向服务器提交请求时，它会独占整个页面并显示“Please wait…”。直到服务器响应完成时，它才退出显示，将页面交还给用户。我们只需要在“$(function(){…}”中添加下面两句代码即可，别忘记引入插件的js文件哦！
| $().ajaxStart($.blockUI); $().ajaxStop($.unblockUI); |
Ok！加油！