温暖洁森

勇敢做自己

  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 阅读(2033) 评论(1)  编辑  收藏 所属分类: J2EE

评论

# re: [原创]实践总结ajax各种使用方式(上)[未登录] 2011-10-14 14:11
噶的我cars对v  回复  更多评论
  


只有注册用户登录后才能发表评论。


网站导航: