Aja的工作原理　.docVIP

Ajax的工作原理 Ajax 的核心是 JavaScript 对象 XmlHttpRequest。该 对象在InternetExplorer5中首次引入，它是一种支持异 步请求的技术。简而言之，XmlHttpRequest使您可以使用 JavaScript向服务器提出请求并处理响应，而不阻塞用户 在创建Web站点时，在客户端执行屏幕更新为用户提 供了很大的灵活性。下面是使用Ajax可以完成的功能： *动态更新购物车的物品总数，无需用户单击Update并 等待服务器重新发送整个页面。 *提升站点的性能，这是通过减少从服务器下载的数据 量而实现的。例如，在A mazon的购物车页面，当更新篮子 中的一项物品的数量时，会重新载入整个页面，这必须下 载32K的数据。如果使用Ajax计算新的总量，服务器只会 返回新的总量值，因此所需的带宽仅为原来的百分之一。 *消除了每次用户输入时的页面刷新。例如，在Aja x 中，如果用户在分页列表上单击Next ,则服务器数据只刷 新列表而不是整个页面。 *直接编辑表格数据，而不是要求用户导航到新的页面 来编辑数据。对于A jax,当用户单击Ed it时，可以将静 态表格刷新为内容可编辑的表格。用户单击Done之后，就 可以发出一个Ajax请求来更新服务器，并刷新表格，使其 包含静态、只读的数据。 一切皆有可能!但愿它能够激发您开始开发自己的基于 Ajax的站点。然而，在开始之前，让我们介绍一个现有的 W eb站点，它遵循传统的提交/等待/重新显示的范例，我 们还将讨论Ajax如何提升用户体验。 Ajax可用于那些场景? 个例子：MSNMon ey页面 前几天，在浏览MSNMoney页面的时候，有一篇关于房 地产投资的文章引起了我的好奇心。我决定使用站点的“R atethis art icle”（评价本文）功能，鼓励其他的用户花一 点时间来阅读这篇文章。在我单击vot e按钮并等待了一会 儿之后，整个页面被刷新，在原来投票问题所在的地方出 现了一个漂亮的感谢画面。 而A jax能够使用户的体验更加愉快，它可以提供响应 更加灵敏的UI，并消除页面刷新所带来的闪烁。目前，由 于要刷新整个页面，需要传送大量的数据，因为必须重新 发送整个页面。如果使用Ajax,服务器可以返回一个包含 了感谢信息的500字节的消息，而不是发送2 6,81 3字节 的消息来刷新整个页面。即使使用的是高速Inte rnet，传 送26K和1/2K的差别也非常大。同样重要的是，只需要刷 新与投票相关的一小节，而不是刷新整个屏幕。 让我们利用Ajax实现自己的基本投票系统。 原始的A jax：直接使用Xml HttpR equest 如上所述，Ajax的核心是JavaScr i pt对象XmlHtt pRequest。下面的示例文章评价系统将带您熟悉Ajax的底 层基本知识：https :///ajax-d emo /。注：如果您已经在 本地WebLo gic容器中安装了，可以导航到h ttps ://loca lho st: 7001/aj ax-demo/， 浏览应用程序，参与投票，并亲眼看它如何运转。熟 悉了该应用程序之后，继续阅读，进一步了解其工作原理 细节。 首先，您拥有一些简单的定位点标记，它连接到一个 Jav aScript cas tVote (ra nk )函数。 fun ctioncastVo te (rank) { varurl= “/aj ax-demo/’’ ； varca llbac k=pro cessAj axRe sponse; executeXh r (callback,url): 该函数为您想要与之通信的服务器资源创建一个UR L 并调用内部函数ex ecu teXhr,提供一个回调JavaS cript 函数，一旦服务器响应可用，该函数就被执行。由于我希 望它运行在一个简单的Apache环境中，“castvoteU RL” 只是一个简单的H TML页面。在实际情况中，被调用的URL 将记录票数并动态地呈现包含投票总数的响应。 下一步是发出一个XmlH ttpRe quest请求： functio ne xecuteXhr (callback, u rl) { i f() { req=n ewXM LHttpRe que st (): =ca 1 lback; (“GE T”，url, true ): (null); }//branc hfo rIE/Win dows Active Xvers ion e lseif () { req=newA c tiveXObjec t ( “ ’’)； if (re q) { =callb ac k; (“GET ”，ur 1，true ): 0; 如您所