ajax第四章.doc

我们已经介绍了Ajax技术，也知道了如何使用XMLHttpRequest对象，现在要把它们结合起来，该怎么做呢？哪些情况下需要应用Ajax技术？当然，Ajax的潜力几乎是无穷尽的，关于Ajax的使用，灵感可能源源不断。本章将展示一些例子，在这些情况下，使用Ajax技术可以让应用突飞猛进。有些情况是一目了然的，有些则不是。不过无论怎样，对Ajax应用积累的经验越多，你就越会找到自己的方法来改善应用。在这些例子中，大多数都使用Java servlet作为服务器端组件，其实每个例子也都能很容易地使用.NET、Ruby、Perl、PHP或任何其他服务器端技术来编写。 4.1? 完成验证 关于可用性有一句金玉良言，即防患于未然，根本杜绝错误的发生。但是如果真的出现了错误，你就要第一时间通知用户。在Ajax之前，基于Web的应用必须提交整个页面才能验证数据，或者要依赖复杂的JavaScript来检查表单。尽管有些检查确实很简单，可以使用JavaScript编写，但另外一些检查则不然，完全靠JavaScript编写是办不到的。当然，在客户端编写的每一个验证例程都必须在服务器上以某种方式重写，因为用户有可能禁用JavaScript。 利用Ajax，你不用再受这个限制，不再只是编写简单的客户端验证和重复的逻辑。现在，如果你想为用户提供更能体现交互性的体验，可以简单地调用为服务器编写的验证例程。在大多数情况下，这个逻辑编写起来更简单，测试也更容易，而且完全可以借助于现有的框架。 有人问，在应用中应该从哪里开始使用Ajax，我们一般会建议从验证开始。你很可能要去掉一些JavaScript，而且可以很容易地加入一些现有的服务器端逻辑。本节将介绍一个例子，这是最常见的验证之一：日期验证。 这个例子的HTML很简单（见代码清单4-1）。其中有一个标准的输入框，相应的onchange()事件（当然，可以使用你认为合适的任何事件）会触发验证方法。可以看到，要调用标准的createXMLHttpRequest()方法，然后把输入值发送到ValidationServlet servlet。callback()函数从服务器得到结果，然后委托给setMessage()方法，这个方法会检查值以确定用什么颜色显示消息。 代码清单4-1 ?validation.html !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN ? html ? head ??? titleUsing Ajax for validation/title ? ??? script type=text/javascript ??????? var xmlHttp; ? ??????? function createXMLHttpRequest() { ??????????? if (window.ActiveXObject) { ??????????????? xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); ??????????? } ??????????? else if (window.XMLHttpRequest) { ??????????????? xmlHttp = new XMLHttpRequest(); ??????????? } ??????? } ? ??????? function validate() { ??????????? createXMLHttpRequest(); ??????????? var date = document.getElementById(birthDate); ??????????? var url = ValidationServlet?birthDate= + escape(date.value); ??????????? xmlHttp.open(GET, url, true); ??????????? xmlHttp.onreadystatechange = callback; ??????????? xmlHttp.send(null); ??????? } ? ??????? function callback() { ??????????? if (xmlHttp.readyState == 4) { ??????????????? if (xmlHttp.status == 200) { ??????????????????? var mes = ??????????????????????? xmlHttp.responseXML ??????????????? ??????? ?? .getElementsB