`
mam1234567
  • 浏览: 12792 次
  • 性别: Icon_minigender_1
  • 来自: 江西瑞金
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ajax+Js+Dom+Json无刷新分页技术

AjaxjsonJavaScript应用服务器浏览器 
阅读更多

本文首次发表地址：http://qiuchangsheng.com

终极分页：Ajax+Js+Dom+Json无刷新分页技术 采用了时下比较流行的Ajax无刷新技术、JavaScript、JavaScript Dom、Json等技术实现，使得用户在向服务器发出请求的时候通过Ajax的异步通讯实现，这样极大的提升的用于界面的友好性，避免了传统分页技术在实现分页时页面刷新的情况。

有同学不禁要问，老师说了那么多，到底什么是ajax? ajax实现的优点和缺点在哪里？

好，下面给大家解释一下这个概念：

AJAX的优点和缺点：

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于 XML的web service接口，并在客户端采 用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。
Ajax不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。就像 DHTML应用程序那样，Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。
对应用Ajax最主要的批评就是，它可能破坏浏览器后退按钮的正常行为[4]。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是在Ajax应用程序中，却无法这样做。不过开发者已想出了种种办法来解决这个问题，当中大多数都是在用户单击后退按钮访问历史记录时，通过建立或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态。）
一个相关的观点认为，使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现，大部分都使用URL片断标识符（通常被称为锚点，即URL中#后面的部分）来保持跟踪，允许用户回到指定的某个应用程序状态。（许多浏览器允许JavaScript动态更新锚点，这使得Ajax应用程序能够在更新显示内容的同时更新锚点。）这些解决方案也同时解决了许多关于不支持后退按钮的争论。
进行Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 [5]，没有恰当的预读数据 [6]，或者对XMLHttpRequest的不恰当处理[7]，都会使用户感到延迟，这是用户不欲看到的，也是他们无法理解的[8]。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax;
用JavaScript作的Ajax引擎，JavaScript的兼容性和DeBug都是让人头痛的事;
Ajax的无刷新重载，由于页面的变化没有刷新重载那么明显，所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的；现有的解决有：在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
对串流媒体的支持没有FLASH、Java Applet好。

说了那么多，还是上真货，分析代码：

客户端代码：

Code:
  1. <?php
  2. include("../include/dbconn.php");
  3. //定义分页时每页显示的条数
  4. $PAGESIZE=15;
  5. //得到最大页
  6. $sql="selectcount(*)fromarea";
  7. $rs=mysql_query($sql);
  8. //得到查询的结果
  9. $rowsNum=mysql_result($rs,0);
  10. //得到总页数
  11. $maxPage=ceil($rowsNum/$PAGESIZE);
  12. //判断是否存在当前页值，如果存在，则当前页等于接收到得值，用于显示下面的“滑坨”起始判断
  13. //if($_GET['nowpage']){
  14. //$nowpage=$_GET['nowpage'];
  15. //}else{
  16. //不存在则设置当前页为1
  17. //$nowpage=1;
  18. //}
  19. ?>
  20. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  21. <htmlxmlns="http://www.w3.org/1999/xhtml">
  22. <head>
  23. <style>
  24. .list{
  25. width:750px;
  26. height:460px;
  27. background-color:#99FF66;
  28. overflow:auto;
  29. border:#0000FF1pxdotted;
  30. margin:0auto;
  31. }
  32. .pageNum{
  33. width:750px;
  34. height:30px;
  35. background-color:#999999;
  36. overflow:auto;
  37. border:#0000FF1pxdotted;
  38. margin:0auto;
  39. text-align:center;
  40. }
  41. </style>
  42. <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
  43. <title>无标题文档</title>
  44. <scriptlanguage="javascript"type="text/javascript"src="../include/ajax.js"></script>
  45. <scriptlanguage="javascript"type="text/javascript">
  46. varnowpage=1;
  47. vartotalPage=<?phpecho$maxPage;?>;
  48. varstartPage=1;
  49. varendPage=totalPage;
  51. functioninitPage(){
  52. varpageStr="";
  53. //判断总页数是否大于11，如果小于11，不处理起始、最终页码
  54. if(totalPage>11){
  55. //判断当前页-10是否存在，如果不存在则不设置起始页码
  56. if(nowpage-10>0){
  57. startPage=nowpage-10;
  58. }
  59. //判断当前页+9是否超过总页数，如过没有超过，则设置最终页码
  60. if(nowpage+9<totalPage){
  61. //设置最终页码
  62. endPage=nowpage+9;
  63. }else{
  64. //解决最后几页不显示的问题
  65. endPage=totalPage;
  66. }
  67. }
  69. //判断是否显示上一页
  70. if(nowpage!=1){
  71. pageStr+="<ahref=javascript:void(0)onclick=getDataPage("+(nowpage-1)+")>上一页</a>";
  72. }
  74. for(vari=startPage;i<=endPage;i++){
  76. pageStr+="<ahref=javascript:void(0)onclick=getDataPage("+i+")>";
  77. //判断是否加粗显示
  78. if(nowpage==i){
  79. //设置加粗显示
  80. pageStr+="<b><fontcolor=yellow>"+i+"</font></b>";
  81. }else{
  83. pageStr+=i;
  84. }
  85. pageStr+="</a>";
  87. }
  89. //判断是否显示下一页
  90. if(nowpage<totalPage){
  91. pageStr+="<ahref=javascript:void(0)onclick=getDataPage("+(nowpage+1)+")>下一页</a>";
  92. }
  94. //将当前的字符串显示到div中
  95. document.getElementById("pageNum").innerHTML=pageStr;
  97. }
  100. /*
  101. 调用ajax引擎，根据页码查询数据库，返回当前的信息
  102. */
  103. functiongetDataPage(Page){
  105. //定义url
  106. varurl="./getDataPage2.php";
  108. //定义变量
  109. varparams="nowPage="+Page+"&pageSize="+<?phpecho$PAGESIZE?>;
  110. //调用ajax引擎，并制定函数处理服务器返回的结果
  111. ajaxget(url,params,getDataPageProcess);
  113. }
  115. /*
  116. 处理服务器返回的数据，并显示出来
  117. */
  118. functiongetDataPageProcess(xhr){
  119. //重新初始化开始页
  120. startPage=1;
  121. //将json字符串转换为对象
  122. varresponseObj=eval("("+xhr.responseText+")");
  123. //接收并设置当前页
  124. nowpage=parseInt(responseObj.nowPage);
  125. //重新初始化一下页码显示
  126. initPage();
  127. //显示出所有的数据
  129. varliststr="<table><tr><thwidth='20%'>id</th><thwidth='20%'>名称</th><thwidth='20%'>拼音</th><thwidth='20%'>编码</th><thwidth='20%'>缩写</th></tr>";
  130. for(vari=0;i<responseObj.areas.length;i++){
  132. liststr+="<tr><tdalign='center'>"+responseObj.areas[i].id+"</td><tdalign='center'>"+responseObj.areas[i].name+"</td><tdalign='center'>"+responseObj.areas[i].p+"</td><tdalign='center'>"+responseObj.areas[i].code+"</td><tdalign='center'>"+responseObj.areas[i].l+"</td></tr>";
  134. }
  136. liststr+="</table>";
  138. //将拼接完成的table字符串显示在id为list的div中
  139. document.getElementById("list").innerHTML=liststr;
  140. }
  143. </script>
  144. </head>
  146. <bodyonload="initPage();getDataPage(1);">
  147. <divid="list"class="list"></div>
  148. <divid="pageNum"class="pageNum"></div>
  149. </body>
  150. </html>

客户端通过每次传递当前页和每页显示的数据大小到服务器端，服务器端接受参数并按照分页算法，查询对应的数据，并且返回Json格式的字符串，客户端根据服务端返回的Json字符串，通过使用eval方法转换为对象并存放到resopnseObj变量中，则我们可以通过访问responseObj访问查询的数据，最后使用javascript Dom中对象的innerHTML的方法实现数据的显示

服务端代码如下：

Code:
  1. <?php
  2. //连接数据库
  3. include("../include/dbconn.php");
  4. //接收参数，获取当前页
  5. $nowPage=$_GET['nowPage'];
  6. $pageSize=$_GET['pageSize'];
  7. //根据当前页，分页查询
  8. $sql="selectid,name,p,code,lfromarealimit".($nowPage-1)*$pageSize.",".$pageSize;
  9. //执行查询操作
  10. $rs=mysql_query($sql);
  11. //封装成**数组
  12. $arr=array();
  13. while($rows=mysql_fetch_assoc($rs)){
  14. //每一行数据封装到$arr中，形成的是一个二维数组
  15. $arr[]=$rows;
  16. }
  17. $arr2=array("nowPage"=>$nowPage,"areas"=>$arr);
  18. //arr2("nowPage"=>$nowPage,"areas"=>arr(row("id"=>,"name"=>，....),array("id"=>,"name"=>，....)))
  19. //转换成json字符串
  20. echojson_encode($arr2);
  21. ?>

以上代码简单清晰，难点在于服务器端如何封装json格式的字符串，但是本文注释比较全了，应该能看明白。

另外，本分页算法只要稍加改动服务器端数据就可以实现，Asp、jsp、.NET的通用。

更多详情参考：http://qiuchangsheng.com

分享到：
| 如果你没有了学习的动力，你就看看吧
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    PHP+Ajax网站开发典型实例

    实例 59数据无刷新写入文本文件 实例60 提供自动完成 实例61 实现级联菜单的设计 实例62 PHP+Ajax树状菜单 第8章 Ajax数据库操作 实例63 显示数据库系统信息 实例64 实现数据库常见操作 实例65 完成数据库...

    AJAX 源码范例

    源码结构说明 1.TreeWiewDemo文件夹下为源文件 2.TreeWiewDemo.war为部署文件 &lt;br&gt;第15章 程序描述：本章程序将本章将使用Ajax技术实现无刷新即可浏览RSS新闻的阅读器。 源码结构说明 1....

    Ext+JS高级程序设计.rar

    1.2 Ext Core的Ajax功能 19 1.3 DomQuery详解 20 1.4 模板介绍 23 1.5 实用功能 24 1.6 定时执行代码 25 1.7 本章小结 26 第2章 Ext Core实例系统设计 27 2.1 需求分析 27 2.2 系统设计 28 2.3 功能结构图 29 2.4 ...

    sortable-table:生成可排序的Polymer Web组件来自内联或AJAX JSON，JSON5和数组

    表示和值计算的单独参数输入本地或远程数据：服务器端分页支持AJAX主题引导程序ExtJS 4ESPN替代行/非表主题文章网格模式下的文章现场示例和文档替代行主题具有撤消功能的行编辑器行过滤附加参数资料格式DOM元素AJ

    最新Python3.5零基础+高级+完整项目（28周全）培训视频学习资料

    Json与pickle数据序列化 软件目录结构规范 本周作业 第5周 心灵分享 ATM存钱取钱案例剖析 模块定义、导入、优化详解 内置模块详解之time与datetime模块 内置模块详解之Range模块 内置模块详解之OS模块 内置模块...

    Jquery DataTable基于Twitter Bootstrap的样式

    Jquery DataTable是一个很不错的表格插件。 1、功能强大，支持分页、服务器分页、表头表格等样式自定义 2、支持jedit等其他Jquery插件 ...3、支持ajax、dom、json等数据源； 4、众多使用者的实例代码

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    站内搜索、栏目管理、视频播放（完全模仿优酷视频页面）、焦点图、静态页面生成（新浪、搜狐等大型网站普遍采用的技术）、文章管理、无刷新评论、评论的无刷新分页、敏感词过滤、用户管理、友情链接管理、缓存管理、...

    精通JS脚本之ExtJS框架.part1.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    精通JS脚本之ExtJS框架.part2.rar

    《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...

    laypage分页控件使用实例详解

    //以下将以jquery.ajax为例，演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求。返回的json格式可以任意定义 laypage({ cont: 'page1', //容器。值支持id名、原生dom...

    史上最全韩顺平传智播客PHP就业班视频，10月份全集

    10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...

    史上最全传智播客PHP就业班视频课，8月份视频

    10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...

    史上最全韩顺平传智播客PHP就业班视频，9月份全集

    10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...

    （全）传智播客PHP就业班视频完整课程

    10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...

    Ext Js权威指南(.zip.001

    1.2.4　在javascript中使用json / 4 1.2.5　在.net中使用json / 8 1.2.6　在java中使用json / 12 1.2.7　更多有关json的信息 / 15 1.3　ext js 4概述 / 15 1.4　ext js的开发工具的获取、安装与配置介绍 / 18 1.4.1...

    python入门到高级全栈工程师培训 第3期 附课件代码

    04 JS的DOM节点 05 JS的DOM节点 第43章 01 上节知识回顾 02 js之onsubmit事件与组织事件外延 03 DOM节点的增删改查与属性设值 04 正反选练习 05 js练习之二级联动 06 jquery以及jquery对象介绍 07 jquery选择器 08...

    jQuery攻略.pdf

    　第1章 jQuery基础知识 1 1.1 jQuery的安装 1 1.2 选择DOM节点 2 1.3 延迟JavaScript的执行 3 1.4 把CSS应用到元素上 3 1.5 选择一系列非标准的HTML元素 4 1.6 计数DOM节点和显示其文本 5 1.7 获得一个元素的HTML...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    此外，《ASP.NET 4高级程序设计(第4版)》专门提供了两章的内容来教你如何用Ajax 技术制作快速响应的页面，以及如何使用微软的ASP.NETAJAX平台。另外，还专门介绍了ASP.NET4 新增的功能，如MVC 和动态数据等。 　...

Magicbox
Global site tag (gtag.js) - Google Analytics