这个demo有助于理解JS与server的协同工作。
文档结构如上图。 主要是三个文件： main.js table.html validateUserName.jsp (代码见文章末尾)
页面打开例如以下：
选中第一个输入框后，右側出现定义好的提示信息。例如以下：
输入“olduser" , 为了简化验证过程，在validateUserName.jsp 中用硬编码验证username是否为”olduser", 返回JSON字串。 假设是，则返回{valid:false}。 否则返回{valid:true}
处理流程：
用户输入“olduser" , 并把焦点移出当前输入框后， onchange 事件触发， 调用main.js中的usernameOnChange函数。 此函数发送验证请求到server, 由validateUserName.jsp处理此请求。 validateUserName.jsp推断”olduser"为已实用户名， 于是返回{valid:false}到浏览器。 浏览器收到服务器的response之后，由main.js中的usernameValidationHandler函数处理响应，它推断valid为false,
则显示定义好的error message.
valid为true的情况与为false的情况类似， 不会显示error message.
有个示解决的问题是当valid为false为false时，error message 并未显示到页面上，应该是dijit.byId("tableuserName").displayMessage(errorMessage);这一句没有生效，这个问题临时没能解决，在后面的学习中会留意看怎么样找到方法解决。
table.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" title="text/css">
@import "dijit/themes/claro/claro.css";
@import "dojox/form/resources/CheckedMultiSelect.css";
</style>
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript" src="main.js"></script>
<script>
dojo.require("dojo/parser");
// dojo.require("dijit/form/Button");
dojo.require('dijit.form.ValidationTextBox'); //dojo.require("dojo/data/ItemFileReadStore"); </script>
</head>
<body id="content" class="claro">
<div id="mortgages" class=" "> <div class="" id="dijit/form/Form">
<h2 class=""></h2>
<p style="width:700px;">
please enter you name and address
</p> <div class="">
<div class="">
<label for="userName">User Name</label>
<input type="text" name="userName" value=""
onchange="usernameOnChange"
data-dojo-props="" id="tableuserName"
dojoType="dijit.form.ValidationTextBox"
promptMessage="oops"
invalidMessage="invalid"
missingMessage="Ooops! You forgot your first name!" /> </div>
<div class="">
<label for="Address">Address</label>
<input type="text" name="Address" value=""
data-dojo-type="dijit/form/ValidationTextBox"
onchange=""
data-dojo-props="trim:true, propercase:true" id="tableAddress" /> </div> </div>
</div> </div> <div id="result"></div> </body>
</html>
main.js
function usernameOnChange() {
console.log("run");
var userName = dijit.byId("tableuserName").getValue();
if(userName == ""){
console.log("user name is empty");
return;
}
dojo.xhrGet({
url:"validateUserName.jsp?userName=" + userName,
handleAs:"json",
handle:usernameValidationHandler
});
}
function usernameValidationHandler(response){
//console.log("get response");
dijit.byId("tableuserName").displayMessage("yes");
if(!response.valid){
var errorMessage = "user name already exists";
//console.log(errorMessage);
dijit.byId("tableuserName").displayMessage(errorMessage);
}
}
validateUserName.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
try{
System.out.println("UserName :"+
request.getParameter("userName"));
if(request.getParameter("userName").equals("olduser")){
out.println("{valid:false}");
System.out.println("To Brower : false"); }else{
out.println("{valid: true}");
System.out.println("To Brower : true");
}
}catch(Exception ex){
out.println(ex.getMessage());
ex.printStackTrace();
}
%>