精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站开发>ajax教程>正文

用AJAX开发智能Web应用程序之基础篇


来源: 时间:06-11-28 点击: 点击这里收藏本文


  该函数的代码是动态创建的并且在每次我们给http.onreadstatechange属性赋值时被编译。结果,JavaScript创建一个指向上下文(所有的变量都可以存取正在结束的方法-ask())的指针。这样以来,匿名函数和handleResponse()就能够被保证充分存取所有的上下文宿主的变量,直至到匿名函数的参考被垃圾回收站收集为止。换句话说,无论何时我们的匿名函数被调用,它都能无缝地参考request,fieldToFill和lookupField变量,就象它们是全局的一样。而且,每次ask()调用都将创建环境的一个独立拷贝,并且此时这些变量中保存有该函数将结束时的值。

  现在,让我们分析一下函数handleResponse()。既然它能够在请求处理的不同状态下激活,那么该函数将忽略所有的情形-除了该请求处理完成之外-这相应于request.readyState属性等于4("Completed")。此时,该函数读取服务器的响应文本。与它的名字所暗示的相反,XmlHttpRequest的输入和输出都不必限于XML格式。特别地,我们的resolveZip.jsp(见源码中的列表1)返回普通文本。如果返回值为"unknown",那么该函数将假定邮政区号是无效的并且把查找字段(zip)边界颜色置为红色。否则,返回值被用于填充字段state或city,并且zip的边界被赋予一种缺省颜色。

  XMLHttpRequest-传输对象

  让我们返回到我们的XMLHTTPRequest的跨浏览器实现。最后一个列表包含一个HttpRequest()函数-它向上兼容于IE5.0和Mozilla 1.8/FireFox。为简化起见,我们只创建一个微软XMLHTTPRequest对象,而且如果创建失败,我们假定它是Firefox/Mozilla。

  该函数的核心是XMLHTTPRequest-这是一个本机浏览器对象,它为包括HTTP协议的任何东西与服务器之间的通讯提供方便。它允许指定任何HTTP动词,头部和有效载荷,并且能够以异步或同步方式工作。不需要下载也不需要安装任何插件-尽管在IE的情形下,XMLHTTPRequest是一个集成到浏览器内部的ActiveX。因而,"Run ActiveX Control and Plugins"默认IE权限应该正好适合使用它。

  最重要的是,XMLHTTPRequest允许一个到服务器的RPC风格的编程查询而不需要任何页面刷新。它以一种可预测的,可控制的方式来实现此-提供了到HTTP协议的所有细节的完整存取-包括头部和数据的任何定制格式。在以后的文章中,我们将向你展示其它一些业界协议-你可以在这些传输协议(如Web服务和XML-RPC)之上运行-它们极大地简化大规模应用程序的开发和维护。

五.服务器端逻辑

  最后,服务器端的resolveZip.jsp被从函数ask()中调用(见所附源码中的列表1)。这个resolveZip.jsp在两种由当前的邮政区号长度所区分的独立的场所下被调用(见zipChanged()函数)。请求参数lookupType的值或者是state或者是city。为简化起见,我们将假定,两个文件state.properties和city.properties都位于服务器中C驱动器的根目录下。resolveZip.jsp逻辑负责用适当的预装载的文件返回查找值。
我们的支持AJAX的页面现在已经准备好了。

  六.远程脚本技术-一种可选方法

  一些更旧的AJAX实现是基于所谓的远程脚本技术。这种思想是,用户的行为导致经由IFRAME对服务器进行查询,而服务器用JavaScript作出响应,该脚本一旦到达客户端立即被执行。这与XMLHttpRequest方法相比存在较大的区别,在后者情况下,服务器响应数据而客户端解释数据。其好处是这种解决方案支持更旧的浏览器。

  基于IFRAME示例的HTML部分(见所附源码中的列表2)与我们在XMLHTTPRequest场合下所用的极相似,但是这次我们将引入另外一个IFRAME元素-controller:

Zip:<input id="zipcode" type="text" maxlength="5" o­nKeyUp="zipChanged()"
style="width:60" size="20"/>
City: <input id="city" disabled maxlength="32" style="width:160" size="20"/>
State:<input id="state" disabled maxlength="2" style="width:30" size="20"/>
<iframe id="controller" style="visibility:hidden;width:0;height:0"></iframe>

  我们保持每次击键都调用zipChanged()一次,但是这一次,从zipChanged()中被调用的函数ask()(见所附源码中的列表3)负责设置IFRAME的src属性,而不是调用一个XMLHTTPRequest:
9 7 3 1 2 3 4 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.