·程序功能
頁(yè)面上有兩個(gè)輸入框,一個(gè)填用戶名,一個(gè)填密碼。兩個(gè)框空著時(shí)提示“請(qǐng)?zhí)顚?xiě)”;用戶名字符長(zhǎng)度小于3時(shí)提示“長(zhǎng)度應(yīng)大于3”;當(dāng)用戶名是“root”,密碼是“123”時(shí)提示密碼正確,否則提示密碼錯(cuò)誤。
·DWR的實(shí)現(xiàn)
Java邏輯: 這是提供給頁(yè)面異步調(diào)用的Java代碼
1 package net.jialing;
2
3 public class ValidateBean {
4
5 public String checkName(String name) {
6 if(name == null || name.equals("")) return "請(qǐng)?zhí)钊胗脩裘?/span>";
7
8 if(name.length()<3) return "用戶名長(zhǎng)度須大于3";
9
10 return "";
11 }
12
13 public String checkPwd(String name,String password) {
14 if(password == null || password.equals("")) return "請(qǐng)?zhí)钊朊艽a";
15
16 if(name != null && password != null) {
17 if(name.equals("root") && password.equals("123"))
18 return "密碼正確!";
19 else
20 return "密碼不正確!";
21 }
22
23 return "";
24 }
25
26 }
2
3 public class ValidateBean {
4
5 public String checkName(String name) {
6 if(name == null || name.equals("")) return "請(qǐng)?zhí)钊胗脩裘?/span>";
7
8 if(name.length()<3) return "用戶名長(zhǎng)度須大于3";
9
10 return "";
11 }
12
13 public String checkPwd(String name,String password) {
14 if(password == null || password.equals("")) return "請(qǐng)?zhí)钊朊艽a";
15
16 if(name != null && password != null) {
17 if(name.equals("root") && password.equals("123"))
18 return "密碼正確!";
19 else
20 return "密碼不正確!";
21 }
22
23 return "";
24 }
25
26 }
DWR的配置:
<dwr>
<allow>
<create creator="new" javascript="JValidate">
<param name="class" value="net.jialing.ValidateBean"/>
</create>
</allow>
</dwr>
<allow>
<create creator="new" javascript="JValidate">
<param name="class" value="net.jialing.ValidateBean"/>
</create>
</allow>
</dwr>
JSP頁(yè)面:在頁(yè)面中寫(xiě)了四個(gè)函數(shù)來(lái)調(diào)用各自的Java驗(yàn)證代碼。
<%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Struts + DWR AJAX Validation</title>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/interface/JValidate.js'></script>
<script>
function changeName() {
var name = document.getElementById("name").value;
JValidate.checkName(name,validateName);
}
function validateName(data) {
document.getElementById("name_message").innerHTML = data;
}
function changePwd() {
var name = document.getElementById("name").value;
var pwd = document.getElementById("password").value;
JValidate.checkPwd(name,pwd,validatePwd);
}
function validatePwd(data) {
document.getElementById("password_message").innerHTML = data;
}
</script>
</head>
<body>
Struts + DWR AJAX Validation: <br>
Name:<input name="name" type="text" id="name" onkeyup="changeName()"> <label id="name_message"></label><br>
Password:<input name="password" type="password" id="password" onkeyup="changePwd()"> <label id= password_message"></label>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Struts + DWR AJAX Validation</title>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type='text/javascript' src='dwr/interface/JValidate.js'></script>
<script>
function changeName() {
var name = document.getElementById("name").value;
JValidate.checkName(name,validateName);
}
function validateName(data) {
document.getElementById("name_message").innerHTML = data;
}
function changePwd() {
var name = document.getElementById("name").value;
var pwd = document.getElementById("password").value;
JValidate.checkPwd(name,pwd,validatePwd);
}
function validatePwd(data) {
document.getElementById("password_message").innerHTML = data;
}
</script>
</head>
<body>
Struts + DWR AJAX Validation: <br>
Name:<input name="name" type="text" id="name" onkeyup="changeName()"> <label id="name_message"></label><br>
Password:<input name="password" type="password" id="password" onkeyup="changePwd()"> <label id= password_message"></label>
</body>
</html>
·A4J的實(shí)現(xiàn)
Java邏輯:這是JSF控制下的JavaBean
package net.jialing;
public class ValidateBean {
private String name;
private String password;
private String name_message;
private String password_message;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getName_message() {
if(name == null || name.equals("")) return "請(qǐng)?zhí)钊胗脩裘?/span>";
if(name.length()<3) return "用戶名長(zhǎng)度須大于3";
return "";
}
public void setName_message(String name_message) {
this.name_message = name_message;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPassword_message() {
if(password == null || password.equals("")) return "請(qǐng)?zhí)钊朊艽a";
if(name != null && password != null) {
if(name.equals("root") && password.equals("123"))
return "密碼正確!";
else
return "密碼不正確!";
}
return "";
}
public void setPassword_message(String password_message) {
this.password_message = password_message;
}
}
public class ValidateBean {
private String name;
private String password;
private String name_message;
private String password_message;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getName_message() {
if(name == null || name.equals("")) return "請(qǐng)?zhí)钊胗脩裘?/span>";
if(name.length()<3) return "用戶名長(zhǎng)度須大于3";
return "";
}
public void setName_message(String name_message) {
this.name_message = name_message;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getPassword_message() {
if(password == null || password.equals("")) return "請(qǐng)?zhí)钊朊艽a";
if(name != null && password != null) {
if(name.equals("root") && password.equals("123"))
return "密碼正確!";
else
return "密碼不正確!";
}
return "";
}
public void setPassword_message(String password_message) {
this.password_message = password_message;
}
}
JSF的配置:
<faces-config>
<managed-bean>
<managed-bean-name>validate</managed-bean-name>
<managed-bean-class>
net.jialing.ValidateBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>name</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>password</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>name_message</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>password_message</property-name>
<null-value/>
</managed-property>
</managed-bean>
</faces-config>
<managed-bean>
<managed-bean-name>validate</managed-bean-name>
<managed-bean-class>
net.jialing.ValidateBean
</managed-bean-class>
<managed-bean-scope>request</managed-bean-scope>
<managed-property>
<property-name>name</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>password</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>name_message</property-name>
<null-value/>
</managed-property>
<managed-property>
<property-name>password_message</property-name>
<null-value/>
</managed-property>
</managed-bean>
</faces-config>
JSP頁(yè)面:
<%@ page language="java" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax4JSF Validate Page</title>
</head>
<body>
<f:view>
This is my Ajax4JSF Validate page. <br>
<h:form>
Name:<h:inputText id="name" value="#{validate.name}" >
<a4j:support event="onkeyup" reRender="rename" />
</h:inputText> <h:outputText id="rename" value="#{validate.name_message}" /><br>
Password:<h:inputSecret id="password" value="#{validate.password}" >
<a4j:support event="onkeyup" reRender="repwd" />
</h:inputSecret> <h:outputText id="repwd" value="#{validate.password_message}" />
</h:form>
</f:view>
</body>
</html>
<%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax4JSF Validate Page</title>
</head>
<body>
<f:view>
This is my Ajax4JSF Validate page. <br>
<h:form>
Name:<h:inputText id="name" value="#{validate.name}" >
<a4j:support event="onkeyup" reRender="rename" />
</h:inputText> <h:outputText id="rename" value="#{validate.name_message}" /><br>
Password:<h:inputSecret id="password" value="#{validate.password}" >
<a4j:support event="onkeyup" reRender="repwd" />
</h:inputSecret> <h:outputText id="repwd" value="#{validate.password_message}" />
</h:form>
</f:view>
</body>
</html>
·對(duì)比
1.代碼量
這是程序員最關(guān)心問(wèn)題,哪個(gè)框架能減輕我們更多的負(fù)擔(dān)呢。首先看Java代碼,DWR似乎比A4J少一點(diǎn),其實(shí)不然,因?yàn)锳4J是基于JSF的Managed Bean上開(kāi)發(fā)的,所以Bean里的其它代碼都可以用到JSF其它的地方,所以Java的開(kāi)發(fā)量是相同的。其次看配置量,A4J稍有一些優(yōu)勢(shì),只要在JSF中配置了就不用在配置,而DWR還需要再配置一個(gè)XML文件。最后看頁(yè)面的代碼量,這一點(diǎn)A4J的優(yōu)勢(shì)更加明顯,程序員完全不用寫(xiě)JavaScript代碼,只需將要異步刷新的地方加入a4j的標(biāo)簽即可。
總的來(lái)說(shuō),在節(jié)省代碼量這個(gè)方面A4J是勝利的。
2.靈活性
這一點(diǎn)DWR是明顯的贏家,DWR適合各種框架,在設(shè)計(jì)時(shí)都考慮到了如Spring、JSF、Struts等的集成。而A4J僅適合JSF框架,對(duì)應(yīng)用范圍做了很大的限制。在集成方面不僅僅是Java框架,還有現(xiàn)在越來(lái)越流行的JavaScript框架(如Dojo、Qooxdoo等),因?yàn)锳4J封裝了JavaScript代碼,開(kāi)發(fā)者無(wú)法像DWR一樣可以自由的使用JavaScript。當(dāng)開(kāi)發(fā)者習(xí)慣于將一些邏輯寫(xiě)在JavaScipt中時(shí),使用A4J可能會(huì)造成很多的不便。
3.風(fēng)險(xiǎn)性
A4J以標(biāo)簽為開(kāi)發(fā)手段,減去了應(yīng)用程序開(kāi)發(fā)者在JavaScript和DHTML等方面開(kāi)發(fā)的時(shí)間,但同時(shí)也可能埋下風(fēng)險(xiǎn)的隱患。在開(kāi)發(fā)一個(gè)Web應(yīng)用的時(shí)候,開(kāi)發(fā)者需要全面的評(píng)估應(yīng)用中會(huì)使用到的技術(shù)功能,確定利用A4J可以實(shí)現(xiàn),畢竟這是一個(gè)新成長(zhǎng)起來(lái)的框架,需要更加留意。另外在安全方面,兩個(gè)框架都還無(wú)從考證。
4.前景
DWR在2.0里實(shí)現(xiàn)了Ajax的反轉(zhuǎn),即在Java中執(zhí)行JavaScript代碼,似乎標(biāo)志著一種新的開(kāi)發(fā)方式。A4J則搭上了JSF這趟快車,各個(gè)大公司都在謀劃著將應(yīng)用開(kāi)發(fā)進(jìn)一步的分工,上游廠商制定組件,下游的公司使用組件為企業(yè)提供服務(wù),JSF是它們賺錢的一個(gè)好工具,一定會(huì)繼續(xù)推而廣之,而A4J也會(huì)隨著JSF的成長(zhǎng)而成長(zhǎng)。
·總結(jié)
也許還不到總結(jié)的時(shí)候。我想用DWR還是A4J,可以參考究竟使用Struts還是JSF,DWR的靈活性和Struts是對(duì)應(yīng)的,兩者結(jié)合可以開(kāi)發(fā)出靈活性很高的程序。A4J則肯定和JSF搭配,JSF的組件樹(shù)也可以讓開(kāi)發(fā)的速度加快。
·參考
DWR:http://getahead.ltd.uk/dwr
Ajax4jsf: https://ajax4jsf.dev.java.net/
·示例下載
基于DWR的示例:http://www.jialing.net/download/ajax/Struts_DWR_Validate.rar
基于A4J的示例:http://www.jialing.net/download/ajax/A4J_Validate.rar