第3章 使用Dojo与服务器端协同工作.docxVIP

3 使用Dojo与服务器端协同工作你必须服务于他人—Bob Dylan ? ? ? 本章介绍如何使用Dojo与服务器端通信。使用服务器端的两个主要目的是处理过程与提供数据。在这部分指南中会对这两种情况进行说明。? ? ? 3.1 增加服务器端特性? ? 尽管Dojo称自己为JavaScript库，但我们经常把它当作一个Ajax库。虽然这种描述可能不太准确，但理解起来没问题。由于并没有一个“国际化组织为Ajax做过定义”，因此我们可以多种方式来使用这个词。通常它指的是Web页面无需完全刷新就可以访问服务器端以及对DOM进行一些操作使其比传统的HTML交互性更强。但只有当我们对服务器端发出请求时，我们才算是真正使用了Ajax。? ? 本章介绍如何向服务器端发出Ajax请求。我们使用两种类型的请求。第一种让服务器端进行一些处理。在这种情况下，我们让服务器端验证用户名。第二种让服务器端提供一些数据，然后我们会将这些数据增加到DOM中以让用户看到。我们将针对用户所选的州名向服务器端请求其城市列表。? ? 说明之所以要与服务器端通信有两个主要的原因：（1）进行验证（2）获取数据。我将本部分指南分为两部分，分别解释使用服务器端的这两个原因。第一部分——3a，介绍了服务器端验证。第二部分——3b，介绍了如何从服务器端获取数据。? ? ? 3.2 指南步骤3a——增加服务器端验证? ? 在这部分中，我们使用服务器端来验证用户输入的一些数据。这里会遇到很多有趣的问题。我们如何获取数据？何时向服务器端发送请求？当等待服务器端的返回时应用做什么呢？如何处理服务器端的响应？这些问题看起来很简单，但实际上还是有些复杂的。Dojo为解决这些问题提供了灵活的代码，同时我还会介绍一些常见的模式和最佳实践。? 我们可以验证用户输入的用户名是否被其他用户使用过。很多应用都可以让用户指定一个用户名，通过该名字应用就可以识别出用户。这个用户名使用户可以登录到应用中做一些像编辑账户或者检查交易历史这样的事情。用户名在整个系统中必须是唯一的；因此这需要服务器端验证以确保它没有分配给其他用户。这看起来是小菜一碟，但实际上还是有些复杂的。? ? ? ? 3.2.1 指定事件处理函数? ? ? 该过程以用户输入要求的用户名开始。用户不断输入字符，然后停止输入。但我们怎么知道用户真的输入完了呢？是当他停止输入时么？如果是的话，那么应用在认为用户已经输入完之前需要等多久呢？我们甚至可以在每次按键后进行验证。然而这种方式有很多问题。这会无谓地增加服务器端的负载。同时用户也会不断看到中间验证的消息。最好是只执行一次验证——就在用户输入完数据时。? ? 更好的方式是直到用户按下Tab键或者是回车键离开该输入域时进行验证。按下回车键的问题在于浏览器可能将它当作是提交表单（标准的HTML表单的默认行为）。通过按下Tab键或者使用鼠标将光标移到另一个输入域上，表明用户已经输入完了用户名字段，准备输入下一个字段了。我们将使用该情况作为验证的最佳时机。? ? ? 现在需要将我们想要捕获的逻辑事件转化为浏览器监控的实际事件了。JavaScript向我们提供了两种可能的事件，onblur与onchange。当焦点离开输入域时会触发onblur事件，这表示用户按下了tab键移到了下一个输入域或者使用鼠标点击了另一个输入域。onchange事件与onblur差不多。区别在于如果数据没有发生变化，onblur依旧会被调用，而onchange则不会。当用户第一次输入该字段时，他们没有什么区别。但当光标再一次经过该字段而用户又没有修改数据的话，就会又一次触发该事件，这样就会向服务器端发送一个不必要的调用。因此onchange是最有效的事件。我们需要编写一个函数来处理onChange事件，同时需要在事件发生时调用该函数。? ? 现在我们需要讨论一下常规的JavaScript事件与Dojo事件的区别。JavaScript提供了一种方式，可以为DOM元素上所产生的事件指定一个事件处理器（函数）。下面的代码通过指定onChange属性值为userNameOnChange()来说明该问题。这样当浏览器检测到字段值发生变化时就会执行userNameOnChange函数。? ? input? type=text? id=userName? name=userName? size=20? dojoType=dijit.form.ValidationTextBox? onchange=userNameOnChange()? /? ? ? ? 下面的代码使用了Dojo来完成同样的功能。? input? type=text? id=userName? name=userName? size=20? dojoType=dijit.f