《AJAX高级程序设计》读书笔记(四)
AJAX通信控制模式
预先获取
AJAX无非是为了改善用户体验，所以就算禁用javascript，也不应影响基本功能。
ArticleExample.php
1 <?php
2 $page = 1;
3 $pageContent = array('内容一','内容二','内容三','内容四');
4 $pageTotalNum = sizeof($pageContent);
5 $dataonly = false;
6 if(isset($_GET['page'])){
7 $page = $_GET['page'];
8 }
9 if(isset($_GET['dataonly'])&&$_GET['dataonly'] == 'true'){
10 $dataonly = true;
11 }
12 if(!$dataonly){
13 ?>
14 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
15 <HTML>
16 <HEAD>
17 <TITLE>文章案例</TITLE>
18 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
19 <style type="text/css">
20 a{margin-right:5px;}
21 .current{font-weight:bold; text-decoration:none;}
22 </style>
23 <script type="text/javascript">
24 var XHR = null;
25 var dataonly = false;
26 var waitBeforeLoad = 5000;
27 var nextPageToLoad = 2;
28 var pageCount = '';
29 var timer = null;
30
31 function createXHR(){
32 if(typeof XMLHttpRequest != "undefined"){
33 return new XMLHttpRequest();
34 }else if(window.ActiveXObject){
35 var aVersions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0"];
36 for(var i = 0;i <aVersions.length; i++){
37 return new ActiveXObject(aVersions[i]);
38 }
39 }
40 }
41
42 function showPage(page){
43 var divPage = document.getElementById('divpage'+page);
44 for(var i=0;i < pageCount; i++){
45 var searchPageNum = i+1;
46 var searchPage = document.getElementById('divpage'+searchPageNum);
47 if(searchPage && page!=searchPageNum){
48 searchPage.style.display = 'none';
49 }
50 }
51 divPage.style.display = "block";
52 }
53
54 function loadNextPage(){
55 if(nextPageToLoad <= pageCount){
56 if(!XHR){
57 XHR = createXHR();
58 }
59 XHR.open('get','ArticleExample.php?dataonly=true&page='+nextPageToLoad,true);
60 XHR.onreadystatechange = function(){
61 if(XHR.readyState == 4){
62 if(XHR.status == 200){
63 var divLoadArea = document.getElementById('divLoadArea');
64 divLoadArea.innerHTML = XHR.responseText;
65 var divNewPage = document.getElementById('divpage'+nextPageToLoad);
66 divNewPage.style.display = 'none';
67 document.body.appendChild(divNewPage);
68 divLoadArea.innerHTML = "";
69 nextPageToLoad++;
70 XHR = null;
71 timer = setTimeout(loadNextPage,waitBeforeLoad);
72 }
73 }
74 };
75 XHR.send(null);
76 }else{
77 clearTimeout(timer);
78 }
79 }
80
81 window.onload = function(){
82 var pagecontent = document.getElementById('pagecount').innerHTML;
83 pageCount = parseInt(pagecontent,10);
84 var links = document.getElementsByTagName('a');
85 var len = links.length;
86 for(var i = 0; i < len; i++){
87 links[i].onclick = function(a){
88 return function(){
89 a++;
90 var divPage = document.getElementById('divpage'+a);
91 if(divPage){
92 showPage(a);
93 return false;
94 }
95 return;
96 };
97 }(i);
98 }
99 setTimeout(loadNextPage,waitBeforeLoad);
100 };
101
102 </script>
103 </HEAD>
104 <body>
105 <h1>文章案例</h1>
106 <div id="divLoadArea"></div>
107 <?php
108 $links = '<p>页数：';
109 for($i = 1;$i <= $pageTotalNum;$i++){
110 $links .= "<a href=\"ArticleExample.php?page=$i\"";
111 if($i == $page){
112 $links .= " class=\"current\"";
113 }
114 $links .= ">$i</a>";
115 }
116 $links .= "共<span id='pagecount'>{$pageTotalNum}</span>页";
117 $links .= "</p>";
118 echo $links;
119 }
120 echo "<div id='divpage{$page}'>".$pageContent[$page-1]."</div>";
121 if(!$dataonly){
122 ?>
123 </body>
124 </HTML>
125 <?php
126 }
127 ?>
每隔五秒钟，加载一个页面，若在五秒之内点击链接，则是页面跳转；若在五秒之后点击，则链接并没跳转，这正是AJAX强大之处。
因为不想销毁已经创建的全局变量XHR，所以检查XHR的readyState的值是否为零，如果不为零，则把它赋为零，这导致并不发送后来的数据，无奈，只得销毁再创建。
书上是检查<a>标签的ID属性，然后在click事件函数中传递page的值，然而我觉得没必要，用个闭包就行了。在事件函数中return下，能更好地取消事件或继续。
初看，觉得甚是简单，自己写这么几行代码，却琢磨好一阵。以前总是用Jquery库，写些简单的AJAX，便以为没甚难的。
可是当你一心想方设法地增强用户体验，一切都很难了。
posted on 2010-05-25 01:30 kingQueenyun 阅读(527) 评论(0) 编辑 收藏 举报
