实践总结ajax各种使用方式(上)

导读:
  做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 是 910NAME SYSIBM VARCHAR 80 0 否1112PASSWD SYSIBM VARCHAR 255 0 否1314EMAIL SYSIBM VARCHAR 255 0 是1516STATUS SYSIBM VARCHAR 2 0 否1718DESCN SYSIBM VARCHAR 255 0 是
  在这里测试主要是获取LOGINID和NAME两列值,如上述页面显示第一位置是LOGINID(test1),第二个位置是NAME(test)
  前台页面:
  1

  2
  3 input your name 4  
  5
  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
  12
  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 2-
  3 4 5
  控制层方法如下:
  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 response4 * @param text5 */
  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)); 910 for (Iterator it = namelist.iterator(); it.hasNext();) {11 ListOrderedMap listOrderdMap = (ListOrderedMap) it.next();1213 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);2728 nCount++
  29 if (nCount >= nMaxCount)30 break
  31 }
  32 return doc;33 }
  主要是从后台数据库进行数据查询并组装成xml格式
  这样就达到了使用xml方式完成自动提示功能,今天先总结到这里,以后陆续更新

本文转自
http://www.blogjava.net/wuxj888java/archive/2008/01/07/173385.html
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值