1.由前端页面发送Ajax请求至服务器端.
代码
function QueryList(no){
var url="getXML.do";
var pars="pageNo="+no;
var ajax=new Ajax.Request(url,{
method:'get',
parameters:pars,
onComplete:showResponse
});
< type="text/javascript">render_code();
代码
//回调
function showResponse(request){
var parser=new MyXmlParser();
parser.load(request);
var dataList=parser.itemList;
var pageList=parser.pageList;
showTable(dataList,pageList);
< type="text/javascript">render_code();
这里用到的是prototype-1.4.0.js中的Ajax对象.
2.服务器端处理程序到数据库查询数据并生成xml档返回.
代码
StringBuffer resultXML = new StringBuffer();
int pageNo = new Integer(request.getParameter("pageNo")).intValue();
try {
resultXML.append("<?xml version='1.0' encoding='gb2312'?>");
resultXML.append("<ajax-response>\n");
resultXML.append("<root>\n");
Pagination page = new Pagination(request, 100);
List list = this.getTestList(page.getStart(), page.getPageSize());
for (int i = 0; i < list.size(); i++) {
TestBean bean = (TestBean) list.get(i);
resultXML.append("<data>\n");
resultXML
.append("\t<id>" + bean.getId().toString() + "</id>\n");
resultXML.append("\t<name>" + bean.getName() + "</name>\n");
resultXML.append("\t<sex>" + bean.getSex() + "</sex>\n");
resultXML.append("\t<age>" + bean.getAge().toString()
+ "</age>\n");
resultXML.append("</data>\n");
}
resultXML.append("<pagination>\n");
resultXML.append("\t<total>" + page.getTotal() + "</total>\n");
resultXML.append("\t<start>" + page.getStart() + "</start>\n");
resultXML.append("\t<end>" + page.getEnd() + "</end>\n");
resultXML.append("\t<pageno>" + page.getPageNo() + "</pageno>\n");
resultXML.append("</pagination>\n");
resultXML.append("</root>\n");
resultXML.append("</ajax-response>");
} catch (Exception e) {
e.printStackTrace();
}
writeResponse(request, response, resultXML.toString());
< type="text/javascript">render_code();
3.在Ajax响应方法中对xml解析并生成表格显示到页面.
代码
StringBuffer resultXML = new StringBuffer();
int pageNo = new Integer(request.getParameter("pageNo")).intValue();
try {
resultXML.append("<?xml version='1.0' encoding='gb2312'?>");
resultXML.append("<ajax-response>\n");
resultXML.append("<root>\n");
Pagination page = new Pagination(request, 100);
List list = this.getTestList(page.getStart(), page.getPageSize());
for (int i = 0; i < list.size(); i++) {
TestBean bean = (TestBean) list.get(i);
resultXML.append("<data>\n");
resultXML
.append("\t<id>" + bean.getId().toString() + "</id>\n");
resultXML.append("\t<name>" + bean.getName() + "</name>\n");
resultXML.append("\t<sex>" + bean.getSex() + "</sex>\n");
resultXML.append("\t<age>" + bean.getAge().toString()
+ "</age>\n");
resultXML.append("</data>\n");
}
resultXML.append("<pagination>\n");
resultXML.append("\t<total>" + page.getTotal() + "</total>\n");
resultXML.append("\t<start>" + page.getStart() + "</start>\n");
resultXML.append("\t<end>" + page.getEnd() + "</end>\n");
resultXML.append("\t<pageno>" + page.getPageNo() + "</pageno>\n");
resultXML.append("</pagination>\n");
resultXML.append("</root>\n");
resultXML.append("</ajax-response>");
} catch (Exception e) {
e.printStackTrace();
}
writeResponse(request, response, resultXML.toString());
< type="text/javascript">render_code();
其中还有用到的分页对象Pagination ,及页面的xml解析对象MyXmlParser这里就不贴code出来了.附件中有Demo.war包和project文件.感兴趣的朋友可以下载来看看.
测试环境如下:
JDK:1.5
开发工具:Eclipse3.1
部署服务器:Tomcat5.5
分享到:
相关推荐
jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和XML)技术,可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能...
理解并掌握这个ASP + Ajax分页实例,对于提升Web开发中的用户体验设计和服务器端编程技巧具有重要意义。同时,它也展示了如何将传统服务器技术与现代Web开发技术相结合,以实现更高效、更流畅的网页应用。
总的来说,"Java AJAX 无刷新分页实例(完整版)"是一个涵盖了前端交互、后端处理、数据库操作和用户体验设计等多个方面综合的项目,对于学习和实践Web开发中的AJAX应用非常有帮助。通过理解和实践这个实例,开发者...
创建一个服务器控件,负责处理Ajax请求,计算分页信息,与数据库交互。在客户端,使用JavaScript处理用户交互,触发Ajax请求,并更新页面。 在Asp.net中,分页通常涉及到以下关键技术: - **SQL分页**:在数据库...
通过以上步骤,我们就可以构建一个实用的AJAX分页实例,使得用户在浏览大量数据时能够快速、平滑地切换页面,而不会影响其他页面元素。这个实例对于提升网站性能和用户体验具有显著的效果。在实际项目中,还可以根据...
1. **设置ASP页面**:创建一个ASP文件,负责接收AJAX请求,处理数据库查询,并返回分页数据。使用ADO(ActiveX Data Objects)库连接Access数据库,编写SQL查询语句,获取指定页码的数据。 2. **jQuery和Pagination...
总结来说,这个Ajax分页实例主要包含以下步骤: 1. 用户点击分页链接,触发JavaScript函数。 2. 函数通过Ajax发送请求,包含当前页码信息。 3. 服务器接收到请求,处理分页逻辑,返回HTML片段。 4. 客户端接收到...
UpdatePanel是一个服务器控件,它可以包裹其他控件,并在后台执行操作时控制哪些部分应进行异步更新。在GridView所在的区域添加UpdatePanel,可以确保只有GridView在更新数据时才会刷新。 接着,我们配置Ajax控件...
用Jquery Pagination插件,服务器端用ASP.NET MVC3做的一个分页实例,详见:http://hi.baidu.com/tz666/item/7b401707a3e76fdb73e676d4
本实例将深入探讨如何在VS2005中创建一个Ajax分页程序。 首先,我们需要理解分页的基本原理。分页是将大量数据分割成多个小块,每次只加载一部分到网页上,这样可以显著提高网页加载速度并减轻服务器负担。在Web...
这个“一个ajax分页的公共类”提供了一个通用的解决方案,可以被多个页面或项目复用,减少了重复代码,提高了开发效率。 1. **Ajax基础** Ajax的核心是通过JavaScript创建XMLHttpRequest对象,向服务器发送异步...
Ajax分页完整实例分析
AJAX分页是这种技术的一个重要应用场景,尤其在数据量大的列表展示中,如电商的商品列表、论坛的帖子列表等。本实例主要探讨如何在JSP(JavaServer Pages)环境中利用AJAX实现分页功能。 首先,我们需要理解AJAX的...
6. **项目实例**:除了理论知识,实际的代码实例可以让开发者更好地理解和应用这些概念,通过阅读和调试代码,可以加深对ThinkPHP 3.2和Ajax分页的理解。 7. **用户体验**:无刷新分页提升了用户体验,避免了用户...
访问http://localhost:8080/ajaxpage/,可以看到一个动态加载分页效果的实例。 Ajax分页的实现主要涉及以下几个核心概念: 1. **异步通信**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行...
启用AJAX分页的话请查看我源代码的实例。 具体逻辑请查看我的源代码。很简单的。我相信一般人都能看懂。 分页代码由 Models 里的 INetMvc3Page.cs 和Views\Shared的 _NetMvc3Page.cshtml 两部分代码组成。其他代码...
综上所述,这个经典的JSP分页实例展示了如何通过自定义实体类实现简单的分页功能,结合前端页面和服务器端的处理,为用户提供高效的数据库数据浏览体验。在实际开发中,可以根据项目需求进行扩展和优化,例如添加...
**jQuery AJAX 分页技术在前端应用详解** ...`jQueryPage`插件是一个实例,展示了如何以简洁的方式实现这一功能。在实际项目中,根据需求选择合适的分页插件或自行编写代码,以满足特定的UI设计和性能要求。
采用JQuery Pagination 插件,服务器端采用asp.net ashx,数据库操作采用LinQ TO Entity,实现异步分页操作实例。 具体介绍,详见:http://hi.baidu.com/tz666/item/73a676d9b171041821e250b0
本案例使用ajax技术实现分页,方案为其中一种,其他方案后面会再发,因为项目比较有针对性,所以项目规模很小,便于查看学习,使用前先修改项目中的Constant类中的相关静态变量信息(数据库连接信息)后便可部署。...