當柳上原的風吹向天際的時候...

          真正的快樂來源于創造

            BlogJava :: 首頁 :: 聯系 :: 聚合  :: 管理
            368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks

          #

           

           

           

           

           

           

          TeamBiz中Ajax的基本運用

           

           

           

           

           

           

           

          作者:何楊

          撰寫日期:2012年2月23日

          版本:1.03

          更新日期:2012年2月28日

           

           

          第一部分:功能說明

          提供前臺頁面到后臺程序的異步請求響應通道。

          第二部分:核心組件

          名稱

          路徑

          說明

          Prototype1.6.0.3

          teambiz\WebRoot\page\js\prototype-1.6.0.3.js

          Prototype是一個有歷史的JS類庫,TeamBiz中主要使用了它的Ajax部分及$函數。

          注意,Teambiz并非對Prototype產生依賴,Prototype為Teambiz提供的僅是Ajax.Rquest對象及$函數而已,因為teambiz已經包含了普適版本的$函數,因此換用別的JS框架并不困難。

          AjaxAction

          teambiz\src\com\ibm\heyang\action\base\AjaxAction.java

          AjaxAction是所有響應Ajax異步請求的Action的基類,它主要提供以下四項功能:

          1.設置Response;

          2.將url中的請求參數解碼后放入RequestParamMap對象中;

          3.強制子類實現函數process;

          4.當子類的process函數中出現異常時,接受異常并包裝成XML傳給前臺頁面。

          RequestParamMap

          teambiz\src\com\ibm\heyang\action\base\RequestParamMap.java

          RequestParamMap內部包含一個哈希表,以鍵值對的方式存儲前臺URL中的參數及其值。

          RequestParamMap對象的生成在于AjaxAction的getRequestParamMap函數中。

          它主要提供以下功能:

          1.將參數集約化,此舉能簡化后臺函數的編寫。

          2.當后臺函數使用其內部不存在的參數時,它能自主拋出一個異常,通過AjaxAction的包裝傳給前臺,使得編寫函數的程序員能快速進行錯誤定位。

          3.對前臺編寫的參數進行UTF-8解碼,此舉與前臺對URL進行兩次UTF8編碼配合,統一解決了非ASC碼字符傳送產生亂碼的問題。

          Ajax.Request

          定義于prototype-1.6.0.3.js中

          Prototype中定義的Ajax請求對象,其參數有四個,URL,請求方法,成功函數和失敗函數。相對于傳統方式,它的可控性更高。

           

          第三部分:前臺和后臺的約定

          考慮到代碼解讀和人工解讀的雙重便利性,TeamBiz采用XML而不是JSON作為前后臺數據的載體,此XML采用了一些約定以規范化編碼。

          Ajax異步調用過程中,后臺需要兩組數據來說明響應細節,一個是狀態,如果它的值是OK的話,說明已經取得了請求想要的數據,此時向前臺傳出的XML會類似如下格式:

          <response>

          <status>ok</status>

          <node>

          <a>a</a>

          <b>b</b>

          </node>

          </response>

          如果它的值是NG的話,說明后臺能響應,但由于某種原因(用戶未登錄,用戶缺乏權限,參數缺失,后臺組件尚未就緒,異常拋出等,前二者需要程序員編碼,后兩者框架已經代為實現),不能傳回請求想要的數據,此時向前臺傳出的XML會類似如下格式:

           

          <response>

          <status>ng</status>

          <text>請登錄后再來執行此操作</text>

          </response>

           

          后臺進行如上約定后,前臺就可以采用如下統一的格式來處理XHR響應:

          new Ajax.Request(url,{    

                     method:'get',    

                     onSuccess: function(ajaxObj){   

                                  // alert(ajaxObj.responseText);   // 這里不要隨意刪去,有時需要打開屏蔽以觀察后臺傳來的XML文本                   

                          var status=ajaxObj.responseXML.getElementsByTagName("status")[0].firstChild.data;

                                                                                                         

                                                          if(status=="ok"){

                                                                      ....// 狀態為ok時的處理

                                                          }

                                                          else{

                                                                      ....// 狀態為ng時的處理

                                                          }

                     },    

                     onFailure: function(){

                                                          ....// 后臺沒有響應時的處理

                     }  

                  }

          );

           

          第四部分:使用步驟

          步驟

          說明

          參照

          在前臺編寫向后臺發出請求的JS函數。

          在此函數需要進行三件事:

          1.編寫URL。

          2.對URL進行UTF8編碼。

          3.會使用一個Ajax.Request對象向后臺發出請求。

          teambiz\WebRoot\page\js\common.js中fetchMenuFromBg函數。

          在后臺編寫響應前端請求的Action

          Action需要繼承自AjaxAction。在其process函數中主要進行以下三件事:

          1.權限驗證。

          2.使用后端組件取得前端想要的數據。

          3.以XML方式將數據傳回。

          teambiz\src\com\ibm\heyang\action\menu\FetchMenuAction.java

          struts-config.xml注冊Action

          由于完全不需要靜態或動態的form,此Action格式很簡單,僅包含path,type和scope三部分。

          teambiz\WebRoot\WEB-INF\struts-config.xml中的

          <action path="/FetchMenu" type="com.ibm.heyang.action.menu.FetchMenuAction" scope="request" >

          </action>

           

          第五部分:小結

          TeamBiz中全部向后臺的請求都是通過Ajax異步方式實現的,相對于傳統方式,它有以下優勢:

          1.由于只需要提取必要的資源,因此占用資源少。

          2.有多種狀態,多個函數用來處理后臺的響應,這使得控制更加多樣化。

          3.由于前臺在請求時處于靜止狀態,因此無需刻意保存前臺頁面數據。

          4.由于不需要編寫form,forward等元素,使得控制文件編寫簡單方便。

          posted @ 2012-02-29 10:31 何楊 閱讀(224) | 評論 (0)編輯 收藏

          posted @ 2012-02-29 10:30 何楊 閱讀(189) | 評論 (0)編輯 收藏

           

           

           

           

           

           

          Teambiz整體介紹

           

           

           

           

           

           

           

          作者:何楊

          撰寫日期:2012年2月27日

          版本:1.00

          更新日期:  

           

           

          第一部分:TeamBiz說明

          TeamBiz是一個處理團隊成員之間事務的Web程序,用戶可以使用它給自己或者別人規定任務,完成給自己的任務或是跟蹤分給他人的事務。

          TeamBiz差異化的一點在于基本使用Ajax方式進行前后臺交互,后臺查詢數據庫后傳回的是XML,前臺進行解析并使用DOM進行頁面操作。系統在前后臺提供了一系列類來協助程序員完成常見編碼任務,相信這能減輕程序員的負擔并提高代碼的一致性。

          TeamBiz是一個框架性說明程序,在此程序的基礎上還可以完成擴充,如菜單改寫成樹樣式,后臺增加更多的領域對象和服務類等。

          TeamBiz遺憾的一點在于沒有解決當領域對象及其對應的表數據增加時系統復雜度的同時增加,也許再引入一個或多個中間層次能將熵維持在一個能控制的限度內,如果你知道怎么去做,請寫信告訴我。(heyanghy@cn.ibm.com,heyang78@gmail.com)

          第二部分:TeamBiz使用的框架

          名稱

          說明

          Stuts1.3.8

          Teambiz使用了Struts的控制層功能和Tile及極少數標簽。

          Spring2.5

          Teambiz使用了Spring的IoC和JDBCTemplate。

          Hibernate3.0

          Teambiz使用Hibernate進行單個領域對象的創建和更新。

          Prototype1.6.0.3

          Teambiz使用了Prototype的Ajax.Request,$,window.load三部分。

           

          第二部分:TeamBiz其它相關事項

          名稱

          說明

          數據庫

          MySql5.2,如果需要更換數據庫,請修改teambiz\cfg\appctx-datasource.xml中數據源配置并檢查Dao類中諸Sql是否能在新數據庫中正常運行。

          開發環境

          MyEclipse9,將程序包導入即可運行。

           

          posted @ 2012-02-29 10:25 何楊 閱讀(291) | 評論 (0)編輯 收藏

          通常,我們可以如下所示制作橫向菜單:
          #commonUsedDocumentContainerDiv ul{
              margin
          :0px;
              padding
          :0px;
              list-style-type
          :none;
              vertical-align
          :middle  ;
          }

          #commonUsedDocumentContainerDiv li a
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#000000;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          #commonUsedDocumentContainerDiv li a:hover
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#0000ff;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          這樣做,在FF或是ie8以上的版本中,都沒有問題,但是ie6有問題,具體上看來本來應該是一橫排的菜單變成了階梯狀,一下子就難看了。

          這是因為ie6對ul/li的解釋方式所致,要解決這個問題也很簡單,對li的樣式也進行設置就行了,如下的粗體部分:
          #commonUsedDocumentContainerDiv ul{
              margin
          :0px;
              padding
          :0px;
              list-style-type
          :none;
              vertical-align
          :middle  ;
          }

          #commonUsedDocumentContainerDiv li
          {
              float
          :left;
              display
          :block;
              
              width
          :130px;  
              height
          :75px;
              
              background
          :#ffffff;
          }


          #commonUsedDocumentContainerDiv li a
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#000000;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          #commonUsedDocumentContainerDiv li a:hover
          {
              width
          :130px;  
              height
          :75px;
              line-height
          :32px;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          :14px;   
              font-weight
          :bold;           
              color
          :#0000ff;
              
              text-decoration
          :none;
              text-align
          :left;  
              
              background
          :#ffffff;
          }

          另外需要注意的是,li a和li a:hover中照樣可以設置display:block,如果li a 或者li a:hover 有背景還非得如此不可,這和網上流傳甚廣的方案不一樣,看來知識不能拿來就用,還需要自己嘗試一下。
          posted @ 2012-02-14 15:31 何楊 閱讀(374) | 評論 (0)編輯 收藏

          先看代碼:
          #contentContainer{
              margin-top
          :10px;
              padding
          :0px;
              border
          :0px solid #336699;
              
              width
          :100%;
              
              overflow-x
          :hidden;
          }

          當div的寬度基本和瀏覽器可控寬度一致時,滾動條就會出現,最麻煩的是會出現兩個,一個div的,一個瀏覽器的。

          這時,可以如上所示,將超出部分隱藏,這樣滾動條就不會出現了。

          IE上效果是滾動條徹底沒有,但是FF只是把滾動條置灰,兩者還是有區別的。
          posted @ 2012-02-14 15:19 何楊 閱讀(681) | 評論 (0)編輯 收藏

          #detailInstructionContentDiv{
              margin
          :0px;
              padding-top
          :10px;
              padding-left
          :22px;

              border
          :0px solid #336699;
              
              width
          :150px;
              height
          :230px;
              
              text-align
          : left;
              
              font-family
          :"宋體","Tahoma"; 
              font-size
          : 12px;    
              font-weight
          :normal;
              color
          :#333333;
              
              white-space
          :normal;
          }

          見以上粗體部分,比wordbreak之類的好用得多。
          posted @ 2012-02-14 15:13 何楊 閱讀(667) | 評論 (0)編輯 收藏

          頁面代碼,其中粗體部分是需要你根據實際情況進行修改的,其它保持原狀:
          <%@ page language="java" pageEncoding="UTF-8"%>
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          <HTML>
          <title>標題</title>
          <BODY>
          <center><OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" WIDTH="1440" HEIGHT="772" CODEBASE="http://active.macromedia.com/flash5/cabs/swflash.cab#version=7,0,0,0">
          <PARAM NAME=movie VALUE="1_1.swf">
          <PARAM NAME=play VALUE=true>
          <PARAM NAME=loop VALUE=false>
          <PARAM NAME=wmode VALUE=transparent>
          <PARAM NAME=quality VALUE=low>
          <EMBED SRC="1_1.swf" WIDTH=1440 HEIGHT=772 quality=low loop=false wmode=transparent TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
          </EMBED>
          </OBJECT></center>
          <SCRIPT src='swf.js'></script>
          </BODY>
          </HTML>

          導入的swf.js代碼如下:
          obj=document.getElementsByTagName('object');
          for (var i=0; i<obj.length; ++i)
            obj[i].outerHTML
          =obj[i].outerHTML;
          posted @ 2012-02-13 11:04 何楊 閱讀(1036) | 評論 (2)編輯 收藏

          如果以如下方式打開新窗口:
          <href="javascript:openWindow('swf/1_1.jsp','',1440,772);" >示例</a>

          那么,原窗口會變成一個含有[Object]字符的窗口。

          換用下面方式即可,注意下面粗體部分的void(0),它表示沒有返回值:
          <href="javascript:openWindow('swf/1_1.jsp','',1440,772);void(0);" >示例</a>

          下面的openCenterWindow函數僅供參考:
          function openWindow(url,windowName,width,height){
              
          var left = 0;     
              
          var top = 0;       
                
              
          var wnd=window.open(url,windowName,"height="+height+",width="+width+",top="+top+",left="+left+",resizable=yes,scrollbars=yes,status=no,location=no,");
              
          return wnd;
          }
          posted @ 2012-02-13 10:59 何楊 閱讀(1148) | 評論 (1)編輯 收藏

          說明:
          1.下載http://www.apache.org/dyn/closer.cgi/poi/release/bin/poi-bin-3.7-20101029.zip后,將poi-3.7目錄下的jar包放入lib目錄, 再將此工程載入Eclipse/MyEclipse即可。
          2.界面中文本框供輸出數據量用,在我的T410上測試數據量在3.5W~3.6W之間,再多就報java.lang.OutOfMemoryError錯誤。附帶提一下輸出數據量的問題,如果修飾單元格的代碼越簡單,那么能輸出的數據就越多,反之數據就少了。
          3.主要代碼如下:

          Sevlet代碼:
          package com.heyang.action;


          import java.io.BufferedOutputStream;

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

          import org.apache.poi.hssf.usermodel.HSSFWorkbook;

          import com.heyang.service.DownloadService;

          /**
           * POI下載的Servlet
           * 
          @author heyang
           *
           
          */
          public class DownloadServlet extends HttpServlet {
              
          private static final long serialVersionUID = 56890894234786L;
              
              
          public void doPost(HttpServletRequest request, HttpServletResponse response)
                      
          throws ServletException, java.io.IOException {
                  String fileName
          ="download.xls";
                  response.setHeader(
          "Content-disposition""attachment; filename="+fileName);// 設定輸出文件頭   
                  response.setContentType("application/msexcel");// 定義輸出類型 
                  
                  
          try{
                      
          int rowCount=Integer.parseInt(request.getParameter("rowCount"));
                      
                      
          // 表頭行
                      String[] headers=new String[]{"更新ID","賬期","基站編號","基站名稱","站點狀態","部門名稱","站點類型","占用類型","預提(元)","未核銷金額","上期未核銷","開始月份","結束月份","上期抄表數","本期抄表數","電價","電量","本期報賬(元)","補提(元)","預提匯總(元)","成本中心","專業","本期報賬單號","基站類別","線損"};
                      DownloadService service
          =new DownloadService();

                      HSSFWorkbook workbook
          =service.generateWorkbook(rowCount, headers.length);

                      ServletOutputStream out 
          = response.getOutputStream();
                      BufferedOutputStream bos 
          = new BufferedOutputStream(out);        
                      workbook.write(bos);
                      bos.flush();
                      bos.close();
                      
                  }
          catch(Exception ex){
                      ex.printStackTrace();
                  }
                  
                  
          return ;
              }
                  
              
          public void doGet(HttpServletRequest request, HttpServletResponse response)
                      
          throws ServletException, java.io.IOException {
                  doPost(request, response);
              }
          }

          Service代碼:
          package com.heyang.service;

          import org.apache.poi.hssf.usermodel.HSSFCell;
          import org.apache.poi.hssf.usermodel.HSSFRow;
          import org.apache.poi.hssf.usermodel.HSSFSheet;
          import org.apache.poi.hssf.usermodel.HSSFWorkbook;


          /**
           * 下載服務類
           * 
           * 
          @author heyang
           *
           
          */
          public class DownloadService{
              
          /**
               * 生成工作簿對象
               * 
          @param rowCount
               * 
          @param columnCount
               * 
          @return
               
          */
              
          public HSSFWorkbook generateWorkbook(int rowCount,int columnCount) throws Exception{
                  HSSFWorkbook workbook 
          = new HSSFWorkbook(); //產生工作簿對象
                  HSSFSheet sheet = workbook.createSheet(); //產生工作表對象
                  String value=null;
                  
                  HSSFRow row 
          = null;
                  HSSFCell cell 
          = null;
                  
                  
          for(int i=0;i<rowCount;i++){
                      row 
          = sheet.createRow(i);//創建一行
                      
                      
          for(int j=0;j<columnCount;j++){
                          value
          =""+i+","+j;
                          
                          cell 
          = row.createCell(j);
                          cell.setCellValue(value);
                          
                          cell 
          = null;
                      }
                      
                      row 
          = null;
                  }
                  
                  row 
          = null;
                  cell 
          = null;
                  
                  
          return workbook;
              }
          }

          4.工程下載地址:
          posted @ 2012-02-01 15:48 何楊 閱讀(767) | 評論 (0)編輯 收藏

          1.Select控件在頁面上的寫法:
          <select id="monthSelectCbo">
              
          <option value="01">01</option>
              
          <option value="02">02</option>
              
          <option value="03">03</option>
              
          <option value="04">04</option>
              
          <option value="05">05</option>
          </select>

          2.設定select控件的當前項:
          可以用:
          $(
          "monthSelectCbo").value=month;
          也可以用:
          $(
          "monthSelectCbo").selectedIndex=1;

          3.取得select控件的當前內容:
          var month= $("monthSelectCbo").value; 

          4.取得select空間選擇項的序號:
          var selIndex=$("monthSelectCbo").selectedIndex;

          5.清除select控件的所有原有值:
          var myListbox=$("belongToCompanyCbo");

          for(var i=myListbox.options.length-1;i>=0;i--){
              myListbox.remove(i);
          }

          6.使用JavaScript給Select控件設定值:
          var newOption=new Option;
          newOption.value
          ="Beijing";
          newOption.text
          ="北京";
          monthSelectCbo.add(newOption);
          posted @ 2012-01-12 11:31 何楊 閱讀(271) | 評論 (0)編輯 收藏

          僅列出標題
          共28頁: First 上一頁 5 6 7 8 9 10 11 12 13 下一頁 Last 
          主站蜘蛛池模板: 唐海县| 镇江市| 都兰县| 岗巴县| 财经| 云龙县| 绥化市| 阳春市| 英吉沙县| 桐乡市| 建昌县| 张家港市| 卢湾区| 奉新县| 虎林市| 闸北区| 太保市| 行唐县| 和田市| 商南县| 阳朔县| 土默特左旗| 池州市| 磐安县| 襄汾县| 当雄县| 竹溪县| 闻喜县| 安宁市| 红桥区| 广水市| 陇西县| 嘉峪关市| 广州市| 朝阳区| 高密市| 电白县| 常宁市| 江门市| 古丈县| 井研县|