使用Ajax实现本地化后的客户端消息验证.docx

1、简介 在构建个能影响全球用户的Web应用程序时，有两点需要考虑。第点是需要呈现本地 化后的页面内容，第二点是验证用户输入以及本地化后的验证消息显示。使用资源食（特定于本地语言环境的属性文件）在服务器端构建此页面的本地化版本很容易。 同样地，也可以使用服务器端验证来显示本地化后的验证消息。对于国际化而言，有很多具 备良好支持的现成框架可用，比如Jakarta Struts、Spring、Tapestry和Freemarkero 不过，在几乎所有的这类框架内，都缺少对在客户端验证本地化消息的现成支持。如果验证是在客户端进行的，将很难显示本地化后的验证消息。通过在构建页面时提前处理 整个页面（包括静

2、态内容和必要的JavaScript骑证消息）或从特定于本地语言环境的资源 包解析出消息键，可以显示这些消息。不过，上述方式具有一个暗含的限制：整个JavaScript 验证逻辑都应在JavaServer Page （JSP）本身内编写以便基于Java的消息键解析逻辑可 被重用。不要忘记，JavaScript通常都是由页面设计人员编写的，而这些设计人员并不一 定同时也掌握Java的开发技术。混合Java代码和JavaScript可能会让Web应用程序 的开发和维护复杂化。联合使用Ajax和资源包是另一种可以简化工作的方式。它让您能将此验证JavaScript移 到另一个文件，而不是JSP。并且，

3、只对需要的消息键进行解析，而不是像使用预先构造的 本地化版本方法样，对所有消息键进行解析。本文描述了如何联合使用Ajax和资源包来简化本地化后的客户端验证消息处理。我将侧重 于使用Ajax的强大功能，而不会涉及现成框架的复杂性。本文所介绍的方式非常适合于需 要快速响应的Web 2.0应用程序，比如动态跟踪用户动作。在本文中，我不会过多涉及JSP页面内静态HTML内容的本地化。本文所侧重的是联合使 用Ajax和资源包来实现本地化后的客户端验证消息处理。不过，用来在服务器端解析消息 键的Java实用工具也可用于本地化JSP页面内的静态HTML内容。关键字<td align="rig

4、ht" nowrap=，nowrapz，>Last Name</td><td align="center">Y/td><td><input typc="text" namc="lastName" id="lastNam。" size="20"X/td><td width="100%”>p id=/，lastNameErrMsg，/X/p></td></tr><tr>

5、;<td colspan="4" al ign=，/center，/><input type=submit" name="cmdSubmit" value="Submit” </td></tr></tbody></table></form></body></html>在表单字段上应用验证条件。这个示例JSP具有一个表单，需要在此表单进行必要的输入 以便完成用户的系统注册过程。此外，还需要满足一些验证条件才能对它进行提交：/a. Ema

6、il ID和User Name字段是必需的。b. Password字段也是必需的，且至少要有6个字符。c. Confirm Password字段的值要与用户在“Password”字段所键入的值完全相同。d. First Name与Last Name字段也是必需的。创建JavaScript例程来验证表单。负责对各字段执行验证的JavaScript例程(例如，ValidateNewlser. js)要在HTML表单发生onsubmit事件时调用。它还会准备恰当的消息 键和占位符HTML Element ID对，如需要，它们将被用作此Ajax调用内的输入以便解析 和显示本地化了的消息。如果此表单通过

7、了验证测试，它就会被提交给目标操作。清单 6. ValidatcNewUscr.jsfunction validateNewUser() (resetMsgKeys ();document. gctElcmcntById("loginErrMsg"). inncrToxt = document. getElementByld(emailErrMsg，z). innerText = "； document. getElcmontById(，passwordErrMsgz，). inncrTcxt = document, getElementById(confirmp

8、assErrMsg). innerText = "； document. ge t E1 emen t By I d (f i r s t NameErrMsg，/). innerText = document. getElementById(,，lastNameErrMsg，/). innerText =if (document. frmRegistration. loginld. value = "") (addMsgKey("loginErrMsg", "error, loginid. required");if (d

9、ocument. frmRegistration. emailId. value = "") (addMsgKey("emai1ErrMsg", "error, useremai1. required");if (document. frmRegistration. password, value =，w) (addMsgKey ("passwordErrVsg", "error, peissword, required");)else (if (document. frmRegistratio

10、n. password, value, length < "6”) addMsgKey("passwordErrMsg", "error, password, length*);if (document. frmRegistration. confirmPassword, value =(addMsgKey ("conf irmpassErrMsg”, "error, conf irmPassword, required7'); else (if (document. frmRegistration. confirmPa

11、ssword. value != document. frmRegistration. password, value) ( addMsgKey ("confirmpasslirrMsg", "error, passwordconfirm, match");if (document. frmRegistration. firstName. value = "") (addMsgKey("firstNamcErrMsg”, "error. firstName. required");if (document

12、. frmRegistration. lastName. value = /，/z) (addMsgKey("lastNameErrMsg”, "error. lastName. required");)if (msgKeys. length > 0) (getMessage(msgKeys);return false;return true;部署与i则试将这个应用程序部署到任意一个Web服务器(例如，Tomcat)上，并启动此服务器实例。然后，打开一个浏览器实例(例如，Internet Explorer),找到客户机内设置的首选语言。它应该是English

13、,如图1所示(单击 这里.可以查看放大图)。图1.语言首选浏览此URL,寻找用户注册页面(NewUserRegi strati on. jsp)，如图2所示。图2.用户注册在除User Name字段外的所有字段输入值。User Name字段空着。按下Submit。应该会看到如图3所示的User Name行旁边的验证消息(英语)。图3.输入用于验证的值Faaavvid . r««N«M 审A【*。5更改浏览器（Internet Explorer）中的语言。删除English并加入Hindio图4.将首选语言更改为Hindi关闭浏览器的这个实例并打开一个新实例。再次浏

14、览同一个（用户注册）页面。正确地输入所有字段，“User Name"字段仍旧留空。应该会看到“User Name”行旁边显示的验证消息（印度语），如图5所示。图5.更新后的验证消息umiidumiidImSm» 丙土<.5T 步骤总结1. 准备服务器端资源来解析消息键：a. 准备资源包（Messages*.properties）<>定义一个Java实用程序（RcsourccManagcr.java）来针对给定的键和本地语言环境解析特定于本地语 言环境的消息值。b. 为Ajax调用定义一个服务器端请求处理程序JSP （例如 Message Resol ver

15、.jsp）。c. 此JSP要有一个请求参数，例如，消息键。d. 这个消息键参数的值应是一个以逗号分隔的有效字符串列。e. 在用（逗号）作为分隔符分隔此值后，项的数目应该为偶数。f. 每个（连续）项对都应被分别处理。第一项应该是这个HTML元素的1D, 结果消息应在此HTML元素内显示。第二项应是要从此资源包解析出的实 际的消息键。g. 按照预定义的结构准备此响应一Message Begin Delimiter> <IITML element ID> Message-Key Delimiter> Resolved internationalized message for

16、 the kcy> <Mcssago End Delimiter。h. 为每个HTML元素和消息键重复同样格式。2. 在客户端验证的过程中：a. 准备占位符HTML元素ID和消息键对的列表。验证每个HTML表单字 段并按前述要求准备此对。b. 从上面的Element ID和消息键对列表中创建一个以逗号分隔的字符串。c. 对此服务器端资源（即在步骤l.a中创建的JSP）进行一次Ajax调用，追 加一个查询字符串"message-key=Comma-separated list of Strings created in step 2.2>”。3. 在客户端，在处理来自

17、Ajax调用的响应时：a. 解析这个由JSP生成的响应（步骤Lf到l.g）。b. 分离HTML元素ID及相应的消息值的成对列表。c. 针对每个HTML元素进行合适的JavaScripi调用以正确显示消息。结束语现在，您应该了解了用Ajax显示本地化后的客户端验证消息是多么简单。尽管我己经尽可 能简化了设置，尽可能实现开箱即用，但本方式还是可以通过一些现成的系统和技术得到进 一步改进。例如，如果您的Web应用程序使用Jakarta Struts或其他类似框架，而这些 框架均能提供现成的、更完善的资源包的使用方法，那么您尽可以使用这些框架，而不是自 己创建的ResourceManager. jav

18、a实用程序类。类似地，JavaScript （和Ajax）例程也可 以编写得更为完善和全面，从而满足您自己的Web应用程序的标准和要求。下载描述名字大小 下载方法本文的示例应用程序LocalizationExample.zip14KB HTTP关于下载方法的信息参考资料这个Ajax教程给出了 Ajax技术的基本概念。这是有关尝试Struts国际化的优秀教程。 Doj。and Internationalization文档会给您打下一个很好的基础。. J 解有关 Java Internationalization and Localizalion with Resource Bundies 的信息

19、。国际化（Internationalization）指一种应用程序设计过程，使应用程序不需要进行 重大修改就可适用于各种语言和地区。有时，国际化这一术语常被缩写为il8n,因为在首 字母“i”和最后一个字母“n”之间共有18个字母。本地化（Localization） 一针对某个特定地区或语言调整软件的过程，添加特定于本地 语言环境的组件和经过翻译的文本。本地化这一术语常被缩写为110n,这是因为在字母“1”和“n”之间共有10个字母。本地化的首要任务是翻译用户界面元素和文档。本 地化所涉及的不仅是互换语言，而且还会涉及更改相关元素，比如数字、日期、货币等的显 示。其他类型的数据（比如声音和图像

20、）若对文化敏感，可能也都需要进行本地化。应用程 序的国际化越好，越容易针对特定的语言和字符编码模式对其进行本地化。Ajax是一种技术,用来创建更好、更快旦更为交互的Web应用程序。借助Ajax,JavaScript 代码可使用XMLHttpRequest对象与服务器直接通信。有了此对象，JavaScript代码可以 在不重新装载页面的情况下与Web服务器进行数据交换。开发一个国际化的Web应用程序只要是针对全球（地理位置分散）用户开发Web应用程序，就要尊重和考虑用户对本地语 言和文化的偏好。在Web应用程序内提供对国际化的支持时，需要考虑以下几点。识别出文化敏感数据在资源包中分离出可翻译文本

21、 处理混合消息格式化数字及货币格式化日期及时间使用Unicode字符属性正确地对比字符串 将非Unicode文本转换为Unicode支持本地化了的客户端消息处理的高级步骤在构建具有国际化支持和本地化了的客户端消息处理机制的Web应用程序时，下列几点是 必须要满足的。所有本地化了的页面都应支持UTF-8字符集（页面编码）。所有客户端消息都应使用特定于客户机本地语言环境的资源包从服务器端获取。资源包应存储键值对。数值要使用Unicode字符。使用Ajax将来自客户端JavaScript的请求发送给一个服务器端资源，该资源会解 析此请求以针对此键获得特定于客户机本地语言环境的消息。解析所获取的消息并

22、正确显示。使用Ajax实现本地化后的客户端消息处理的一种实用方式在本节中，我们会带您亲历构建基本结构所需执行的各种操作，并会用一个示例页面对它进 测试，然后会在您的Web应用程序中反复使用。首先，要准备资源包属性文件。这些*. properties文件保存在该项目的类路径中，文件内 包含键-值对，并可用作资源包来获得特定于本地语言环境的运行时解析的验证消息。所有 这些*. properties文件都应符合Java国际化标准命名约定。清单1.包属性文件org/rpd/i18n/bundles/Messages, properties - Resource Bundle for default l

23、ocale# The sample message key-value pairs.error, loginid. required = User Name is Mandatory.error, useremai1. required = Emai1 Td is Mandatory.error, password, required = Password is required.error, password, length = Password Length should not bo less than six(6)character.error, confirmpassword. re

24、quired = Confirm Password is required.error, passwordconfirm, match = Password and Confirm Password does not match.error. firstName. required = First Name is required.error. lastName. required = Last Name is required.接下来，创建一个Java类来管理这些资源包。这个类(比如说RcsourccManager. java) 提供了将特定于本地语言环境的资源包加载到缓存的函数。借助它，还

25、能根据给定消息键和 本地语言环境检索消息值。清单 2. ResourceManager.javapackage org. rpd. i18n. common;import java. util. HashMap; import java. util. Locale; import java, uti1. Map;import java. util. ResourceBundle;public class ResourceManager (/ The name and location of the resource bundle.private final String rnMessageBu

26、ndle = "org/rpd/i18n/bundles/Mcssages”;/ The loaded message cache.private Map<Locale, ResourceBundle> mResourceCache = null;/ Private instance variable.private static ResourceManager mManager = null:/ default private constructor.private ResourceManager() (mResourceCache = new HashMap<L

27、ocale, ResourceBundle>():)/ Get the locale-specific bundle from cache./ First load to the cache if not already loadedpublic ResourceBundle getBundle(Locale locale)(if(locale = null) (locale = Locale. gctDcfaultO ;if(mResourceCache. containsKey(locale) = false)(ResourceBundle bundle = ResourceBund

28、le. getBundle (rnMessageBundle, locale);mResourceCache. put(1ocale, bund 1e);return mResourceCache. get(locale);/ Thread safe Singleton pattern implementation.private static ResourceManager get Instance()(synchronized (ResourceManager. class) (if(mManager = null) (mManager = new ResourceManager();re

29、turn mManager;)/ Get the message for the key using default locale.public static String getMessage(String key)return getMessage(key, null);)/ Get the message for the key and specified locale.public static String getMessage(String key, Locale locale)(try(return getlnstance(). getBundle(locale). getStr

30、ing(key);catch(Exception e)(return)创建一个JSP文件来处理Ajax请求。这个JSP文件(例如，MesscigeResolver. jsp)负 责处理Ajax请求以解析这些消息键(对这个JSP而言，就是请求参数，message-key)。 它使用由ResourceManager类提供的消息检索特性来解析作为请求参数进入这个JSP的 每个消息键。清单 3. MessageResolver.jsp<%page import="org. rpd. i18n. common. ResourceManager”%<%/ The name of th

31、e request parameter representing the input/ "HTML Element - Message Key" combination.final String REQID = "message-key”;/ Message prefix to be used in output string.final String MSG_PREFIX = "begin:"/ Message suffix to be used in output string.final String MSG_SUFFIX = ：end&

32、quot;/ The standard "HTML Element - Message Key" delimiter.final String ELEMENT_KEY_DELIV =/ The "HTML Element - Localize Message" delimiter to be used in/ output string.final String KEY_VAL_DELIM = ="/ Find the request parameter containing the "HTML Element - Message K

33、ey"/ combination String.String keysArr = request. getPareimeter (REQ ID);/ If the desired request parameter docsn' t exist, it means request is invalid, if(keysArr = null) (out. printin(Invalid message key"); else (/ Split the input using the element - key delimiter (ELEMENT KEY DELIM)

34、.String keys = keysArr. split(ELEMENT_KEY_DELIM);/ Check if the number of tuples is even. If not, it means the input is incorrect.if(keys. length%2) != 0)out. printin("Improper elemkey combination: " + keysArr); else (/ Iterate through each elem-key combination.for(int i=0; i < keys, le

35、ngth; i = i + 2)(/ Retrieve the localized message against the key. Prepare the result string/ as follows:/ Message Prefix (followed by) HTML Element key (followed by) Key-value/ delimiter/ (followed by) Localized value (followed by) Message suffix.out. print!n(MSG_PREFIX + keysi. trim() + KEY_VAL_DE

36、LIM +ResourceManager. getMessage(keysi+l. trimO, request. getLocaleO) + MSG_SUFFIX);%>准备JavaScript实用程序来管理Ajax调用。应该同时编写一组JavaScript例程(例如， MessageDisplay, js),这有助于为MessageResolver. jsp的Ajax调用创建正确的输入。 JSP需要的是一个请求参数，这个请求参数必须是一个由逗号分隔的字符串组。字符串由 HTML Element (占位符)Identifier和消息键对组成，并且这个消息键将在解析之后显示 在该HTML

37、元素内。这里也会涉及到一个例程(displayMessage0方法)，用它来将解析 后的消息正确地显示给相关的HTML元素。清单 4. MessageDisplay.jsvar xmlHttp = null;var msgKeys = new Array();var msgPrefix = "begin:"var msgSuffix = ":end”;var msgDelimiter ="=；var jspURL = "MessageResolver. jsp"/ reset msgKeys array.function resetM

38、sgKeys() ( msgKeys = new Array ();/ Adding to the array of keysfunction addMsgKey(elemld, msgKey)(msgKeysmsgKeys. length = new Array();msgKeysmsgKeys. length - 10 = elemld;msgKeysmsgKeys. length - 1 1 = msgKey;document. getElementByld(elemld). innerText ="；)/Different browsers use different met

39、hods to create XMLHttpRequest objects.function getXmlHttpObject() (xmlllttp = null;try (/ Firefox, Opera 8. 0+, SafarixmlHttp = new XMLHttpRequest();)catch (e) (/ Internet Explorertry xmlllttp = new ActiveXObject ("Msxml2. XMLHTTP");catch (c) (xmlHttp = new ActiveXObject("Microsoft. X

40、MLHTTP"); catch (e) (alert (''Your browser does not support Ajax!”); return false;)return xmlHttp;)/To pass on the key to the JSP function getMessage(key) (/ checking for browser supportxmlHttp = getXmlHttpObject ();if (xmlHttp = null) alert("Browser does not support Ajax"); r

41、eturn false;var url = jspURL + "?message-key= + key;xmlHttp.onreadystatechange = displayMessage;xmlHttp. open("GET", url, true);xmlHttp. send (null);)/Response generated against the requestfunction displayMcssageO (if (xmlHttp. readyState = 4 | xmlHttp. readyState = "complete&quo

42、t;) var localizedMsg = xmlHttp. responseText;while (true) (var begInd = localizedMsg. indexOf(msgPrefix);var endlnd = localizedMsg. indexOf(msgSuffix);if (beglnd < 0 | endlnd < 0) (break;var msg = localizedMsg. substring(beglnd + msgPrefix. length), endlnd);var elemVal = msg. split(msgl)elimit

43、er);document. getElementByld(elemVal0). innerText=document. getElementByld(elemVal0). innerText + "*" + elemVal 1;localizedMsg = localizedMsg. substringCendlnd + msgSuffix. length):)创建一个用于测试的客户机JSP/HTML。这个页面(例如，NewUserRegistration. js)有一 些输入字段，这些字段的数据需要用JavaScript在客户端进行验证。但是由于用户很有可 能在输入数据时

44、出错，因此，验证逻辑应能立即用恰当的消息提示用户。由于此验证消息应 该被本地化，因而验证逻辑需要使用之前准备好的Ajax实用程序来针对各类有效性问题显 示特定于本地语言环境的消息。清单 5. NewUserRegistration.jsp<% page contentTypc="tcxt/html;charsct=UTF-8" languagc="java”pageEncoding="UTF-8 %><!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"

45、><html><head><title>New User Registration</title><script type="text/javascript" src="ValidateNewUser. js"> </script><script type="text/javascript" src="N1essageDisplay. js"> </script> </head><body><form onsubmit=，return validateNewUser();" name="frmRegistration”id=，frmRegistration，z action#" method二"post"<table border'。" width="100%”><tbody><tr><td align="right" nowrap="nowrap&q