AJAX的應用初步總結

來源:互聯網
上載者:User
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的使用等下次有空的時候在總結總結,現在對於他的理論還不是很理解。

 



相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.