AJAX

AJAX即“AsynchronousJavascript+XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX=异步JavaScript和XML（标准通用标记语言的子集）。AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用AJAX）如果需要更新内容，必须重载整个网页面。有很多使用AJAX的应用程序案例：新浪微博、Google地图、开心网等等。

1、名称来源

AJAX指异步JavaScript及XML（AsynchronousJavascript+XML）。

国内翻译（仅音译）常为“阿贾克斯”和阿贾克斯足球队同音。Web应用的交互如Flickr，Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在InternetExplorer5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

2、应用优势

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。

使用Javascript向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的JavaScript可在不重载页面的情况与Web服务器交换数据。

AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。

AJAX可使因特网应用程序更小、更快，更友好。

AJAX是一种独立于Web服务器软件的浏览器技术。AJAX基于下列Web标准：

JavaScriptXMLHTMLCSS在AJAX中使用的Web标准已被良好定义，并被所有的主流浏览器支持。AJAX应用程序独立于浏览器和平台。

Web应用程序较桌面应用程序有诸多优势；它们能够涉及广大的用户，它们更易安装及维护，也更易开发。

不过，因特网应用程序并不像传统的桌面应用程序那样完善且友好。

通过AJAX，因特网应用程序可以变得更完善，更友好。

3、应用案例

该技术在1998年前后得到了应用。允许客户端脚本发送HTTP请求（XMLHTTP）的第一个组件由OutlookWebAccess小组写成。该组件原属于微软ExchangeServer，并且迅速地成为了InternetExplorer4.0的一部分。部分观察家认为，OutlookWebAccess是第一个应用了Ajax技术的成功的商业应用程序，并成为包括Oddpost的网络邮件产品在内的许多产品的领头羊。但是，2005年初，许多事件使得Ajax被大众所接受。Google在它著名的交互应用程序中使用了异步通讯，如Google、Google地图、Google搜索框架应用及对ajax框架的思考建议、Gmail等。Ajax这个词由《Ajax:ANewApproachtoWebApplications》一文所创，该文的迅速流传提高了人们使用该项技术的意识。另外，对Mozilla/Gecko的支持使得该技术走向成熟，变得更为易用。

AJAX前景非常乐观，可以提高系统性能，优化用户界面。AJAX现有直接框架AjaxPro，可以引入AjaxPro.2.dll文件，可以直接在前台页面JS调用后台页面的方法。但此框架与FORM验证有冲突。另外微软也引入了AJAX组件，需要添加AjaxControlToolkit.dll文件，可以在控件列表中出现相关控件。

4、开发模式

许多重要的技术和AJAX开发模式可以从现有的知识中获取。例如，在一个发送请求到服务端的应用中，必须包含请求顺序、优先级、超时响应、错误处理及回调，其中许多元素已经在Web服务中包含了。同时，随着技术的成熟还会有许多地方需要改进，特别是UI部分的易用性。

AJAX开发与传统的C/S开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于AJAX依赖浏览器的JavaScript和XML，浏览器的兼容性和支持的标准也变得和JavaScript的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。

综合各种变化的技术和强耦合的客户服务端环境，AJAX提出了一种新的开发方式。AJAX开发人员必须理解传统的MVC架构，这限制了应用层次之间的边界。同时，开发人员还需要考虑C/S环境的外部和使用AJAX技术来重定型MVC边界。最重要的是，AJAX开发人员必须禁止以页面集合的方式来考虑Web应用而需要将其认为是单个页面。一旦UI设计与服务架构之间的范围被严格区分开来后，开发人员就需要更新和变化的技术集合了。

5、开发框架

随着AJAX迅速地引人注目起来，我想开发人员对这种技术的期待也迅速地增加。就像任何新技术，AJAX的兴旺也需要一整个开发工具/编程语言及相关技术系统来支撑。

6、调试兼容

调试问题

在实际构建AJAX应用中，你需要的不只是文本编辑器。既然JavaScript是非编译的，它可以容易地编写和运行在浏览器中。然而，许多工具提供了有用的扩展如语法高亮和智能完成。

不同的IDE提供了对JavaScript支持的不同等级。来自JetBrains的IntelliJIDEA是一个用来JavaScript开发的更好的IDE，虽然许多开发人员也喜欢Microsoft’sVisualStudio产品（允诺会在最新的版本中改善对AJAX的支持）。Eclipse包含了两个免费的JavaScript编辑器插件和一个商业的来自ActiveStat的KomodoIDE。

另一个JavaScript和AJAX开发中的问题是调试困难。不同的浏览器提供不同的通常是隐藏的运行时错误信息，而JavaScript的缺陷如双重变量赋值（通常是由于缺少数据类型）使得调试更加困难。在AJAX的开发中，调试就更复杂了，因为其需要标识究竟是客户端还是服务端产生的错误。在过去，JavaScript调试的方法是删除所有代码然后一行行的增加直到错误出现。现在，更多开发人员回到为IE准备的MicrosoftScriptDebugger和为Mozilla浏览器准备的Venkman。

浏览器兼容性

JavaScript编程的最大问题来自不同的浏览器对各种技术和标准的支持。构建一个运行在不同浏览器（如IE和火狐）是一个困难的任务。因此几种AJAXJavaScript框架或者生成基于服务端逻辑或标记库的JavaScript，或者提供符合跨浏览器AJAX开发的客户端JavaScript库。一些流行的框架包括：Jquery,Backbase,Bitkraft,Django,DOJO,DWR,MochiKit,Prototype,Rico,Sajax,Sarissa,andScript.

这些框架给开发人员更多的空间使得他们不需要担心跨浏览器的问题。虽然这些框架提升了开发人员构建应用的能力，但由于厂商已经开发了更细节的用户界面的打包组件解决方案，因此在AJAX组件市场中需要考虑一些其他因素。例如提供通用用户界面的组件如组合框和数据栅格的几个厂商，都可以被用来在应用中创建良好的通过类似电子数据表方式来查看和编辑数据的体验。但这些组件不仅是封装了组件的用户界面而且包括与服务端数据的通讯方式，这些组件通常使用基于标记方式来实现如或JSF控件。

7、主要问题

浏览器的兼容性问题

Ajax在本质上是一个浏览器端的技术，首先面临无可避免的第一个问题即是浏览器的兼容性问题。各家浏览器对于JavaScript/DOM/CSS的支持总有部分不太相同或是有Bug，甚至同一浏览器的各个版本间对于JavaScript/DOM/CSS的支持也有可能部分不一样。这导致程序员在写Ajax应用时花大部分的时间在调试浏览器的兼容性而非在应用程序本身。因此，目前大部分的Ajax链接库或开发框架大多以js链接库的形式存在，以定义更高阶的JavaScriptAPI、JavaScript对象（模板）、或者JavaScriptWidgets来解决此问题。如prototype.js。

业务逻辑分散

Ajax技术之主要目的在于局部交换客户端及服务器之间的数据。如同传统之主从架构，无可避免的会有部分的业务逻辑会实现在客户端，或部分在客户端部分在服务器。由于业务逻辑可能分散在客户端及服务器，且以不同之程序语言实现，这导致Ajax应用程序极难维护。如有用户接口或业务逻辑之更动需求，再加上前一个JavaScript/DOM/CSS之兼容性问题，Ajax应用往往变成程序员的梦魇。针对业务逻辑分散的问题，Ajax开发框架大致可分为两类：

将业务逻辑及表现层放在浏览器，数据层放在服务器：因为所有的程序以JavaScript执行在客户端，只有需要数据时才向服务器要求服务，此法又称为胖客户端（fatclient）架构。服务器在此架构下通常仅用于提供及储存数据。此法的好处在于程序员可以充分利用JavaScript搭配业务逻辑来做出特殊的用户接口，以符合终端用户的要求。但是问题也不少，主因在第一，JavaScript语言本身之能力可能不足以处理复杂的业务逻辑。第二，JavaScript的执行效能一向不好。第三，JavaScript访问服务器数据，仍需适当的服务器端程序之配合。第四，浏览器兼容性的问题又出现。有些Ajax开发框架如DWR企图以自动生成JavaScript之方式来避免兼容的问题，并开立通道使得JavaScript可以直接调用服务器端的Java程序来简化数据的访问。但是前述第一及第二两个问题仍然存在，程序员必须费相当的力气才能达到应用程序之规格要求，或可能根本无法达到要求。

将表现层、业务逻辑、及数据层放在服务器，浏览器仅有用户接口引擎（UserInterfaceengine）；此法又称为瘦客户端（thinclient）架构，或中心服务器（server-centric）架构。浏览器的用户接口引擎仅用于反映服务器的表现层以及传达用户的输入回到服务器的表现层。由浏览器所触发之事件亦送回服务器处理，根据业务逻辑来更新表现层，然后反映回浏览器。因为所有应用程序完全在服务器执行，数据及表现层皆可直接访问，程序员只需使用服务器端相对较成熟之程序语言（如Java语言）即可，不需再学习JavaScript/DOM/CSS，在开发应用程序时相对容易。缺点在于用户接口引擎以及表现层通常以标准组件的形式存在，如需要特殊组件（用户接口）时，往往须待原框架之开发者提供，缓不济急。如开源码Ajax开发框架ZK目前支持XUL及XHTML组件，尚无XAML之支持。

多进程或多线程的竞争问题

Ajax是以异步的方式向服务器提交需求。对服务器而言，其与传统的提交窗体需求并无不同，而且由于是以异步之方式提交，如果同时有多个Ajax需求及窗体提交需求，将无法保证哪一个需求先获得服务器的响应。这会造成应用程序典型的多进程（process）或多线程（thread）的竞争（racing）问题。程序员因此必须自行处理或在JavaScript里面动手脚以避免这类竞争问题的发生（如Ajax需求未响应之前，先disable送出按钮），这又不必要的增加了程序员的负担。目前已知有自动处理此问题之开发框架似乎只有ZK。

8、基础应用

创建XMLHttpRequest方法

XMLHttpRequest类首先由InternetExplorer以ActiveX对象引入，被称为XMLHTTP。后来Mozilla﹑Netscape﹑Safari和其他浏览器也提供了XMLHttpRequest类，不过它们创建XMLHttpRequest类的方法不同。

对于InternetExplorer浏览器：

xmlhttp_request=newActiveXObject("Msxml2.XMLHTTP.3.0");//3.0或4.0,5.0

xmlhttp_request=newActiveXObject("Msxml2.XMLHTTP");

xmlhttp_request=newActiveXObject("Microsoft.XMLHTTP");

由于在不同InternetExplorer浏览器中XMLHTTP版本可能不一致，为了更好的兼容不同版本的InternetExplorer浏览器，因此我们需要根据不同版本的InternetExplorer浏览器来创建XMLHttpRequest类，上面代码就是根据不同的InternetExplorer浏览器创建XMLHttpRequest类的方法。

对于Mozilla﹑Netscape﹑Safari等浏览器

创建XMLHttpRequest方法如下：xmlhttp_request=newXMLHttpRequest();

如果服务器的响应没有XMLmime-typeheader，某些Mozilla浏览器可能无法正常工作。为了解决这个问题，如果服务器响应的header不是text/xml，可以调用其它方法修改该header。

xmlhttp_request=newXMLHttpRequest();

xmlhttp_request.overrideMimeType('text/xml');

在实际应用中，为了兼容多种不同版本的浏览器，一般将创建XMLHttpRequest类的方法写成如下形式：

try{

if(window.ActiveXObject){

for(vari=5;i;i--){

try{

if(i==2){

xmlhttp_request=newActiveXObject("Microsoft.XMLHTTP");}

else{

xmlhttp_request=newActiveXObject("Msxml2.XMLHTTP."+i+".0");

xmlhttp_request.setRequestHeader("Content-Type","text/xml");

xmlhttp_request.setRequestHeader("Charset","gb2312");}

break;}

catch(e){

xmlhttp_request=false;}}}

elseif(window.XMLHttpRequest)

{xmlhttp_request=newXMLHttpRequest();

if(xmlhttp_request.overrideMimeType)

{xmlhttp_request.overrideMimeType('text/xml');}}}

catch(e){xmlhttp_request=false;}

发送请求

可以调用HTTP请求类的open（）和send（）方法，如下所示：

xmlhttp_request.open('GET',URL,true);

xmlhttp_request.send(null);

open（）的第一个参数是HTTP请求方式—GET，POST或任何服务器所支持的您想调用的方式。按照HTTP规范，该参数要大写；否则，某些浏览器（如Firefox）可能无法处理请求。

第二个参数是请求页面的URL。

第三个参数设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。这就是"AJAX"中的"A"。

服务器的响应

这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示：

xmlhttp_request.onreadystatechange=FunctionName;

FunctionName是用JavaScript创建的函数名，注意不要写成FunctionName（），当然我们也可以直接将JavaScript代码创建在onreadystatechange之后，例如：

xmlhttp_request.onreadystatechange=function(){

//JavaScript代码段

};

首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest提供了readyState属性来对服务器响应进行判断。

readyState的取值如下：

0（未初始化）

1（正在装载）

2（装载完毕）

3（交互中）

4（完成）

所以只有当readyState=4时，一个完整的服务器响应已经收到了，函数才可以处理该响应。具体代码如下：

if(http_request.readyState==4){//收到完整的服务器响应}

else{//没有收到完整的服务器响应}

当readyState=4时，一个完整的服务器响应已经收到了，接着，函数会检查HTTP服务器响应的状态值。完整的状态取值可参见W3C文档。当HTTP服务器响应的值为200时，表示状态正常。

处理从服务器得到的数据

有两种方式可以得到这些数据：

(1)以文本字符串的方式返回服务器的响应

(2)以XMLDocument对象方式返回响应