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

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

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

    溫暖潔森

    勇敢做自己

      BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
      13 隨筆 :: 1 文章 :: 70 評論 :: 0 Trackbacks
          做ajax方面的開發也有兩年時間了,使用過許多方式進行ajax方面的開發,以下是自己使用過的幾種方式

    一、基本文本內容(Text方式)

    二、xml方式

    三、json方式

    四、DWR等開源框架


    1、Text方式是ajax開發中最為簡單的一種方式。它返回就是一段普通的文本內容,主要是在操作過程中一些信息提示使用

    比較常見的是在用戶注冊中新增用戶判斷用戶名是否存在。

    2.xml方式是ajax方式使用最多的一種方式,它的數據表達更豐富,本文以一個自動提示的例子為原型介紹,

    大家都知道大名鼎鼎的google,它里面強大的自動提示功能使很多人為之傾倒。




    我寫這個自動提示功能就是參考google的一些方法而成,使用JDOM做為xml解析方式




    表結構:

    后臺表結結構如下:

     1列                             類型      類型
     2名稱                           模式      名稱               長度     小數位  NU
     3L
     4------------------------------ --------- ------------------ -------- ----- ----
     5-
     6ID                             SYSIBM    INTEGER                   4     0 否
     7
     8LOGINID                        SYSIBM    VARCHAR                  20     0 是
     9
    10NAME                           SYSIBM    VARCHAR                  80     0 否
    11
    12PASSWD                         SYSIBM    VARCHAR                 255     0 否
    13
    14EMAIL                          SYSIBM    VARCHAR                 255     0 是
    15
    16STATUS                         SYSIBM    VARCHAR                   2     0 否
    17
    18DESCN                          SYSIBM    VARCHAR                 255     0 是
    在這里測試主要是獲取LOGINID和NAME兩列值,如上述頁面顯示第一位置是LOGINID(test1),第二個位置是NAME(test)

    前臺頁面:

     1 <form name="main" method="post" >
     2<tr>
     3  <td height="10" width="170" align="left"><nobr>input your name
     4 &nbsp;<input type="text" name="in_section_office_content" size="28">
     5 <input type=text name="in_section_office">
     6  <script language="Javascript">
     7    new AutoSuggest(document.getElementById('in_section_office_content'),
     8  new ACClient("${ctx}/autosuggest.do?method=query_xml&username=""160px",
     9  document.main.in_section_office,"USERNAME" ));
    10   
    </script>
    11   </td>
    12 </tr>



     ACClient腳本:

    1this.objInput.value        =    node.getAttribute(disvalue);
    2            document.main.in_section_office_content.value = node.getAttribute("USERNAME");

    上面的代碼主要是在前臺頁面中兩個輸入框需要顯示具體表字段信息,objInput是第二個文本域要顯示的內容(業務是需要USERNAME節點),in_section_office_content是第一個文本框顯示的內容(在這里是test)

    生成的xml格式如下:


    1  <?xml version="1.0" encoding="UTF-8" ?> 
    2<earnet>
    3  <object LOGINID="admin" USERNAME="admin" fullcontent="[admin][admin]" /> 
    4  <object LOGINID="test1" USERNAME="test" fullcontent="[test1][test]" /> 
    5  </earnet>


    控制層方法如下:
    1public void query_xml(ActionMapping mapping, ActionForm form,
    2            HttpServletRequest request, HttpServletResponse response) {
    3        renderDOM(response,autoSuggestService.getAutoSuggestStr("autosuggesttest",request.getParameter( "username" ).trim(), 7));
    4    }


    1 /**
    2     *使用JDom方式
    3     * @param response
    4     * @param text
    5     */

    6    protected void renderDOM(HttpServletResponse response, Document doc) {
    7        render(response, doc, "text/xml;charset=UTF-8");
    8    }


    業務方法如下:
     1public Document getAutoSuggestStr(String queryCode,String queryValue,int pageSize) {
     2        Element root = new Element("earnet");
     3        Document doc = new Document(root);
     4        int nMaxCount = pageSize;
     5
     6        int nCount = 0;
     7        List namelist = jdbcTemplate.queryForList(xmlService.get(
     8                queryCode, queryValue));
     9
    10        for (Iterator it = namelist.iterator(); it.hasNext();) {
    11            ListOrderedMap listOrderdMap = (ListOrderedMap) it.next();
    12
    13            Element ele = new Element("object");
    14            StringBuffer sb = new StringBuffer();
    15            if (listOrderdMap != null && !listOrderdMap.isEmpty()) {
    16                Set set = listOrderdMap.keySet();
    17                for (Object key : set) {
    18                    String value = (String) listOrderdMap.get(key);
    19                    if (StringUtils.isNotBlank(value)) {
    20                        ele.setAttribute((String)key, value);
    21                        sb.append("[").append(value).append("]");
    22                    }

    23                }

    24            }

    25            ele.setAttribute("fullcontent", sb.toString());
    26            root.addContent(ele);
    27
    28            nCount++;
    29            if (nCount >= nMaxCount)
    30                break;
    31        }

    32        return doc;
    33    }
    主要是從后臺數據庫進行數據查詢并組裝成xml格式

    這樣就達到了使用xml方式完成自動提示功能,今天先總結到這里,以后陸續更新


    posted on 2008-01-07 17:00 harry520 閱讀(2047) 評論(1)  編輯  收藏 所屬分類: J2EE

    評論

    # re: [原創]實踐總結ajax各種使用方式(上)[未登錄] 2011-10-14 14:11
    噶的我cars對v  回復  更多評論
      

    主站蜘蛛池模板: 午夜时刻免费入口| 久久综合九色综合97免费下载| 污污网站18禁在线永久免费观看| 亚洲无线码在线一区观看| 一级成人a免费视频| 四虎免费永久在线播放| 边摸边吃奶边做爽免费视频网站| 日本免费一区尤物| 久久精品熟女亚洲av麻豆 | 亚洲欧美日韩中文高清www777| 91青青国产在线观看免费| 亚洲乱亚洲乱淫久久| 久久久久久精品成人免费图片| 久久久久亚洲av无码专区蜜芽| 国产日韩精品无码区免费专区国产| 亚洲av午夜成人片精品电影| 精品久久久久久亚洲综合网| 无码国产精品一区二区免费3p| 精品无码国产污污污免费| 日韩在线视精品在亚洲| 成人免费一区二区无码视频| 亚洲大成色www永久网址| 国产免费av片在线看| 精品亚洲av无码一区二区柚蜜| 日日AV拍夜夜添久久免费| 国产午夜亚洲精品| 毛片在线免费视频| 最新亚洲卡一卡二卡三新区| 成人毛片免费观看| 在线观看亚洲视频| 亚洲精品久久久www| 一级毛片a免费播放王色电影| 亚洲成人影院在线观看| 一区二区三区免费视频网站| mm1313亚洲精品无码又大又粗| 黄色三级三级三级免费看| 久久久青草青青国产亚洲免观| 一区二区三区无码视频免费福利| 亚洲日韩精品射精日| 精品一区二区三区无码免费视频 | 亚洲丝袜中文字幕|