java学习网为广大的java爱好者提供最全最新的java教程 java源代码,希望大家多多支持本站,更多的java教程 java源码尽在java学习
Google
 

ajax入门 ajax使用方式1-ajax基础

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

二、xml方式

三、json方式

四、DWR等开源框架

1、Text方式是ajax开发中最为简单的一种方式。它返回就是一段普通的文本内容,主要是在操作过程中一些信息提示使用

比较常见的是在用户注册中新增用户判断用户名是否存在。

2.xml方式是ajax方式使用最多的一种方式,它的数据表达更丰富,本文以一个自动提示的例子为原型介绍,

大家都知道大名鼎鼎的google,它里面强大的自动提示功能使很多人为之倾倒。
表结构:

后台表结结构如下:

 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  <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方式完成自动提示功能,今天先总结到这里,以后陆续更新

ajax入门 ajax使用方式2-ajax基础


文章来自: 本站原创
引用通告地址: http://www.java125.cn/trackback.asp?tbID=2566
Tags:
评论: 0 | 引用: 4380 | 查看次数: 2992
brand clothing [2010-07-07 04:07 PM]
标题: brand clothing
链接: http://www.ankvi.com/
摘要: brand clothing6865

UGG boots [2010-07-07 04:07 PM]
标题: UGG boots
链接: http://www.cun4.com/
摘要: UGG boots6370

淘宝 [2010-07-07 04:07 PM]
标题: 淘宝
链接: http://sinyv.com/
摘要: 欢迎访问新雨淘宝网站。9625

丰胸 [2010-07-07 04:06 PM]
标题: 丰胸
链接: http://sinyv.com/index/0B/index.htm
摘要: 欢迎访问新雨丰胸网站。3786

淘宝导购 [2010-07-07 04:05 PM]
标题: 淘宝导购
链接: http://sinyv.com/index/0F/index.htm
摘要: 欢迎访问新雨淘宝导购网站。8544

pumps [2010-07-07 04:05 PM]
标题: pumps
链接: http://www.vvivvcn.cn/
摘要: pumps1501

减肥 [2010-07-07 04:01 PM]
标题: 减肥
链接: http://sinyv.com/index/0A/
摘要: 减肥2967

pumps [2010-07-07 11:36 AM]
标题: pumps
链接: http://www.vvivvcn.cn/
摘要: pumps6548

发表评论
昵 称:
密 码: 游客发言不需要密码.
验证码:
内 容:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 20 字 | UBB代码 关闭 | [img]标签 关闭