基于AJAX技术的WEB开发模式的研究与应用

山西师范大学学报（自然科学版）　第２４卷第４期　２０１０年１２月　Ｊｏｕｒｎａｌ　ｏｆ　Ｓｈａｎｘｉ　Ｎｏｒｍａｌ　Ｕｎｉｖｅｒｓｉｔｙ　Ｎａｔｕｒａｌ　Ｓｃｉｅｎｃｅ　Ｅｄｉｔｉｏｎ　Ｖｏ１．２４　Ｎｏ．４　Ｄｅｅ．２０１０　文章编号：１００９４４９０（２０１０）０４０４－００５４－０４　基于ＡＪＡＸ技术的ＷＥＢ开发模式的研究与应用　王琦　（运城学院计算机科学与技术系，山西运城０４４０００）　摘要：ＡＪＡＸ是一套由诸多现有技术组合而成的一种新的设计模式．它允许ＷＥＢ页面在不刷新整个　页面的情况下与服务器端进行通信，可以提供更好的用户体验．文章首先对两种开发模式做了比较，阐　述了ＡＪＡＸ的工作原理，然后给出一个经典的ＡＪＡＸ应用，最后对ＡＪＡＸ技术做出总结和展望．　关键词：ＡＪＡＸ；ＷＥＢ开发；同步；异步　中图分类号：ＴＰ３１１　文献标识码：Ａ　０　引言　传统ＷＥＢ开发模式是一种同步概念，也就是说用户只有在当前请求完成后才能发出新的请求，用户　行为和服务器行为完全是一种同步的关系；而基于ＡＪＡｘ技术的ＷＥＢ开发模式采用的是一种异步概念，　它充分挖掘了ＷＥＢ浏览器的潜力，使得ＷＥＢ应用程序的表现能力更加丰富，更加智能，交互能力更强，　响应速度更快¨　．　１　ＡＪＡＸ技术　１．１基于ＭＡＸ技术的ＷＥＢ开发模式　基于ＡＪＡＸ的ＷＥＢ开发模式是一种异步概念．这意味着客户端和服务器端不必再相互等待，而是进　行一种并发的操作，用户在发送请求以后可以继续当前工作，包括浏览或提交信息．在服务器响应完成之　后，ＡＪＡＸ引擎会将更新的数据显示给用户看，而用户则根据响应内容来决定自己下一步的行为．　ＡＪＡＸ的工作原理是在用户和服务器间加了一个中间层，使用户操作与服务器响应异步化．这样就把　以前的一些服务器负担的工作转移到客户端，利用客户端通过闲置的处理能力来处理，减轻了服务器和带　宽的负担，达到节约网络带宽，提高页面浏览速度的目的．具体的说就是在客户端和ＷＥＢ服务器端中问　又加入了一个ＡＪＡＸ引擎和一个ＸＭＬ数据缓冲区，它们负责处理一部分数据，当用户再想从服务器获取　数据的时候，只需要发送一小部分请求，服务器端只返回一小部分内容就可以ｒ．这种方式比原来一次把　所有请求发出去，然后所有页面都收回来，在性能上有了很大的提高　ｊ．图１是两种ＷＥＢ开发模式的对　比．　很明显，相对于传统的ＷＥＢ开发模式，基于ＡＪＡＸ的ＷＥＢ开发模式具有以下优点　：　（１）可以按照客户端需要取数，大大减少冗余请求，减轻了服务器的负担．　（２）可以把服务器端的功能转移一部分到客户端，充分发挥客户端Ｐｃ的处理能力，进一步减轻服务　器端负担，节约空间和带宽成本．　（３）无刷新更新页面，减少等待时间．　收稿日期：２０１０４）３—１５　作者简介：王琦（１９７８～），男，山西平陆人，运城学院计算机科学与技术系讲师，硕士，主要从事数据库理论及应用方面的　研究．　

第４期　王琦：基于ＡＪＡＸ技术的ＷＥＢ开发模式的研究与应用　（４）更好的用户体验，使得Ｂ／Ｓ程序的运行越来越接近Ｃ／Ｓ程序的效果．　（５）基于标准化的并被广泛支持的技术，而其组合之后功能更加强大．　……一　……一　……　晤嚣孺………一　用户界面　Ｊ　Ｉ　用户界面　Ｉ　ＨＴＭＬ　ｔ　十　ｃｓｓ　Ｔ　　ｌＡＪＡｘ引擎　ｌ裂惦　…一　ｈｔｔＦ　清求　ＨＴＭＩ　ｃｓｓ数据　书泵…　事话一一　ｗＥＢ服务器　千　１　ｗＥ嘣务器ｌ　十　数据库　ｌ　数据库　ｌ　………一旦　楚趟……一　……一传统ＷＥＢ开始模式　＿月睦蹙奄搏…一…一　ＡＪＡＸＷＥＢ开发模式　图１两种ＷＥＢ开发模式对比　Ｔａｂ．１　Ｔｈｅ　ｃｏｎｔｒａｓｔ　ｂｅｔｗｅｅｎ　ｔｈｅ　ｔｗｏ　ＷＥＢ　ｄｅｖｅｌｏｐｍｅｎｔ　ｐａｔｔｅｒｎｓ　１．２　ＡＪＡＸ技术组成　ＡＪＡＸ不是一个新技术，它是基于ＸＨＴＭＬ、ＣＳＳ、ＤＯＭ、ＪａｖａＳｃｒｉｐｔ、ＸＭＬ、ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ等多种成熟技　术的一种新的设计模式．　（１）ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ对象．ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ对象是ＡＪＡＸ最为核心的一个技术，它正是ＡＪＡＸ技术与　众不同的地方．ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ为运行在浏览器中的ＪａｖａＳｃｒｉｐｔ脚本提供了一种在页面之内与服务器通　信的手段，页面内的ＪａｖａＳｃｒｉｐｔ可以在不刷新页面的情况下从服务器获取数据，或者向服务器提交数据．但　是，该对象并不是一个Ｗ３Ｃ规定的标准技术，所以在不同的浏览器上，创建ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象的方式　并不相同．不过可以使用简单的判断语句保证在浏览器支持的情况下正确创建该对象　Ｊ．　ｖａｒ　ｘｍｌｈｔｔｐ　ｎｕｌｌ；　ｉｆ（ｗｉｎｄｏｗ．ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ）　｛ｘｍｌｈｔｔｐ＝ｎｅｗ　ｘＭＬＨｔｔｐＲｅｑｕｅｓｔ（）；｝／／创建其他浏览器（如ＦｉｒｅＦｏｘ）支持的对象　ｅｌｓｅ　ｉｆ（ｗｉｎｄｏｗ．ＡｃｔｉｖｅＸＯｂｊｅｃｔ）　｛ｘｍｌｈｔｔｐ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ（”Ｍｉｃｒｏｓｏｆｔ．ＸＭＬＨＴＦＰ”）；｝．／／创建ＩＥ支持的对象　（２）ＪａｖａＳｃｒｉｐｔ．ＪａｖａＳｃｒｉｐｔ是一种基于对象的脚本语言，使用它主要用于开发ＷＥＢ应用程序中的客户　端部分；也就是说它被定义为客户端脚本语言，它可以通过操纵ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ对象同数据库进行交互．　（３）ＤＯＭ．ＤＯＭ的全称是文档对象模型（Ｄｏｃｕｍｅｎｔ　Ｏｂｊｅｃｔ　Ｍｏｄｅ１），它被认为是仅次于ＸＭＬＨｔｔｐＲｅｑｕｅｓｔ　对象的ＡＪＡＸ技术中的核心技术．在ＤＯＭ模型里，ＨＴＭＬ标记都被认为是一个对象，例如：ｄｉｖ对象，ｔａｂｌｅ　对象等等．ＤＯＭ模型就规定了这些对象所具有的属性、方法和事件．通过这些性质，可以对一个已经显示　于浏览器的页面进行内容和格式的修改．例如可以通过以下语句利用服务器端返回的数据对ＩＤ为“ｄｉｖ．　Ｔｉｍｅ”的内容进行修改，实现局部内容的刷新．　ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ｄｉｖＴｉｍｅ”）．ｉｎｎｅｒＨＴＭＬ＝ｘｍｌＨｔｔｐ．ｒｅｓｐｏｎｓｅｔｅｘｔ；　（４）ＸＭＬ．ＸＭＬ即为可扩展标记语言（Ｅｘｔｅｎｓｉｂｌｅ　Ｍａｒｋｕｐ　Ｌａｎｇｕａｇｅ）．它提供了一个标准，利用这个标　准，可以根据实际需要定义自己新的标记语言，并为这个标记语言规定它特有的一套标签．用ＸＭＬ表述的　数据和文档，很容易让所有程序共享．　（５）ＸＨＴＭＬ和ＣＳＳ．ＸＨＴＭＬ指扩展超文本标记语言（Ｅｘｔｅｎｓｉｂｌｅ　ＨｙｐｅｒＴｅｘｔ　Ｍａｒｋｕｐ　Ｌａｎｇｕａｇｅ），是一种　为了适应ＸＭＬ而重新改造过的ＨＴＭＬ，相比ＨＴＭＬ，它在设计上更加严密．ＣＳＳ是Ｃａｓｃａｄｉｎｇ　Ｓｔｙｌｅ　Ｓｈｅｅｔｓ　（层叠样式表）的简称．在标准网页设计中ＣＳＳ负责网页内容（ＸＨＴＭＬ）的表现．　ＡＪＡＸ技术是将上述几种成熟的技术按照一定的方式结合起来，通过协作发挥各自的作用：使用　

山西师范大学学报（自然科学版）　ＸＨＴＭＬ和ＣＳＳ标准化呈现；使用ＤＯＭ实现动态显示和交互；使用ＸＭＬ进行数据交换和处理；使用ＸＭ—　ＬＨｔｔｐＲｅｑｕｅｓｔ进行异步数据处理；最后用ＪａｖａＳｃｒｉｐｔ绑定和处理所有数据．　２　ＡＪＡＸ应用一多级联动　多级联动是一个典型的ＷＥＢ应用，采用传统的ＷＥＢ开发模式，任何一级的改变，都需要向服务器提　交整个页面，而服务器实际上只需要其中发生变动的那部分数据，服务器在相应操作执行完后又要把整个　页面回传，而回传页面中发生变化的也只是发生变动的前一级数据对应的下级数据，这样就造成了大量冗　余数据在网络间的传输，会造成整个页面的刷新，用户体验差，效率低；而应用ＡＪＡＸ技术之后，可以完全　规避传统ＷＥＢ开发模式的这些缺点，实现按需取数，局部刷新，用户体验好，效率高．程序执行如图２所　不：　图２多级联动运行界面　Ｔａｂ．２　Ｍｕｌｔｉ—ｌｅｖｅｌ　ｌｉｎｋａｇｅ　ｒｕｎｎｉｎｇ　ｉｎｔｅｒｆａｃｅ　２．１服务器端编码　主要可以包含以下两个过程：　ＩｎｉｔＰａｒｅｎｔ（）．该过程主要实现访问数据库，返回与省相关的数据，然后与第一级列表进行绑定，与传　统ＷＥＢ开发模式基本相同．　ＩｎｉｔＣｈｉｌｄ（）．该过程主要根据浏览器端以异步方式提交的与省相关的数据访问数据库，返回该省对应　的与市相关的数据，然后将该数据回传给浏览器端．　服务器端编码和传统ＷＥＢ开发模式的区别主要是以异步的方式接收和回传数据，编码相对简单，在　此不再列出．　２．２浏览器端编码　ｖａｒ　ｘｍｌＨｔｔｐ＝ｎｅｗ　ＡｃｔｉｖｅＸＯｂｊｅｃｔ（”Ｍｉｃｒｏｓｏｆｔ．ＸＭＬｈｔｔｐ”）；／／假定为ＩＥ浏览器　ｆｕｎｃｔｉｏｎ　ｓｅｌｅｃｔＣｈａｎｇｅ（）　｛ｖａｔ　ｐＮａｍｅ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ＤｒｏｐＰｒｏ”）．ｖａｌｕｅ；　ｖａｒ　ｕｒｌ＝”ｄｅｆａｕｈ３．ａｓｐｘ？ｐＮａｍｅ＝”＋ｅｓｃａｐｅ（ｐＮａｍｅ）；　ｘｍｌＨｔｔｐ．ｏｐｅｎ（”ＧＥＴ”，ｕｒｌ，ｔｒｕｅ）；　ｘｍｌＨｔｔｐ．ｓｅｎｄ（ｎｕｌ１）；　ｘｍｌＨｔｔｐ．ｏｎｒｅａｄｙｓｔａｔｅｃｈａｎｇｅ　＝　ｈａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ；　｝　ｆｕｎｃｔｉｏｎ　ｈａｎｄｌｅＳｔａｔｅＣｈａｎｇｅ（）　｛　ｉｆ（ｘｍｌＨｔｔｐ．ｒｅａｄｙｓｔａｔｅ＝：４　Ｊ　Ｉ　ｘｍｌＨｔｔｐ．ｒｅａｄｙｓｔａｔｅ＝＝”ｃｏｍｐｌｅｔｅ”）　｛ｕｐｄａｔｅＬｉｓｔ（）；｝　｝　ｆｕｎｃｔｉｏｎ　ｕｐｄａｔｅＬｉｓｔ（）　｛ＣｌｅａｒＬｉｓｔ（）；　

第４期　王琦：基于ＡＪＡＸ技术的ＷＥＢ开发模式的研究与应用　ｖａｒ　ｒｅｓｕｌｔｓ＝ｘｍｌＨｔｔｐ．ｒｅｓｐｏｎｓｅＴｅｘｔ．ｓｐｌｉｔ（”，”）；　ｆｏｒ（ｖａｒ　ｉ＝０；ｉ＜ｒｅｓｕｌｔｓ．１ｅｎｇｔｈ一１；ｉ＋＋）　｛ｖａｒ　ｏｐ＝ｒｅｓｕｌｔｓ［ｉ］；　ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ＤｒｏｐＣｉｔｙ”）．ｏｐｔｉｏｎｓ．ａｄｄ（ｎｅｗ　Ｏｐｔｉｏｎ（叩））；　｝　｝　ｆｕｎｃｔｉｏｎ　ＣｌｅａｒＬｉｓｔ（）　｛ｗｈｉｌｅ（ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ＤｒｏｐＣｉｔｙ”）．ｃｈｉｌｄＮｏｄｅｓ．１ｅｎｇｔｈ＞０）　｛ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ（”ＤｒｏｐＣｉｔｙ”）．ｒｅｍｏｖｅＣｈｉｌｄ（ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙＩｄ　（”ＤｒｏｐＣｉｔｙ”）．ｃｈｉｌｄＮｏｄｅｓ［０］）；　｝　｝　浏览器端编码主要包含三个函数：　ｓｅｌｅｃｔＣｈａｎｇｅ（）：负责当第一级选择项发生变化时以异步的方式向服务器提交ｘｍｌＨｔｔｐ请求．ｈａｎｄｌｅＳ—　ｔａｔｅＣｈａｎｇｅ（）：负责监听返回数据，如果数据返回，则调用ｕｐｄａｔｅＬｉｓｔ（）．ｕｐｄａｔｅＬｉｓｔ（）：首先调用ＣｌｅａｒＬｉｓｔ（）　函数清空二级列表，然后将返回数据向二级列表中进行填充．　应用ＡＪＡＸ技术之后，浏览器端向服务器提交的数据是第一级列表发生变动的数据，服务器向浏览器　回传的数据是与第一级列表变动数据的相关数据．很明显，在浏览器和服务器之间传输的数据量大大减　少，效率大大提高．真正实现了按需取数，局部刷新．　３结束语　利用ＡＪＡＸ技术开发出与桌面应用程序相媲美的用户界面，可以大幅减轻服务器负担，提高系统效　率；但是ＡＪＡＸ技术同样也有不足之处：开发人员需要掌握大量技术、浏览器的多样性以及没有一个好的　集成开发环境等等，另外ＡＪＡｘ技术主要适用于和服务器交互频繁的应用程序，因此我们在做ＷＥＢ开发　时，一定要在适宜的场合使用ＡＪＡＸ技术，只有使用得当，才能最大限度的发挥ＡＪＡｘ技术的优势．　参考文献：　［１］克拉恩，帕斯卡雷洛，杰姆斯．Ａｊａｘ实战（Ａｊａｘ　ｉｎ　ａｃｔｉｏｎ中文版）［Ｍ］．北京：人民邮电出版社，２００６．　［２］徐弛．Ａｊａｘ模式在异步交互Ｗｅｂ环境中的应用［Ｊ］．计算机技术与发展，２００６，１６（１１）：２２８～２２９，２３３．　［３］杨华．ＡＪＡＸ及在ＡＳＰ．ＮＥＴ中的实现［Ｊ］．现代电子技术，２００６，（１２）：７９～８３．　［４］游丽贞，郭宇春，李纯喜．Ａｊａｘ引擎的原理和应用［Ｊ］．微计算机信息，２００６，２２（６）：２０５～２０８．　［５］周旋，王丽芳，蒋泽军．基于Ａｊａｘ的即时消息系统的设计与实现［Ｊ］．科学技术与工程，２００９，（２）：４４６～４５０　Ｒｅｓｅａｒｃｈ　ａｎｄ　Ａｐｐｌｉｃａｔｉｏｎ　０ｆ　ＷＥＢ　Ｄｅｖｅｌｏｐｍｅｎｔ　Ｐａｔｔｅｒｎ　Ｂａｓｅｄ　ｏｎ　ＡＪＡＸ　Ｔｅｃｈｎｏｌｏｇｙ　ＷＡＮＧ　Ｑｉ　＾　（Ｄｅｐａｒｔｍｅｎｔ　ｏｆ　Ｃｏｍｐｕｔｅｒ　Ｓｃｉｅｎｃｅ＆Ｔｅｃｈｎｏｌｏｇｙ，Ｙｕｎｃｈｅｎｇ　Ｕｎｉｖｅｒｓｉｔｙ，Ｙｕｎｃｈｅｎｇ　０４４０００，Ｓｈａｎｘｉ，Ｃ　ｈｉｎａ）　Ａｂｓｔｒａｃｔ：ＡＪＡＸ　ｉｓ　ａ　ｋｉｎｄ　ｏｆ　ｄｅｓｉｇｎ　ｐａｔｔｅｒｎ　ｃｏｍｐｒｉｓｅｄ　ｗｉｔｈ　ａ　ｇｒｏｕｐ　ｏｆ　ｅｘｉｓｔｉｎｇ　ｔｅｃｈｎｉｑｕｅｓ．Ｉｔ　ｃａｎ　ｒｅａｌｉｚｅ　ｔｈａｔ　ｗｅｂ　ｐａｇｅ　ｃｏｍｍｕ—　ｎｉｃａｔｅｓ　ｗｉｔｈ　ｓｅｒｖｅｒ　ｗｉｔｈｏｕｔ　ｒｅｆｒｅｓｈｉｎｇ　ｆｕｌｌ　ｐａｇｅ，ａｎｄ　ｃａｎ　ｏｆｆｅｒ　ｂｅｔｔｅｒ　ｕｓｅｒ　ｅｘｐｅｒｉｅｎｃｅ．Ｉｎ　ｔｈｉｓ　ｐａｐｅｒ，ｔｈｅ　ｐｒｉｎｃｉｐｌｅ　ｏｆ　ＡＪＡＸ　ｗａｓ　ｄｅ—　ｓｃｒｉｂｅｄ　ｂｙ　ｃｏｍｐａｒｉｎｇ　ｔｗｏ　ｄｅｖｅｌｏｐｍｅｎｔ　ｐａｔｔｅｒｎｓ．Ｔｈｅｎ，ａ　ｃｌａｓｓｉｃａｌ　ＡＪＡＸ　ａｐｐｌｉｃａｔｉｏｎ　ｗａｓ　ｇｉｖｅｎ．Ｆｉｎａｌｌｙ．ｔｈｅ　ｓｕｍｍａｒｉｚａｔｉｏｎ　ａｎｄ　ｔｈｅ　ｆｕｔｕｒｅ　ｏｆ　ＡＪＡＸ　ｗｅｒｅ　ｓｈｏｗｎ．　Ｋｅｙ　ｗｏｒｄｓ：ＡＪＡＸ；ＷＥＢ　ｄｅｖｅｌｏｐｍｅｎｔ；ｓｙｎｃｈｒｏｎｉｚａｔｉｏｎ；ａｓｙｎｃｈｒｏｎｉｓｍ