ajax入门详解

原文地址：http://04101334.iteye.com/blog/631257

①先看一个实例

在开始正式讲解Ajax之前，首先让我们先来看看Google Map使用Ajax改善其产品设计的效果。

1．在浏览器地址栏中输入http://maps.google.com打开Google Map的界面。

2．在页面顶端的搜索框中输入“China”，单击“Search”按钮。

3．单击地图右上角的“Satellite”按钮，切换到卫星界面。

4．调整地图左上角的尺寸，方法或者缩小当前区域。可以看到，地图区域的图象根据标尺的位置快速的变换。

5．按住鼠标左键，拖拽地图，地图区域的图象随着鼠标的移动而移动这个过程的图象是实时更新的。效果如下图所。

由上可以明显的看出，当用户拖动地图进行操作的时候，Web页上的地图立即发生相应的变化，页面却没有刷新，当按住鼠标左键移动地图的时候，地图跟着移动，这个过程是快速的，而期间用户没有想服务器提交表单或和单击一个超链接。如果用传统的Web应用程序交互思维来理解，这个过程是难以理解的，这正是Ajax的魅力。

②什么是Ajax?

在研究ajax之前首先让我们先来讨论一个问题——什么是Web 2.0。听到Web 2.0这个词的时候，应该首先问一问“Web 1.0是什么？”虽然很少听人提到Web 1.0，实际上它指的就是具有完全不同的请求和响应模型的传统Web。比如，到hdu.edu.cn网站上点击一个按钮。就会对服务器发送一个请求，然后响应再返回到浏览器。该请求不仅仅是新内容和项目列表，而是另一个完整的HTML页面。因此当Web浏览器用新的HTML页面重绘时，可能会看到闪烁或抖动。事实上，通过看到的每个新页面可以清晰地看到请求和响应。
　　Web 2.0（在很大程度上）消除了这种看得见的往复交互。比如在Google Maps上，你可以拖动地图，放大和缩小，只有很少的重绘操作。当然这里仍然有请求和响应，只不过都藏到了幕后。作为用户，体验更加舒适，感觉很像桌面应用程序。这种新的感受和范型就是当有人提到Web 2.0时您所体会到的。
　　需要关心的是如何使这些新的交互成为可能。显然，仍然需要发出请求和接收响应，但正是针对每次请求/响应交互的HTML重绘造成了缓慢、笨拙的Web交互的感受。因此很清楚，我们需要一种方法使发送的请求和接收的响应只包含需要的数据而不是整个HTML页面。惟一需要获得整个新HTML页面的时候就是希望用户看到新页面的时候。
　　但多数交互都是在已有页面上增加细节、修改主体文本或者覆盖原有数据。这些情况下，Ajax和Web 2.0方法允许在不更新整个HTML页面的情况下发送和接收数据。对于那些经常上网的人，这种能力可以让您的应用程序感觉更快、响应更及时，让他们不时地光顾您的网站。

因此在这里，我们是时候可以对ajax做出一个完整的解释了，Adaptive Path公司的Jesse James Garrett这样定义Ajax：

　　Ajax不是一种技术。实际上，它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含：

• 基于XHTML和CSS标准的表示；
• 使用Document Object Model进行动态显示和交互；
• 使用XMLHttpRequest与服务器进行异步通信；
• 使用JavaScript绑定一切。

这非常好，但为什么要以Ajax命名呢？其实术语Ajax是由Jesse James Garrett创造的，他说它是“Asynchronous JavaScript + XML的简写”。

③ Ajax工作原理

通过上述的定义，我们应该已经知道Ajax的组成了，即他是由XHTML，XML，CSS，DOM，XMLHttpRequest,JavaScript等技术综合而成的，然而，真正使用Ajax能实现异步通信，要真正实现这种绚丽的奇迹，必须非常熟悉一个JavaScript对象，即XMLHttpRequest。因此我们要了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始。

下面给出将要用于该对象的很少的几个方法和属性。

　 ·open()：建立到服务器的新请求。
　 ·send()：向服务器发送请求。·abort()：退出当前请求。
　 ·readyState：提供当前HTML的就绪状态。
　 .responseText：服务器返回的请求响应文本。

.onreadystatechange:回调方法

　 ·responseXML：服务器返回的请求响应XML形式组织的文本。

一、下面我们简单的介绍一下这几个方法的作用。

1.创建一个XMLHttpRequest

首先需要创建一个新变量并赋给它一个XMLHttpRequest对象实例。这在JavaScript中很简单，只要对该对象名使用new关键字即可，如下代码所示。

＜script language="javascript" type="text/javascript"＞
　var request = new XMLHttpRequest();
＜/script＞
　　在JavaScript中用var创建一个变量，给它一个名字（如“request”），然后赋给它一个新的XMLHttpRequest实例。此后就可以在函数中使用该对象了。
　　错误处理
　　在实际上各种事情都可能出错，而上面的代码没有提供任何错误处理。较好的办法是创建该对象，并在出现问题时优雅地退出。比如，任何较早的浏览器都不支持XMLHttpRequest，您需要让这些用户知道有些地方出了问题。下面js代码通过创建getXMLHttpRequest()方法说明如何创建该对象。

代码1：一个详细的XMLHttpRequest对象的创建

＜script language="javascript" type="text/javascript"＞

function getXMLHttpRequest(){
　var request = false;
　try {

　request = new XMLHttpRequest();
　} catch (trymicrosoft) {
　　try {
　　　request = new ActiveXObject("Msxml2.XMLHTTP");
　　} catch (othermicrosoft) {
　　　try {
　　　　request = new ActiveXObject("Microsoft.XMLHTTP");
　　　} catch (failed) {
　　　　request = false;
　　　}
　　}
　return request;

}
＜/script＞
　　一定要理解这些步骤：
　　创建一个新变量request并赋值false。后面将使用false作为判定条件，它表示还没有创建XMLHttpRequest对象。
　　·增加try/catch块：
　　·尝试创建XMLHttpRequest对象。
　　　　1、如果失败（catch (failed)）则保证request的值仍然为false。
　　　　2、检查request是否仍为false（如果一切正常就不会是false）。
　　·如果出现问题则request返回false。

此外，在上面的代码中，我们是不是注意到了一个问题，就是当request = new XMLHttpRequest();出现异常的时候，在catch语句中我们用了request = new ActiveXObject("Msxml2.XMLHTTP");和request = new ActiveXObject("Microsoft.XMLHTTP");等语句进行对象获取，这是针对IE浏览器而进行的操作，因为IE浏览器对XMLHttpRequest版本有不同的称呼。事实上，它将其称为几种不同的东西。如果使用较新版本的Internet Explorer，则需要使用对象Msxml2.XMLHTTP，而较老版本的Internet Explorer则使用Microsoft.XMLHTTP。我们需要支持这两种对象类型（同时还要支持非Microsoft浏览器）。

2.用XMLHttpRequest发送请求
　　得到请求对象之后就可以进入请求/响应循环了。记住，XMLHttpRequest惟一的目的是让您发送请求和接收响应。其他一切都是JavaScript、CSS或页面中其他代码的工作：改变用户界面、切换图像、解释服务器返回的数据。准备好XMLHttpRequest之后，就可以向服务器发送请求了。
　　Ajax采用一种沙箱安全模型。因此，Ajax代码（具体来说就是XMLHttpRequest对象）只能对所在的同一个域发送请求。如果让Ajax代码在www.hdu.edu.cn上运行，则必须www.hdu.edu.cn中运行的脚本发送请求。
　　设置服务器URL
　　首先要确定连接的服务器的URL。这并不是Ajax的特殊要求，但仍然是建立连接所必需的。多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该URL。比如，下列JavaScript代码获取电话号码字段的值并用其构造URL。

代码2：　建立请求URL

＜
function getCustomerInfo() {
　var phone = document.getElementById("phone").value;
　var url = "/cgi-local/lookupCustomer.jsp?phone=" + escape(phone);
}
＜/script＞
　　首先，代码创建了一个新变量phone，并把ID为“phone”的表单字段的值赋给它。下列代码展示了这个表单的XHTML，其中可以看到phone字段及其id属性。　　

代码3：Break Neck Pizza表单

＜body＞
　＜form action="POST"＞
　　＜p＞Enter your phone number:
　　　＜input type="text" size="14" name="phone" id="phone" onChange="getCustomerInfo();" /＞/p＞Your order will be delivered to:＜div id="address"＞＜/div＞Type your order in here:＜p＞＜textarea name="order" rows="6" cols="50" id="order"＞＜/textarea＞＜input type="submit" value="Order Pizza" id="submit" /＞＜/form＞
＜/body＞
　　还要注意，当用户输入电话号码或者改变电话号码时，将触发getCustomerInfo()方法。该方法取得电话号码并构造存储在url变量中的URL字符串。由于Ajax代码是沙箱型的，因而只能连接到同一个域，实际上URL中不需要域名。该例中的脚本名为/cgi-local/lookupCustomer.jsp。最后，电话号码作为GET参数附加到该脚本中："phone=" + escape(phone)。　

3.打开请求

有了要连接的URL后就可以配置请求了。可以用XMLHttpRequest对象的open()方法来完成。该方法有五个参数：
　　·request-type：发送请求的类型。典型的值是GET或POST，但也可以发送HEAD请求。
　　·url：要连接的URL。·asynch：如果希望使用异步连接则为true，否则为false。该参数是可选的，默认为true。·username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。·password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。
　　通常使用其中的前三个参数。事实上，即使需要异步连接，也应该指定第三个参数为“true”。这是默认值，但坚持明确指定请求是异步的还是同步的更容易理解。
　　将这些结合起来，通常会得到下列所示的一行代码。

代码4 getCustomerInfo()方法的改进：

function getCustomerInfo() {
　var phone = document.getElementById("phone").value;
var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
　request.open("GET",url,true);
}
　　open()是打开吗？
　　我们对open()方法到底做什么没有达成一致。但它实际上并不是 打开一个请求。如果监控XHTML/Ajax页面及其连接脚本之间的网络和数据传递，当调用open()方法时将看不到任何通信。

　　一旦设置好了URL，其他就简单了。多数请求使用GET就够了，再加上URL，这就是使用open()方法需要的全部内容了。

4.发送请求
　　一旦用open()配置好之后，就可以发送请求了。幸运的是，发送请求的方法的名称要比open()适当，它就是send()。
　　send()只有一个参数，就是要发送的内容。但是在考虑这个方法之前，回想一下前面已经通过URL本身发送过数据了：

var url = "/cgi-local/lookupCustomer.jsp?phone=" + escape(phone);
　　虽然可以使用send()发送数据，但也能通过URL本身发送数据。事实上，GET请求（在典型的Ajax应用中大约占80%）中，用URL发送数据要容易得多。如果需要发送安全信息或XML，可能要考虑使用send()发送内容（关于如何使用POST方式安全的发送数据，请参考我的另外一篇文章--POST方式发送ajax请求详解）。如果不需要通过send()传递数据，则只要传递null作为该方法的参数即可。

代码5getCustomerInfo()方法的进一步改进：

var url = "/cgi-local/lookupCustomer.php?phone=" + escape(phone);
　request.send(null);
}
5.指定回调方法
　　现在我们所做的只有很少一点是新的、革命性的或异步的。必须承认，open()方法中“true”这个小小的关键字建立了异步请求。但是Ajax和Web 2.0最大的秘密是什么呢？秘密就在于XMLHttpRequest的一个简单属性onreadystatechange。
　　首先一定要理解这些代码中的流程（如果需要请回顾代码5）。建立其请求然后发出请求。此外，因为是异步请求，所以JavaScript方法（例子中的getCustomerInfo()）不会等待服务器。因此代码将继续执行，就是说，将退出该方法而把控制返回给表单。用户可以继续输入信息，应用程序不会等待服务器。
　　这就提出了一个有趣的问题：服务器完成了请求之后会发生什么？答案是什么也不发生，至少对现在的代码而言如此！显然这样不行，因此服务器在完成通过XMLHttpRequest发送给它的请求处理之后需要某种指示说明怎么做。
　　现在onreadystatechange属性该登场了。该属性允许指定一个回调函数。回调允许服务器（猜得到吗？）反向调用Web页面中的代码。它也给了服务器一定程度的控制权，当服务器完成请求之后，会查看XMLHttpRequest对象，特别是onreadystatechange属性。然后调用该属性指定的任何方法。之所以称为回调是因为服务器向网页发起调用，无论网页本身在做什么。比方说，可能在用户坐在椅子上手没有碰键盘的时候调用该方法，但是也可能在用户输入、移动鼠标、滚动屏幕或者点击按钮时调用该方法。它并不关心用户在做什么。这就是称之为异步的原因：用户在一层上操作表单，而在另一层上服务器响应请求并触发onreadystatechange属性指定的回调方法。
　　在JavaScript中引用函数
　　JavaScript是一种弱类型的语言，可以用变量引用任何东西。因此如果声明了一个函数updatePage()，JavaScript也将该函数名看作是一个变量。换句话说，可用变量名updatePage在代码中引用函数。
　代码6.设置回调方法

request.onreadystatechange = updatePage;
　request.send(null);
}
　　需要特别注意的是该属性在代码中设置的位置——它是在调用send()之前设置的。发送请求之前必须设置该属性，这样服务器在回答完成请求之后才能查看该属性。

现在剩下的就只有编写updatePage()方法了。

代码7.检查就绪状态

function updatePage() {
　if (request.readyState == 4)
　 if (request.status == 200)
　　 alert("Server is done!");
}

其中request.readyState是HTTP的就绪状态，在这里我们大概需要了解这5种状态，关于其详细意义，我们在这就不在做深入研究了。

request.readyState == 0：请求没有发出（在调用open()之前）。
　　request.readyState == 1：请求已经建立但还没有发出（调用send()之前）。request.readyState == 2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）。 request.readyState ==3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。request.readyState == 4：响应已完成，可以访问服务器响应并使用它。

而接下来的request.status为HTTP状态码，为200的时候为正常，400多的时候为客户端的错误，500多的时候为服务器端的服务，如果您对这方面的知识感兴趣，不妨可以去借一些HTTP协议之类的书看看，这里也不做深入研究了。

6. 读取响应文本

当我们成功做完上面的一切时，服务器最后给出了处理的响应，我们可以把响应的内容以responseText或者responseXML形式组织返回给客户端供其调用。responseXML的话，要涉及到对XML的操作，因为jdk本身对XML的操作比较弱，不过我们可以运用第三方的包org.jdom（网上有的下载），如果大家有兴趣，可以自己去研究，这里我们简单的给出一个responseXML的用法的例子

代码8. responseText的简单运用

if (request.readyState == 4) {
　　if (request.status == 200) {
　　　var response = request.responseText.split("|");
　　　document.getElementById("order").value = response[0];
　　　document.getElementById("address").innerHTML = response[1].replace(/n/g,"");
　　} else
　　　alert("status is " + request.status);
　}
}
到现在，相信大家一定对Ajax有了一个系统的了解了吧，仅仅只是讲了Ajax的一些最基础的东西，如果您对这个有兴趣，还可以进行进一步的深入研究。

二、 Ajax应用场景

然而Ajax不是万能的，在适合的场合使用Ajax，才能充分发挥它的长处，改善系统性能和用户体验，绝不可以为了技术而滥用。Ajax的特点在于异步交互，动态更新web页面，因此它的适用范围是交互较多，频繁读取数据的web应用。现在来看几个Ajax的应用实例，读者可以了解如何使用Ajax技术改进现有的web应用系统。

场景1.数据验证

在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。数据验证通常有两种方式：一种是直接填写，然后提交表单，这种方式需要将这个页面提交到服务器端进行验证，整个过程不仅时间长而且造成了服务器不必要的负担；第二种方式是改进了的验证过程，用户可以通过点击相应的验证按钮，打开新窗口查看验证结果，但是这样需要新开一个浏览器窗口或者对话框，还需要专门编写验证的页面，比较耗费系统资源。而使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不加重服务器负担。

场景2.按需取数据

分类树或者树形结构在web应用系统中使用得非常广泛，例如部门结构，文档得分类结构常常使用树形空间呈现。以前每次对分类树得操作都会引起页面重载，为了避免这种情况出现，一般不采用每次调用后台得方式，而是一次性将分类结果中得数据一次性读取出来并写入数组，然后根据用户的操作，用JavaScript来控制节点的呈现，这样虽然解决了操作响应速度，不重复载入页面以及避免向服务器频繁发送请求的问题，但是如果用户不对分类进行操作或者只对分类树中的一部分数据进行操作的话（这种情况很普遍的），那么读取的数据中就会有相当大的冗余，浪费了用户的资源。特别是在分类结构复杂，数据庞大的情况下，这种弊端就更加明显了。现在应用Ajax改进分类树的实现机制。在初始化页面时，只获取第一级子分类的数据并且显示；当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据；如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。页面会根据用户的操作向服务器请求它所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重载所有内容，只更新需要更新的那部分内容即可，相对于以前后台处理并且重载的方式，大大缩短了用户的等待时间。

场景3.自动更新页面

在web应用中有很多数据的变化时十分迅速的，例如最新的热点新闻，天气预报以及聊天室内容等。在Ajax出现之前，用户为了即使了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能（大多数聊天室页面就是这样做的）。有可能会发生这种情况；有一段时间网页的内容没有发生任何变化，但是用户并不知道，仍然不断的刷新页面；或者用户失去了耐心，放弃了刷新页面，却很有可能在此有新的消息出现，这样就错过了第一时间得到消息的机会。应用Ajax可以改善这种这种情况，页面加载以后，会通过Ajax引擎在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息。如果有则将新的数据（而不是所有数据）下载并且在页面上进行动态的更新，通过一定的方式通知用户（实现这样的功能正是JavaScript的强项）。这样即避免了用户不断手工刷新页面的不便，也不会因为重复刷新页面造成资源浪费。

三、结束语

完成了，真是累死了，经过大量的翻阅ajax方面的书籍以及网上的一些博文，花了几个礼拜的时间终于整理写成了这篇文章，但是这里仅仅只是讲了一点Ajax方面的基础，真正要灵活的运用Ajax，我们还必须熟练的掌握XML，javascript，DOM等许多技术，因此我希望对Ajax有兴趣的朋友一同加入到探索研究Ajax队伍行列中，使Ajax的明天更加繁荣强大。

注：在这里非常感谢博主写的这篇文章，让我们这些菜鸟队ajax有了一个简单的了解，向博主致敬！

原文中，博主把文章分为了2个部分，我这里就直接全都复制过来了，方便查看。

原文地址：

①http://04101334.iteye.com/blog/631257

②http://04101334.iteye.com/blog/631258

如需转载，请注明出处，谢谢！