DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX的應用初步總結
AJAX的應用初步總結
編輯:AJAX詳解     
在表單有一些操作,特別是驗證,很多都要調用服務器端的方法函數,這樣造成的麻煩相信每個程序員都知道,那就是頁面刷新,既耗時又煩人,頭都被刷暈了,而且他在刷新的時候,還觸發服務器端的事件,現在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的使用等下次有空的時候在總結總結,現在對於他的理論還不是很理解。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved