做ajax方面的开发也有两年时间了,使用过许多方式进行ajax方面的开发,以下是自己使用过的几种方式
一、基本文本内容(Text方式)
二、xml方式
三、json方式
四、DWR等开源框架
1、Text方式是ajax开发中最为简单的一种方式。它返回就是一段普通的文本内容,主要是在操作过程中一些信息提示使用
比较常见的是在用户注册中新增用户判断用户名是否存在。
2.xml方式是ajax方式使用最多的一种方式,它的数据表达更丰富,本文以一个自动提示的例子为原型介绍,
大家都知道大名鼎鼎的google,它里面强大的自动提示功能使很多人为之倾倒。
我写这个自动提示功能就是参考google的一些方法而成,使用JDOM做为xml解析方式
表结构:
后台表结结构如下:
1
列 类型 类型
2
名称 模式 名称 长度 小数位 NU
3
L
4
------------------------------ --------- ------------------ -------- ----- ----
5
-
6
ID SYSIBM INTEGER 4 0 否
7
8
LOGINID SYSIBM VARCHAR 20 0 是
9
10
NAME SYSIBM VARCHAR 80 0 否
11
12
PASSWD SYSIBM VARCHAR 255 0 否
13
14
EMAIL SYSIBM VARCHAR 255 0 是
15
16
STATUS SYSIBM VARCHAR 2 0 否
17
18
DESCN 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脚本:
1
this.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>
控制层方法如下:
1
public 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
}
业务方法如下:
1
public 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方式完成自动提示功能,今天先总结到这里,以后陆续更新