一个用于分页的AJAX实例

现在AJAX越来越多的被用于应用,前此日子公司让了解一下,以便在日后需要时用,于是就在网上找了些资料,但是没有发现有什么在开发中的实例,现在把我写的一个简单的例子贴出来供大家参考,希望能有所帮助.

程序的环境 hibernate+spring+sturts

在JSP中的用于分页的代码.

<script language="javascript">
var http_request = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("post", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息


document.getElementById('dd').innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}
function userCheck(username) {
send_request('<html:rewrite page=""/>/ology/index.do?bar=<bean:write name="barname"/>&ajx=1&page='+username);
}
</script>

<td id="dd" width="78%" height="493" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="574">&nbsp;</td>
</tr>
<logic:notEmpty name="bar" property="content">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="4"></td>
</tr>

<logic:iterate id="sub" name="bar" property="content">
<tr>
<td>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="16%" align="center">
<logic:equal name="sub" property="infoPicType" value="0">
<img src="<html:rewrite page=""/><bean:write name="sub" property="infoMiniPic"/>" width="82" height="82" border="0">
</logic:equal>
<logic:equal name="sub" property="infoPicType" value="1">
<img src="<bean:write name="seb" property="infoMiniPic"/>" width="82" height="82" border="0">
</logic:equal>

</td>
<td width="84%"><span class="blue12px">
<bean:write name="sub" property="infoTitle"/></span><span class="f12DRed">[<a href=
<logic:equal name="sub" property="isRelink" value="0">
"<html:rewrite page=""/>/ology/detail.do?infoId=<bean:write name="sub" property="infoId"/>"
</logic:equal>
<logic:equal name="sub" property="isRelink" value="1">
"<bean:write name="sub" property="relinkUrl"/>"
</logic:equal>
target="_blank" class="link_blue23_12">全文</a>]</span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="10"></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</logic:iterate>
</table></td>
</tr>

<tr>
<td align="center"><img src="<html:rewrite page=""/>/appweb/ology/images/line001.gif" width="566" height="15"></td>
</tr>
<tr>
<td><div align="center">
<span class="black12px">分页 </span>
<a href="javascript:userCheck('1');" class="link_blue23_12">首页</a> <span class="link_darkblue_12">
<a href="javascript:userCheck('<bean:write name="bar" property="page.previousPage"/>');" class="link_blue23_12">前页</a> </span><span class="link_blue23_12">
<a href="javascript:userCheck('<bean:write name="bar" property="page.nextPage"/>');" class="link_blue23_12">后页</a></span><span class="link_darkblue_12">
<a href="javascript:userCheck('<bean:write name="bar" property="page.totalPage"/>');" class="link_blue23_12"> 尾页</a> </span>
<span class="black12px"><bean:write name="bar" property="page.currentPage"/>/<bean:write name="bar" property="page.totalPage"/>页</span>
<span class="black12px">20条/页</span> <span class="text_black_12px"></div></td>
</tr>
</logic:notEmpty>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</td>

当然这不是一个完整的JSP页面,我只是把分页这一块代码给帖出来.

在分页的链接中我们使用JS调用AJAX发送分页请求,相信使用过sturts的都知道,我们调用了action,而他return 的就是一个页面,反回来的页面就会把上面JSP中的页页给替换掉,这也就完成了一个简单的AJAX的请求.

当然这只是一个最最简单的应用了,如果你用不同的应用,欢迎你给我E-MAIL,大家一起探讨.