用AJAX开发智能Web应用程序之基础篇----为中国网络技术提供点滴动力-iyit.net-易特网络技术！

　　通行证: 用户密码

域名空间　下载中心　 社区论坛　信息公告 MY小屋

联系我们
设为首页
加入收藏

QQ,ASP,PHP,JSP,XML,SQL,.Net,编程程序网页图象建站经验私服




	当前位置：首页>>编程开发>>AJAX>>正文	新版上线！[旧版]

注:打开慢时请稍等

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

http://www.iyit.net 日期：2006-5-25 14:37:43 来源：网络转载点击：

【参加讨论】

在以后的AJAX文章中，我们将比较深入地讨论这里的每一种组件并提供有关它们联合在一起进行应用的示例。现在，先不多说，让我们详细地分析一个简单的AJAX示例。

四. 邮政区号校验和查询

我们将创建一个包含三个INPUT字段（Zip，City和State）的HTML页面。我们将保证，只要用户输入邮政区号的前三个数字，该页面上的字段就会用第一个匹配的状态值填充。一旦用户输入了所有五位邮政区号数，我们将立即决定和填充相应的城市。如果邮政区号无效（在服务器的数据库没有找到），那么我们将把邮政区号的边界设置为红色。这样的可视化线索有助于用户并且在现代浏览器中已经成为一种标准（作为一实例，当Firefox找到一个HTML页面中的匹配关键字时，它会高亮与你在浏览器查找域输入的内容一致的部分）。

让我们首先创建一个简单的包含三个INPUT字段的HTML：zip，city和state。请注意，一旦一个字符输入进邮政区号字段域中，即调用方法zipChanged()。JavaScript函数zipChanged()(见下)在当zip长度为3时调用函数updateState()，而在当zip长度为5时调用函数up-dateCity()。而updateCity()和updateState()把大部分的工作代理到另一个函数ask()。

Zip:＜input id="zipcode" type="text" maxlength="5" onKeyUp="zipChanged()"

style="width:60"/＞

City: ＜input id="city" disabled maxlength="32" style="width:160"/＞

State:＜input id="state" disabled maxlength="2" style="width:30"/＞

＜script src="xmlhttp.js"＞＜/script＞

＜script＞

var zipField = null;

function zipChanged(){

zipField = document.getElementById("zipcode")

var zip = zipField.value;

zip.length == 3?updateState(zip):zip.length == 5?updateCity(zip):"";

}

function updateState(zip) {

　var stateField = document.getElementById("state");

　ask("resolveZip.jsp?lookupType=state&zip="+zip， stateField， zipField);

}

function updateCity(zip) {

　var cityField = document.getElementById("city");

　ask("resolveZip.jsp? lookupType=city&zip="+zip， cityField， zipField);

}

＜/script＞

函数ask()与服务器进行通讯并分配一个回调函数来处理服务器的响应（见下列代码）。后面，我们将分析具有双重特点的resolveZip.jsp的内容-它根据zip字段中的字符数查找city或state信息。重要的是，ask()使用了具有异步特点的XmlHttpRequest，这样填充state和city字段或着色zip字段边界就可以不必减慢数据入口而得以实现。首先，我们调用request.open()-它用服务器打开套接字频道，使用一个HTTP动词(GET或POST)作为第一个参数并且以数据提供者的URL作为第二个参数。request.open()的最后一个参数被设置为true-它指示该请求的异步特性。注意，该请求还没有被提交。随着对request.send()的调用，开始提交-这可以为POST提供任何必要的有效载荷。在使用异步请求时，我们必须使用request.onreadystatechanged属性来分配请求的回调函数。(如果请求是同步的话，我们应该能够在调用request.send之后立即处理结果，但是我们也有可能阻断用户，直到该请求完成为止。)

本新闻共5页,当前在第2页 1 2 3 4 5

编辑：黑鹰　[发送给好友] [打印本页] [关闭窗口] [返回顶部]
上一篇：用AJAX开发智能Web应用程序之高级篇
下一篇：AJAX案例研究之google suggest
转载请注明来源：www.iyit.net
特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员，我们尽快予以更正。

		相关文章

推荐新闻

AJAX案例研究之google suggest

Windows XP专业版IIS连接数的更改

Office2007简体中文版浮出水面美图抢

exeplorer.exe错误的问题的总结、解决

ASP.NET 2.0 中的异步页功能应用

	友情链接

	Copyrights © 2004-2006 iYiT.Net All Rights Reserved. 网站合作、广告联系QQ:147007642、466949678
	易特网络技术冀ICP备05011851号		浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。