<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    軟件藝術思考者  
    混沌,彷徨,立志,蓄勢...
    公告
    日歷
    <2025年5月>
    27282930123
    45678910
    11121314151617
    18192021222324
    25262728293031
    1234567

    導航

    隨筆分類(86)

    隨筆檔案(85)

    搜索

    •  

    最新評論

    閱讀排行榜

    評論排行榜

     

    DWR is a Java open source library which allows you to write Ajax web sites.

    It allows code in a browser to use Java functions running on a web server just as if it was in the browser.

    DWR consists of two main parts:

    • A Java Servlet running on the server that processes requests and sends responses back to the browser.
    • JavaScript running in the browser that sends requests and can dynamically update the webpage.

    DWR works by dynamically generating Javascript based on Java classes. The code does some Ajax magic to make it feel like the execution is happening on the browser, but in reality the server is executing the code and DWR is marshalling the data back and forwards.

    This method of remoting functions from Java to JavaScript gives DWR users a feel much like conventional RPC mechanisms like RMI or SOAP, with the benefit that it runs over the web without requiring web-browser plug-ins.

    Java is fundamentally synchronous where Ajax is asynchronous. So when you call a remote method, you provide DWR with a callback function to be called when the data has been returned from the network.

    interaction diagramThe diagram shows how DWR can alter the contents of a selection list as a result of some Javascript event like onclick.

    DWR dynamically generates an AjaxService class in Javascript to match some server-side code. This is called by the eventHandler. DWR then handles all the remoting details, including converting all the parameters and return values between Javascript and Java. It then executes the supplied callback function (populateList) in the example below which uses a DWR utility function to alter the web page.

    DWR helps you in producing highly interactive web-sites by providing some Javascript libraries to help with DHTML and by giving you a set of examples to copy from.

    For details on how to get started with DWR see the getting started guide and download instructions.
    //---------------------------以下是中文介紹-0--------------------------------------------------------------

    這段時間較閑,研究了一番dwr.發現dwr實現的AJAX有些地方確實很是先進.比如動態生成javascript代碼;隱藏的http協議;javascript于java代碼交互的是javascript對象(或字符串)等.
    以下是我臨時譯的一些東西.本來想全譯,發現dwr實在是簡單,就隨便寫了.英文居差,現一把.

    1、DWR: Easy AJAX for JAVA

    作為一個java open source library,DWR可以幫助開發人員完成應用AJAX技術的web程序。它可以讓瀏覽器上的javascript方法調用運行在web服務器上java方法。

    DWR主要由兩部門組成。javascript與web服務器通信并更新web頁;運行在web服務器的Servlet處理請求并把響應發回瀏覽器。

    DWR 采用新穎的方法實現了AJAX(本來也沒有確切的定義),在java代碼基礎上動態的生成javascript代碼。web開發者可以直接調用這些 javascript代碼,然而真正的代碼是運行在web服務器上的java code。出與安全考慮,開發者必須配置哪些java class暴露給DWR.(dwr.xml)

    這種從(java到javascript)調用機制給用戶一種感覺,好象常規的RPC機制,或RMI or SOAP.但是它運行在web上,不需要任何瀏覽器插件。

    DWR 不認為瀏覽器和web服務器之間協議重要,把系統界面放在首位。最大挑戰是java method call的同步特征與ajax異步特性之間的矛盾。在異步模型里,結果只有在方法結束后才有效。DWR解決了這個問題,把回調函數當成參數傳給方法,處理完成后,自動調用回調方法。

    這個圖表顯示了,通過javascript事件,DWR能改變select的內容,當然這些內容由 java代碼返回。 javascript函數Data.getOptions(populateList)由DWR動態生成,這個函數會調用java class Data類的方法。DWR處理如何遠程調用,包括轉換所有的參數和返回的結果(javascript\java)。java方法執行完后,執行回調方法 populateList。在整個過程中我們就想在用本地的方法一樣。

    2、Getting Started

    廢話少說,試試就ok了。
    web.xml

    <?xml version="1.0" encoding="ISO-8859-1"?>
    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">

    <web-app id="dwr">
    <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    </servlet>
    <servlet-mapping>
    <servlet-name>dwr-invoker</servlet-name>
    <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>
    </web-app>

    dwr.xml 與web.xml同目錄
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
    <dwr>
    <allow>
    <create creator="new" javascript="JDate">
    <param name="class" value="java.util.Date"/>
    </create>
    </allow>
    </dwr>

    index.html
    <html>
    <head>
    <title>DWR - Test Home</title>
    <script type='text/javascript' src='dwr/interface/JDate.js'></script>
    <script type='text/javascript' src='dwr/engine.js'></script>
    <script>
    function init(){
    JDate.getYear(load);
    }
    function load(data){
    alert(data+1900+'年')
    }
    </script>
    </head>
    <body onload="init()">
    </body>
    </html>

    dwr.jar 下載放lib下

    完了,什么,夠了,就這些。訪問ok!
    3、Examples
    http://www.aboutmyhealth.org/ 這不是Google Suggest嗎!ok.
    4、源碼淺析
    dwr的設計很象webwork2的設計,隱藏http協議,擴展性,兼容性及強。

    通過研究uk.ltd.getahead.dwr.DWRServlet這個servlet來研究下dwr到底是如何工作滴。

    java代碼:?

    web.xml配置
    <servlet>
    ? ? <servlet-name>dwr-invoker</servlet-name>
    ? ? <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    ? </servlet>
    ? <servlet-mapping>
    ? ? <servlet-name>dwr-invoker</servlet-name>
    ? ? <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>


    這樣所有的/dwr/*所有請求都由這個servlet來處理,它到底處理了些什么能。我們還以上面最簡單的例子來看。
    1、 web服務器啟動,DWRServlet init()方法調用,init主要做了以下工作。
    設置日志級別、實例化DWR用到的單例類(這些類在jvm中只有一個實例對象)、讀去配置文件(包括dwr.jar包中的dwr.xml,WEB-INF/dwr.xml. config*.xml)。
    2、請求處理
    DWRServlet.doGet, doPost方法都調用processor.handle(req, resp)方法處理。Processor對象在init()方法中已經初始化了。
    java代碼:?

    publicvoid handle(HttpServletRequest req, HttpServletResponse resp)
    ? ? ? ? throwsIOException
    ? ? {
    ? ? ? ? String pathinfo = req.getPathInfo();
    ? ? ? ? if(pathinfo == null || pathinfo.length() == 0 || pathinfo.equals("/"))
    ? ? ? ? {
    ? ? ? ? ? ? resp.sendRedirect(req.getContextPath() + req.getServletPath() + '/' + "index.html");
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.equalsIgnoreCase("/index.html"))
    ? ? ? ? {
    ? ? ? ? ? ? doIndex(req, resp);
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.startsWith("/test/"))
    ? ? ? ? {
    ? ? ? ? ? ? doTest(req, resp);
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.equalsIgnoreCase("/engine.js"))
    ? ? ? ? {
    ? ? ? ? ? ? doFile(resp, "engine.js", "text/javascript");
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.equalsIgnoreCase("/util.js"))
    ? ? ? ? {
    ? ? ? ? ? ? doFile(resp, "util.js", "text/javascript");
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.equalsIgnoreCase("/deprecated.js"))
    ? ? ? ? {
    ? ? ? ? ? ? doFile(resp, "deprecated.js", "text/javascript");
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.startsWith("/interface/"))
    ? ? ? ? {
    ? ? ? ? ? ? doInterface(req, resp);
    ? ? ? ? }else
    ? ? ? ? if(pathinfo != null && pathinfo.startsWith("/exec"))
    ? ? ? ? {
    ? ? ? ? ? ? doExec(req, resp);
    ? ? ? ? }else
    ? ? ? ? {
    ? ? ? ? ? ? log.warn("Page not found. In debug/test mode try viewing /[WEB-APP]/dwr/");
    ? ? ? ? ? ? resp.sendError(404);
    ? ? ? ? }
    ? ? }


    哦。這些恍然大悟。dwr/*處理的請求也就這幾種。
    (1)dwr/index.html,dwr/test/這種只能在debug模式下使用,調試用。
    dwr/engine.js,dwr/util.js,dwr/deprecated.js當這個請求到達,從dwr.jar包中讀取文件流,響應回去。(重復請求有緩存)
    (2)當dwr/interface/這種請求到來,(例如我們在index.html中的 <script type='text/javascript' src='dwr/interface/JDate.js'></script>)DWR做一件偉大的事。把我們在WEB- INF/dwr.xml中的
    <create creator="new" javascript="JDate">
    <param name="class" value="java.util.Date"/>
    </create>
    java.util.Date轉化為javascript函數。
    http://localhost:port/simpledwr/dwr/interface/JDate.js看看吧。
    細節也比較簡單,通過java反射,把方法都寫成javascript特定的方法。(我覺得這些轉換可以放到緩存里,下次調用沒必要再生成一遍,不知道作者為什么沒這樣做)。
    (3)dwr/exec
    javascript調用方法時發送這種請求,可能是XMLHttpRequest或IFrame發送。
    當然,javascript調用的方法簽名與java代碼一致,包括參數,還有javascript的回調方法也傳到了服務器端,在服務器端很容易實現?;卣{方法的java的執行結果 返回類似 <script>callMethod(結果)<script>的javascript字符串,在瀏覽器執行。哈,一切就這么簡單,巧妙。

    dwr的設計構思很是巧妙。
    第一、把java類轉化為javascript類由dwr自動完成,只需簡單的配置。
    第二、應用起來極其簡單。開發者不要該服務器代碼就可以集成。
    第三、容易測試。和webwork一樣,隱藏的http協議。
    第四、及強擴展性。例如與spring集成,只需修改一點代碼。
    第五、性能。就我與jason,等簡單比較,dwr性能可能是最好的。
    第六、自動把java對象轉化為javascript對象,并且及易擴展。


    posted on 2006-09-21 16:51 智者無疆 閱讀(753) 評論(2)  編輯  收藏 所屬分類: Client teachnolgy research
    評論:
    • # re: DWR: Easy AJAX for JAVA  智者無疆 Posted @ 2006-11-27 13:07
      AJAX實例入門之JSP+AJAX篇 樓主 只看樓主

        一、開門見山

        這些時間,瞎子也看得見,AJAX正大踏步的朝我們走來。不管我們是擁護也好,反對也罷,還是視而不見,AJAX像一陣潮流,席轉了我們所有的人。

        關于AJAX的定義也好,大話也好,早有人在網上發表了汗牛充棟的文字,在這里我也不想照本宣科。

        只想說說我感覺到的一些優點,對于不對,大家也可以和我討論:

        首先是異步交互,用戶感覺不到頁面的提交,當然也不等待頁面返回。這是使用了AJAX技術的頁面給用戶的第一感覺。

        其次是響應速度快,這也是用戶強烈體驗。

        然后是與我們開發者相關的,復雜UI的成功處理,一直以來,我們對B/S模式的UI不如C/S模式UI豐富而苦惱。現在由于AJAX大量使用JS,使得復雜的UI的設計變得更加成功。

        最后,AJAX請求的返回對象為XML文件,這也是一個潮流,就是WEB SERVICE潮流一樣。易于和WEB SERVICE結合起來。

        好了,閑話少說,讓我們轉入正題吧。

        我們的第一個例子是基于Servlet為后臺的一個web應用。

        二、基于Servlet的AJAX

        這是一個很常見的UI,當用戶在第一個選擇框里選擇ZHEJIANG時,第二個選擇框要出現ZHEJIANG的城市;當用戶在第一個選擇框里選擇JIANGSU時,第二個選擇框里要出現JIANGSU的城市。

        首先,我們來看配置文件web.xml,在里面配置一個servlet,跟往常一樣:

      <web-app version="2.4"
      xmlns="http://java.sun.com/xml/ns/j2ee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
      http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

      <servlet>
      <servlet-name>SelectCityServlet</servlet-name>
      <servlet-class>com.stephen.servlet.SelectCityServlet</servlet-class>
      </servlet>

      <servlet-mapping>
      <servlet-name>SelectCityServlet</servlet-name>
      <url-pattern>/servlet/SelectCityServlet</url-pattern>
      </servlet-mapping>

      </web-app>

        然后,來看我們的JSP文件:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>MyHtml.html</title>

      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">

      <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

      </head>
      <script type="text/javascript">
      function getResult(stateVal) {
        var url = "servlet/SelectCityServlet?state="+stateVal;
        if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        }else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if(req){
        req.open("GET",url, true);
        req.onreadystatechange = complete;
        req.send(null);
        }
      }
      function complete(){
        if (req.readyState == 4) {
        if (req.status == 200) {
        var city = req.responseXML.getElementsByTagName("city");
        file://alert(city.length);
        var str=new Array();
        for(var i=0;i<city.length;i++){
        str[i]=city[i].firstChild.data;
        }
        file://alert(document.getElementById("city"));
        buildSelect(str,document.getElementById("city"));
        }
        }
      }
      function buildSelect(str,sel) {
        sel.options.length=0;
        for(var i=0;i<str.length;i++) {
        sel.options[sel.options.length]=new Option(str[i],str[i])
        }
      }
      </script>
      <body>
      <select name="state" onChange="getResult(this.value)">
        <option value="">Select</option>>
        <option value="zj">ZEHJIANG</option>>
        <option value="zs">JIANGSU</option>>
      </select>
      <select id="city">
        <option value="">CITY</option>
      </select>
      </body>
      </html>

        第一眼看來,跟我們平常的JSP沒有兩樣。仔細一看,不同在JS里頭。

        我們首先來看第一個方法:getResult(stateVal),在這個方法里,首先是取得XmlHttpRequest;然后設置該請求的url:req.open("GET",url, true);接著設置請求返回值的接收方法:req.onreadystatechange = complete;該返回值的接收方法為——complete();最后是發送請求:req.send(null);

        然后我們來看我們的返回值接收方法:complete(),這這個方法里,首先判斷是否正確返回,如果正確返回,用DOM對返回的XML文件進行解析。關于DOM的使用,這里不再講述,請大家參閱相關文檔。得到city的值以后,再通過buildSelect(str,sel)方法賦值到相應的選擇框里頭去。

        最后我們來看看Servlet文件:

      import java.io.IOException;
      import java.io.PrintWriter;

      import javax.servlet.ServletException;
      import javax.servlet.http.HttpServlet;
      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;

      /**
      * @author Administrator
      *
      * TODO To change the template for this generated type comment go to
      * Window - Preferences - Java - Code Style - Code Templates
      */
      public class SelectCityServlet extends HttpServlet {


        public SelectCityServlet() {
        super();
        }

        public void destroy() {
        super.destroy();
        }

        public void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        String state = request.getParameter("state");
        StringBuffer sb=new StringBuffer("<state>");
        if ("zj".equals(state)){
        sb.append("<city>hangzhou</city><city>huzhou</city>");
        } else if("zs".equals(state)){
        sb.append("<city>nanjing</city><city>yangzhou</city><city>suzhou</city>");
        }
        sb.append("</state>");
        PrintWriter out=response.getWriter();
        out.write(sb.toString());
        out.close();
        }
      }

        這個類也十分簡單,首先是從request里取得state參數,然后根據state參數生成相應的XML文件,最后將XML文件輸出到PrintWriter對象里。

        到現在為止,第一個例子的代碼已經全部結束。是不是比較簡單?我們進入到第二個實例吧!這次是基于JSP的AJAX的一個應用。

        三、基于JSP的AJAX

      這個例子是關于輸入校驗的問題,我們知道,在申請用戶的時候,需要去數據庫對該用戶性進行唯一性確認,然后才能繼續往下申請。

        這種校驗需要訪問后臺數據庫,但又不希望用戶在這里提交后等待,當然是AJAX技術大顯身手的時候了。

        首先來看顯示UI的JSP:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>Check.html</title>

      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">

      <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

      </head>
      <script type="text/javascript">
      var http_request = false;
      function send_request(url) {//初始化、指定處理函數、發送請求的函數
      http_request = false;
      file://開始初始化XMLHttpRequest對象
      if(window.XMLHttpRequest) { file://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;
      }
      http_request.onreadystatechange = processRequest;
      // 確定發送請求的方式和URL以及是否同步執行下段代碼
      http_request.open("GET", url, true);
      http_request.send(null);
      }
      // 處理返回信息的函數
        function processRequest() {
        if (http_request.readyState == 4) { // 判斷對象狀態
        if (http_request.status == 200) { // 信息已經成功返回,開始處理信息
        alert(http_request.responseText);
        } else { file://頁面不正常
        alert("您所請求的頁面有異常。");
        }
        }
        }
      function userCheck() {
      var f = document.form1;
      var username = f.username.value;
      if(username=="") {
        window.alert("The user name can not be null!");
        f.username.focus();
        return false;
      }
      else {
        send_request('check1.jsp?username='+username);
      }
      }

      </script>
      <body>
      <form name="form1" action="" method="post">
      User Name:<input type="text" name="username" value="">&nbsp;
      <input type="button" name="check" value="check" onClick="userCheck()">
      <input type="submit" name="submit" value="submit">
      </form>
      </body>
      </html>

        所有的JS都跟上一個例子一樣,不同的只是對返回值的操作,這次是用alert來顯示:alert(http_request.responseText);

        我們來看處理邏輯JSP:

      <%@ page contentType="text/html; charset=gb2312" language="java" errorPage="" %>
      <%
      String username= request.getParameter("username");
      if("educhina".equals(username)) out.print("用戶名已經被注冊,請更換一個用戶名。");
      else out.print("用戶名尚未被使用,您可以繼續。");
      %>

        非常簡單,先取得參數,然后作處理,最后將結果打印在out里。
        我們的第三個例子仍然以這個唯一性校驗為例子,這次結合Struts開發框架來完成AJAX的開發。

        四、基于Struts的AJAX

        首先,我們仍然是對Struts應用來做配置,仍然是在struts-config,xml文件里做配置,如下:

      <action type="com.ajax.CheckAction"
        scope="request" path="/ajax/check">
        <forward name="success" path="/check.jsp"/>
      </action>


        跟普通的Struts應用的配置一樣,只是沒有ActionForm的配置。

        下面是Action類:

      package com.ajax;

      import java.io.PrintWriter;

      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;

      import org.apache.struts.action.Action;
      import org.apache.struts.action.ActionForm;
      import org.apache.struts.action.ActionForward;
      import org.apache.struts.action.ActionMapping;
      import org.apache.struts.action.DynaActionForm;

      /**
      * @author Administrator
      *
      * TODO To change the template for this generated type comment go to
      * Window - Preferences - Java - Code Style - Code Templates
      */
      public class CheckAction extends Action
      {
      public final ActionForward execute(ActionMapping mapping, ActionForm form,
        HttpServletRequest request,
        HttpServletResponse response)
      throws Exception
      {
        System.out.println("haha...............................");
        String username= request.getParameter("username");
        System.out.println(username);
        String retn;
        if("educhina".equals(username)) retn = "Can't use the same name with the old use,pls select a difference...";
        else retn = "congraducation!you can use this name....";
        PrintWriter out=response.getWriter();
        out.write(retn);
        out.close();
        return mapping.findForward("success");
      }
      public static void main(String[] args)
      {
      }
      }

        我們可以看到里面的邏輯跟上例中Servlet里的邏輯一樣。最后,我們來看看JSP:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
      <html>
      <head>
      <title>Check.html</title>

      <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
      <meta http-equiv="description" content="this is my page">

      <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

      </head>
      <script type="text/javascript">
      var http_request = false;
      function send_request(url) {//初始化、指定處理函數、發送請求的函數
      http_request = false;
      file://開始初始化XMLHttpRequest對象
      if(window.XMLHttpRequest) { file://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;
      }
      http_request.onreadystatechange = processRequest;
      // 確定發送請求的方式和URL以及是否同步執行下段代碼
      http_request.open("GET", url, true);
      http_request.send(null);
      }
      // 處理返回信息的函數
        function processRequest() {
        if (http_request.readyState == 4) { // 判斷對象狀態
        if (http_request.status == 200) { // 信息已經成功返回,開始處理信息
        alert(http_request.responseText);
        } else { file://頁面不正常
        alert("您所請求的頁面有異常。");
        }
        }
        }
      function userCheck() {
      var f = document.forms[0];
      var username = f.username.value;
      if(username=="") {
        window.alert("The user name can not be null!");
        f.username.focus();
        return false;
      }
      else {
        send_request('ajax/check.do?username='+username);
      }
      }

      </script>
      <body>
      <form name="form1" action="" method="post">
      User Name:<input type="text" name="username" value="">&nbsp;
      <input type="button" name="check" value="check" onClick="userCheck()">
      <input type="submit" name="submit" value="submit">
      </form>
      </body>
      </html>

        我們可以看到,JSP基本是一樣的,除了要發送的url:ajax/check.do?username='+username。

        最后,我們來看一個基于Struts和AJAX的復雜一些的例子,如果不用AJAX技術,UI的代碼將十分復雜。

        五、一個復雜的實例

        這是一個比較復雜的級聯:一共八個列表框,三個下拉框。從第一個列表框里選擇到第二個列表框里后,第一個選擇框里的選項是第二個列表框的選擇;然后,在第一個選擇框里選擇以后,與選擇值關聯的一些選項出現在第三個列表框里。從第三個列表框里選擇選項到第四個列表框里,同樣,第二個選擇框的選項也是第四個列表框的選項;如果對第二個選擇框進行選擇后,與選擇值關聯的一些選項出現在第六個列表框里,依次類推……

        這個UI的邏輯就比較復雜,但使用了AJAX使得我們實現起來就簡單多了,這個例子我們除了使用Action類,還要用到POJO類和Business類,然后我們擴展的話,可以通過Business類和數據庫連接起來。

        我們還是先看配置文件:

      <action type="com.ajax.SelectAction"
        scope="request" path="/ajax/select">
        <forward name="success" path="/select.jsp"/>
      </action>

      然后看看Action類:

      /*
      /**
      * Title : Base Dict Class
      * Description : here Description is the function of class, here maybe multirows
      * Copyright: Copyright (c) 2004
      * @company Freeborders Co., Ltd.
      * @Goal Feng   
      * @Version   1.0
      */

      package com.ajax;

      import java.io.PrintWriter;
      import java.util.List;

      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;

      import org.apache.struts.action.Action;
      import org.apache.struts.action.ActionForm;
      import org.apache.struts.action.ActionForward;
      import org.apache.struts.action.ActionMapping;

      /**
      * @author Administrator
      *
      * TODO To change the template for this generated type comment go to
      * Window - Preferences - Java - Code Style - Code Templates
      */
      public class SelectAction extends Action
      {
      public final ActionForward execute(ActionMapping mapping, ActionForm form,
        HttpServletRequest request,
        HttpServletResponse response)
      throws Exception
      {
        response.setContentType("text/xml");
        response.setHeader("Cache-Control", "no-cache");
        String type = request.getParameter("type");
        String id = request.getParameter("id");
        System.out.println(id);
        StringBuffer sb=new StringBuffer("<select>");
        sb.append("<type>"+type+"</type>");
        
        List list = new SelectBusiness().getData(id);
        for(int i=0;i<list.size();i++)
        {
        SelectForm sel = (SelectForm)list.get(i);
        sb.append("<text>"+sel.getText()+"</text><value>"+sel.getValue()+"</value>");
        }

        sb.append("</select>");
        PrintWriter out=response.getWriter();
        out.write(sb.toString());
        out.close();
        System.out.println(sb.toString());
        return mapping.findForward("success");
      }
      public static void main(String[] args)
      {
      }
      }

        POJO類和Business類:
      package com.ajax;
      /**
      * @author Administrator
      *
      * TODO To change the template for this generated type comment go to
      * Window - Preferences - Java - Code Style - Code Templates
      */
      public class SelectForm
      {
      private String text;
      private String value;

      /**
      * @return Returns the text.
      */
      public String getText()
      {
      return text;
      }
      /**
      * @param text The text to set.
      */
      public void setText(String text)
      {
      this.text = text;
      }
      /**
      * @return Returns the value.
      */
      public String getValue()
      {
      return value;
      }
      /**
      * @param value The value to set.
      */
      public void setValue(String value)
      {
      this.value = value;
      }
      public static void main(String[] args)
      {
      }
      }


      package com.ajax;

      import java.util.ArrayList;
      import java.util.List;

      /**
      * @author Administrator
      *
      * TODO To change the template for this generated type comment go to
      * Window - Preferences - Java - Code Style - Code Templates
      */
      public class SelectBusiness
      {
      public List getData(String id)
      {
      ArrayList list = new ArrayList();
      for(int i=1;i<6;i++)
      {
        SelectForm form = new SelectForm();
        form.setText(id+i);
        form.setValue(id+i);
        list.add(form);
      }
      return list;
      }

      public static void main(String[] args)
      {
      }
      }

        回復  更多評論   

    • # re: DWR: Easy AJAX for JAVA  self Posted @ 2006-11-28 11:08
      XMLHttpRequest 是 Ajax 的關鍵技術.Javascript也是靠 XMLHttpRequest 來獲取XML的. 現在我們來看看如何建立 XMLHttpRequest 對象,然后讀取XML.

      Mozilla和IE同樣支持 XMLHttpRequest ,不過在使用過程中是不一樣的.

      - Mozilla 瀏覽器自帶了 XMLHttpRequest 接口
      new XMLHttpRequest()

      - 而 IE 需要使用ActiveX對象來建立.
      new ActiveXObject("Microsoft.XMLHTTP")

      XMLHttpRequest 的常用屬性和方法
      屬性
      onreadystatechange
      readyState
      responseText
      responseXML
      status
      statusText

      方法
      abort()
      getAllResponseHeaders()
      getResponseHeader("<headerName>")
      open("<method>", "URL"[,asyncFlag[, "<username>"[,"<password>"]]])
      send(content)
      setRequestHeader("<name>", "<value>")


      下面開始我們的程序,為了方便使用 XML 我把操作XML的方法用一個 function 封裝起來
      程序代碼
      function XMLHttpObject(url,Syne){
      var XMLHttp=null
      var o=this
      this.url=url
      this.Syne=Syne

      this.sendData = function()
      {
      if (window.XMLHttpRequest) {
      XMLHttp = new XMLHttpRequest();
      } else if (window.ActiveXObject) {
      XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
      with(XMLHttp){
      open("GET", this.url, this.Syne);
      onreadystatechange = o.CallBack;
      send(null);
      }
      }

      this.CallBack=function()
      {
      if (XMLHttp.readyState == 4) {
      if (XMLHttp.status == 200) {
      //Xml加載成功后的操作
      }
      }
      }

      this.getText=function()
      {
      if (XMLHttp==null) {return "還沒加載 XMLHttpRequest"}
      if (XMLHttp.readyState==4) {return XMLHttp.responseText}
      return XMLHttp.readyState
      }
      }


      - 現在我們根據上面寫好的Function建立一個XML對象
      var XMLDoc1=new XMLHttpObject("1.xml",true)

      - 發送數據,這個過程將調用 XMLHttpRequest 來對 1.xml 進行request
      XMLDoc1.sendData()

      - 當加載完成后,可以用下面的方法獲取 XML 文檔的文本內容了
      XMLDoc1.getText()

      這樣 XMLHttpRequest 建立基本上完成了.
      請看完整的代碼演示

      本站原創文章,如需轉載請注明出處
        回復  更多評論   

     
    Copyright © 智者無疆 Powered by: 博客園 模板提供:滬江博客


       觀音菩薩贊

    主站蜘蛛池模板: 亚洲色www永久网站| 亚洲 日韩经典 中文字幕| 69影院毛片免费观看视频在线| 亚洲欧洲久久精品| 国产午夜免费秋霞影院| 日韩免费观看一区| 亚洲爆乳精品无码一区二区| 亚洲综合色婷婷七月丁香| 1a级毛片免费观看| 一级人做人a爰免费视频| 亚洲福利电影在线观看| 亚洲国产精品成人一区| 亚洲视频免费一区| 男女男精品网站免费观看 | 亚洲乱码在线视频| 亚洲精品麻豆av| 麻豆一区二区免费播放网站| 人成免费在线视频| 亚洲精品二三区伊人久久| 国产午夜亚洲不卡| 性色av免费观看| 99热这里只有精品免费播放 | 成人免费无码视频在线网站| 一级全免费视频播放| 亚洲 欧洲 自拍 另类 校园| 亚洲av中文无码乱人伦在线播放 | 欧亚一级毛片免费看| 亚洲欧洲精品一区二区三区| 国产亚洲成人久久| 日韩免费三级电影| 16女性下面扒开无遮挡免费| 青青操免费在线观看| 真正全免费视频a毛片| 国内精品久久久久影院亚洲| 亚洲天天在线日亚洲洲精| 国产精品亚洲综合一区| 免费看国产一级特黄aa大片| 女人张开腿等男人桶免费视频| 全部免费毛片在线播放| a级毛片高清免费视频| igao激情在线视频免费|