`

一个简单Ajax分页的实例

阅读更多

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 Ajax分页(有实例)

    jQuery,一个轻量级、功能丰富的JavaScript库,结合AJAX(异步JavaScript和XML)技术,可以实现动态、高效的分页效果。本篇文章将深入探讨jQuery AJAX分页的原理与实践,通过具体的实例来展示如何实现炫酷的分页功能...

    ASP + Ajax 分页实例

    理解并掌握这个ASP + Ajax分页实例,对于提升Web开发中的用户体验设计和服务器端编程技巧具有重要意义。同时,它也展示了如何将传统服务器技术与现代Web开发技术相结合,以实现更高效、更流畅的网页应用。

    Java Ajax 无刷新分页实例(完整版)

    总的来说,"Java AJAX 无刷新分页实例(完整版)"是一个涵盖了前端交互、后端处理、数据库操作和用户体验设计等多个方面综合的项目,对于学习和实践Web开发中的AJAX应用非常有帮助。通过理解和实践这个实例,开发者...

    Ajax分页 Asp.net 分页

    创建一个服务器控件,负责处理Ajax请求,计算分页信息,与数据库交互。在客户端,使用JavaScript处理用户交互,触发Ajax请求,并更新页面。 在Asp.net中,分页通常涉及到以下关键技术: - **SQL分页**:在数据库...

    一个实用的AJAX分页实例

    通过以上步骤,我们就可以构建一个实用的AJAX分页实例,使得用户在浏览大量数据时能够快速、平滑地切换页面,而不会影响其他页面元素。这个实例对于提升网站性能和用户体验具有显著的效果。在实际项目中,还可以根据...

    Jquery Pagination AJax 分页实例 For ASP

    1. **设置ASP页面**:创建一个ASP文件,负责接收AJAX请求,处理数据库查询,并返回分页数据。使用ADO(ActiveX Data Objects)库连接Access数据库,编写SQL查询语句,获取指定页码的数据。 2. **jQuery和Pagination...

    ajax分页简单实例

    总结来说,这个Ajax分页实例主要包含以下步骤: 1. 用户点击分页链接,触发JavaScript函数。 2. 函数通过Ajax发送请求,包含当前页码信息。 3. 服务器接收到请求,处理分页逻辑,返回HTML片段。 4. 客户端接收到...

    Ajax 操作实例 ASP.NET实例

    UpdatePanel是一个服务器控件,它可以包裹其他控件,并在后台执行操作时控制哪些部分应进行异步更新。在GridView所在的区域添加UpdatePanel,可以确保只有GridView在更新数据时才会刷新。 接着,我们配置Ajax控件...

    Jquery Pagination Ajax 分页实例 For ASP.NET MVC3(用Ado.Net Entity Framework作数据操作)

    用Jquery Pagination插件,服务器端用ASP.NET MVC3做的一个分页实例,详见:http://hi.baidu.com/tz666/item/7b401707a3e76fdb73e676d4

    ajax分页程序实例vs2005版

    本实例将深入探讨如何在VS2005中创建一个Ajax分页程序。 首先,我们需要理解分页的基本原理。分页是将大量数据分割成多个小块,每次只加载一部分到网页上,这样可以显著提高网页加载速度并减轻服务器负担。在Web...

    一个ajax分页的公共类

    这个“一个ajax分页的公共类”提供了一个通用的解决方案,可以被多个页面或项目复用,减少了重复代码,提高了开发效率。 1. **Ajax基础** Ajax的核心是通过JavaScript创建XMLHttpRequest对象,向服务器发送异步...

    Ajax分页完整实例分析

    Ajax分页完整实例分析

    AJAX分页实例,在开发中会有帮助的

    AJAX分页是这种技术的一个重要应用场景,尤其在数据量大的列表展示中,如电商的商品列表、论坛的帖子列表等。本实例主要探讨如何在JSP(JavaServer Pages)环境中利用AJAX实现分页功能。 首先,我们需要理解AJAX的...

    tp3.2+ajax无刷新分页

    6. **项目实例**:除了理论知识,实际的代码实例可以让开发者更好地理解和应用这些概念,通过阅读和调试代码,可以加深对ThinkPHP 3.2和Ajax分页的理解。 7. **用户体验**:无刷新分页提升了用户体验,避免了用户...

    ajax分页demo

    访问http://localhost:8080/ajaxpage/,可以看到一个动态加载分页效果的实例。 Ajax分页的实现主要涉及以下几个核心概念: 1. **异步通信**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在后台与服务器进行...

    .net mvc3.0分页(包含AJAX分页)

    启用AJAX分页的话请查看我源代码的实例。 具体逻辑请查看我的源代码。很简单的。我相信一般人都能看懂。 分页代码由 Models 里的 INetMvc3Page.cs 和Views\Shared的 _NetMvc3Page.cshtml 两部分代码组成。其他代码...

    一个经典的JSP分页实例

    综上所述,这个经典的JSP分页实例展示了如何通过自定义实体类实现简单的分页功能,结合前端页面和服务器端的处理,为用户提供高效的数据库数据浏览体验。在实际开发中,可以根据项目需求进行扩展和优化,例如添加...

    jquery ajax 分页 前端

    **jQuery AJAX 分页技术在前端应用详解** ...`jQueryPage`插件是一个实例,展示了如何以简洁的方式实现这一功能。在实际项目中,根据需求选择合适的分页插件或自行编写代码,以满足特定的UI设计和性能要求。

    JQuery Pagination AJax 分页实例 For ASP.NET(JQuery+ashx+ADO.NET 实体数据模型)

    采用JQuery Pagination 插件,服务器端采用asp.net ashx,数据库操作采用LinQ TO Entity,实现异步分页操作实例。 具体介绍,详见:http://hi.baidu.com/tz666/item/73a676d9b171041821e250b0

    ajax真分页实例(J2ee)

    本案例使用ajax技术实现分页,方案为其中一种,其他方案后面会再发,因为项目比较有针对性,所以项目规模很小,便于查看学习,使用前先修改项目中的Constant类中的相关静态变量信息(数据库连接信息)后便可部署。...

Global site tag (gtag.js) - Google Analytics