溫暖潔森

          勇敢做自己

            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 閱讀(2053) 評論(1)  編輯  收藏 所屬分類: J2EE

          評論

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

          主站蜘蛛池模板: 无锡市| 鲁甸县| 舟曲县| 安徽省| 襄汾县| 泸州市| 兰坪| 当涂县| 中宁县| 滦南县| 景东| 金坛市| 临西县| 伊宁县| 屯门区| 裕民县| 营山县| 遂川县| 新巴尔虎左旗| 芷江| 河池市| 宜春市| 西安市| 苍南县| 紫阳县| 济阳县| 大姚县| 怀安县| 尤溪县| 望谟县| 海兴县| 普兰店市| 万宁市| 桃园县| 额济纳旗| 宜兴市| 磴口县| 巴彦县| 五寨县| 秀山| 云南省|