思想：合理假设，预先获取
实例：页面与载入示例（Ajax的文章分页）
代码如下：
JavaScript代码：
1 /** 2 * jQuery改写 3 */ 4 /*全局变量*/ 5 var iCurPage = -1; //当前页 6 var iWaitTime = 5000; //等待时间5s 7 var iNextPageToLoad = -1; //下一个要下载的页 8 $(document).ready(function() { 9 //获取当前页码int 10 if (location.href.indexOf("page=") > -1) { 11 var sQueryString = location.search.substring(1); //获取查询字符串 12 //获取等号后的页码 13 iCurPage = parseInt(sQueryString.substring(sQueryString.indexOf("=") + 1), 10); 14 }else { 15 iCurPage = 1; //默认第一页 16 } 17 18 //等待获取的页码 19 iNextPageToLoad = iCurPage + 1; 20 //查找所有属性id以"aPage"开头的a,并重写clic事件 21 $("a[id^='aPage']").click(function(event) { 22 var sPage = this.id.substring(5); //获取链接id属性最后的数字 23 showPage(sPage); //当指定的页码隐藏存在时,显示它否者直接链接到指定的页码 24 event.preventDefault(); //阻止默认的行为 25 }); 26 setTimeout(loadNextPage, iWaitTime); 27 }) 28 29 /** 30 * 显示指定的页 31 * 在url上有两种现象(根据是否已经从服务器获取) 32 */ 33 function showPage(sPage) { 34 if ($("#divPage"+sPage).size()) { 35 //所需的文章部分已经存在 36 $("#divPage"+sPage).show().siblings("div[id^='divPage']").hide(); 37 $("a#aPage"+sPage).addClass("current").siblings().removeClass("current"); 38 }else { 39 location.href = getURLForPage(parseInt(sPage)); 40 } 41 } 42 /** 43 * ajax加载下一页 44 * 从后台定时获取剩余文章的内容 45 */ 46 function loadNextPage() { 47 48 if (iNextPageToLoad <= iPageCount) { 49 var url = getURLForPage(iNextPageToLoad)+"&dataOnly=true"; //改变页码处 50 $.get(url, saveResult); //get方式获取指定页码内容 51 } 52 53 } 54 /** 55 * ajax显示从服务器端获取的数据 56 * @param {String} data 57 * @param {String} statusText 58 * @param {XHR} jqXHR 59 */ 60 function saveResult(data, statusText, jqXHR) { 61 if (statusText == 'success') { 62 //从服务器获取数据成功, 处理数据 63 //$("#loadArea").html(jqXHR.responseText); 64 $("#loadArea").html(data); 65 $newPage = $("#divPage"+iNextPageToLoad); 66 $newPage.hide(); //移动时需隐藏 67 $("body").append($newPage); //添加到body中,也可以是指定的div中 68 $("#loadArea").html(); //清空下载区 69 iNextPageToLoad ++; //指定下一个要下载的页码 70 setTimeout(loadNextPage, iWaitTime); //定时获取内容 71 } 72 } 73 /** 74 * 获取指定页码的url 75 * @param {int} iPage 76 * @return 返回新的url 77 */ 78 function getURLForPage(iPage) { 79 var sNewUrl = location.href; //当前url 80 if (location.search.length > 0) { 81 sNewUrl = sNewUrl.substring(0, sNewUrl.indexOf("?")); 82 } 83 sNewUrl += "?page=" + iPage; 84 return sNewUrl; 85 }
后台服务器脚本PHP代码：
1 <?php 2 header("Content-type:text/html;charset=utf-8"); 3 $page = 1; 4 $dataOnly = false; 5 if (isset($_GET["page"])) { 6 $page = $_GET["page"]; 7 } 8 /*当通过ajax获取文章数据时,只获取文章部分而不是页面全部*/ 9 if (isset($_GET['dataOnly']) && $_GET['dataOnly']==TRUE) { 10 $dataOnly = TRUE; 11 } 12 if (!$dataOnly) { 13 ?> 14 <!DOCTYPE html> 15 <html> 16 <head> 17 <meta charset="UTF-8"> 18 <title>Article</title> 19 <style type="text/css"> 20 a{ margin: 0 4px; color:#333; } 21 .current{ text-decoration: none; font-weight:bold; } 22 </style> 23 <script src="../js/jquery-1.8.0.js" type="text/javascript"></script> 24 <script src="../js/predictiveFetch2.js" type="text/javascript"></script> 25 </head> 26 <body> 27 <h1>Article Title</h1> 28 <!--接收服务器端数据处--> 29 <div id="loadArea" style="display:none;"></div> 30 <?php 31 $output = "<p id='pageLink'>Page "; 32 33 for ($i = 1; $i < 4; $i++) { 34 $output .= '<a href="article.php?page='.$i.'" id="aPage'.$i.'"'; 35 36 if ($i == $page) { 37 $output .= 'class="current"'; 38 } 39 $output .= ">$i</a>"; 40 } 41 echo $output; 42 }//if 43 if ($page == 1) { 44 ?> 45 <div id="divPage1">page1: <br />contents of page 1</div> 46 <?php 47 } else if ($page == 2) { 48 ?> 49 <div id="divPage2">page2: <br />contents of page 2</div> 50 <?php 51 } else if ($page == 3) { 52 ?> 53 <div id="divPage3">page3: <br />contents of page 3</div> 54 <?php 55 } 56 if (!$dataOnly) { 57 ?> 58 </body> 59 </html> 60 <?php 61 }//if 62 ?>
