在表單有一些操作，特別是驗證，很多都要調用伺服器端的方法函數，這樣造成的麻煩相信每個程式員都知道，那就是頁面重新整理，既耗時又煩人，頭都被刷暈了，而且他在重新整理的時候，還觸發伺服器端的事件，現在Ajax的出現，使得很多的解決了這個問題，真有點象CS的味道。近段時間自己看了一些關於AJAX的文章，也請教了小路等人，在項目的很多地方都用上了AJAX，如表單驗證，小拉框聯動之類都用上了，今天有點空兒，就粗粗整理一下，寫點文檔。詳細的體會還等以後有了深入的瞭解以後在來談談。
今天以使用者驗證作為例子，即時資料驗證是AJAX技術的一大優勢之一。通過應用此技術，struts驗證架構將增強struts MVC，並使Web應用程式更接近於傳統型應用程式。本文關注使用AJAX增強現有struts驗證架構。
此驗證架構用於驗證欄位。有許多在Web應用程式上進行驗證的方法。這些方法可分為兩類:伺服器端方法和用戶端方法。Struts驗證架構是面向基於Java的Web應用環境的最佳架構之一。它能夠配置應用程式，方法是使用伺服器端驗證和錯誤訊息，此錯誤訊息在處理請求時呈現在調用的驗證流程上，它還能夠進行用戶端驗證，方法是使用請求頁面上呈現的JavaScript。AJAX是一種JavaScript技術，它能夠非同步呼叫伺服器並擷取XML文檔，這類文檔最近非常流行。其用途之一就是即時資料驗證。
1，newActor.jsp，需要驗證的新增使用者介面，其他的略，只保留使用者姓名填寫框。
<%@ page language="java" pageEncoding="GB2312"%>
<%@ include file="taglibs.jsp" %>
<html:html>
<head>
<%@ include file="metas.jsp" %>
<script language="javascript" src="${ctx}/scripts/ywAjax.js" ></script>
</head>
<body topmargin="10px">
//驗證使用者是否存在
function check(){
var userid=document.forms[0].userid.value;
var url=document.forms[0].action ="omActor.do?method=isUseridExit&userid="+userid;
var tag="load";
send_request(url,tag);
}
</script>
<html:form action="/omActor" >
//在該處顯示後台傳回來的資訊
<div align="load" id="load" style="font-size: 12px;color: #ff0000;"></div>
<tr>
<td class="tdTitle">使用者姓名：</td>
<td class="tdRight"><html:text property="actorname"/></td>
</tr>
</html:form>
</body>
</html:html>
2,OmActorAction，後台代碼，jsp中check()指向的後台函數。
public class OmActorAction extends DispatchAction {
/**
* 前台採用AJAX驗證使用者是否已經註冊
*/
public ActionForward isUseridExit(ActionMapping mapping,ActionForm form,
HttpServletRequest request,HttpServletResponse response) throws Exception{
try {
request.setCharacterEncoding("gb2312");
} catch (Exception e) {
e.printStackTrace();
}
try{
String msgStr="";
response.setContentType("text/xml;charset=GB2312");
response.setHeader("Cache-Control","no-cache");
String username=(String)request.getParameter("userid");
if (getActorService().isUserExit(username)) { //找查資料庫中有無該使用者名稱
msgStr ="對不起,此使用者名稱已經存在,請更換使用者名稱註冊!";
}else{
msgStr ="使用者未被註冊,可以使用!";
}
response.getWriter().println("<?xml version='1.0' encoding='GB2312' ?>");
response.getWriter().println("<root>");
response.getWriter().println("<content>");
response.getWriter().print(msgStr);
response.getWriter().println("</content>");
response.getWriter().println("</root>");
response.getWriter().close();
}catch(Exception ex){
}
return null;
}
}
3,ywAjax.js
var http_request = false;
var divID="";
function send_request(url,tag) { //初始化、指定處理函數、發送請求的函數
var ajaxid=tag;
http_request = false; //file:開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if(http_request.overrideMimeType) { //設定MiME類別
http_request.overrideMimeType('text/xml');
}
}else if(window.ActiveXObject){ // IE瀏覽器
try{
http_request = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
}
}
}
if (!http_request) { // 異常，建立對象執行個體失敗
window.alert("不能建立XMLHttpRequest對象執行個體.");
return false;
}
divID=ajaxid;
http_request.open("GET", url, true); // 確定發送請求的方式和URL以及是否同步執行下段代碼
http_request.onreadystatechange = processRequest;
http_request.send(null);
}
function processRequest() { // 處理返回資訊的函數
if(http_request.readyState == 4) { // 判斷對象狀態
if(http_request.status == 200) { // 資訊已經成功返回，開始處理資訊
var response = http_request.responseText;
document.getElementById(divID).innerHTML=response;
}else { //頁面不正常
alert("您所請求的頁面有異常。");
}
}
}
表單驗證的大抵就是這樣的，還有下拉框聯動和資料查詢等等就不談到，至於DWR的使用等下次有空的時候在總結總結，現在對於他的理論還不是很理解。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
