asp+ajax實現靜態頁面分頁的代碼

來源:互聯網
上載者:User

最近因工作需要,要在靜態頁面上實現分頁,想了下,決定用AJAX來實現,所以就搗鼓了下面這麼個東西,如下:
複製代碼 代碼如下:<html>
<head>
<title>AJAX靜態分頁</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">
<!--
body { text-align:center;font:14px Verdana,sans-serif; }
a:link,a:visited { color:#00f;text-decoration:none; }
a:hover { color:#f00;text-decoration:underline; }
#main { width:450px;background:#f2f2f2;border:1px #999 solid;padding:10px;text-align:left;line-height:150%;margin:0 auto; }
#title { width:100%;line-height:30px;border-bottom:1px #999 solid;display:table; }
#left { float:left;width:50%;text-align:left;font-size:14px;font-weight:bold; }
#right { float:left;width:50%;text-align:right; }
#content { width:100%;margin:10px 0;clear:both; }
#download { width:100%;margin:10px 0;line-height:150%; }
-->
</style>

<script type="text/javascript">
<!--
function createAjax() { //該函數將返回XMLHTTP對象執行個體
var _xmlhttp;
try {
_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的建立方式
}
catch (e) {
try {
_xmlhttp=new XMLHttpRequest(); //FF等瀏覽器的建立方式
}
catch (e) {
_xmlhttp=false; //如果建立失敗,將返回false
}
}
return _xmlhttp; //返回xmlhttp對象執行個體
}

function getweblist(page) { //該函數用來擷取分頁資料
var xmlhttp=createAjax(); //建立變數xmlhttp,並將createAjax()函數建立的對象執行個體賦於它
if (xmlhttp) { //如果xmlhttp對象建立成功,則執行條件陳述式中的程式
var content=document.getElementById('content'); //擷取頁面中id為content的對象
xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //開啟與伺服器的串連,其中get為串連方式,server.asp為要串連的頁面,有兩個參數,其中第一個參數page為需要返回資料的頁數,第二個參數n為一個隨機數,這樣每次發送的URL都會不一樣,相當雩都向伺服器發出一個新的請求,避免瀏覽器快取資料。
xmlhttp.onreadystatechange=function() { //為xmlhttp對象的readyState屬性指定事件,改屬性值改變時,則會執行其中的程式
if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4並且xmlhttp.status==200時,執行條件中的程式,其中readyState有五個值,4為請求完成,是用戶端向伺服器提交的資料成功到達,status有N多值-_-!!,其中200為OK,是指伺服器向用戶端完成發送資料。
content.innerHTML=unescape(xmlhttp.responseText); //將伺服器返回的資料解碼並寫入指定的ID中。
}
else {
content.innerHTML='<span style="color:red">正在從伺服器提取資料......</span>'; //如果伺服器沒有完成傳送,則向使用者提示正在傳輸。
}
}
xmlhttp.send(null); //向伺服器發送請求,因為是get請求,會直接附在URL後面,所以這裡括弧中的資料為null,IE中也可以不寫,但FF就必須加上null,否則會發送失敗。
}
}

function edit() { //編輯分頁顯示條數的函數
var str='<form style="margin:0">每頁顯示 <input type="text" id="pagesize" size="3"> 條 <input type="button" id="savebtn" value="儲存" onclick="save()"> <input type="button" id="cancelbtn" value="取消" onclick="rightinfo()"></form>' //定義html字串
var right=document.getElementById('right'); //獲得頁面中的right對象。
right.innerHTML=str; 將str變數的值寫入該對象中。
}

function rightinfo() { //right對象中的原始資訊,請在頁面開始和被顯示條數被修改後調用
document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每頁顯示條數">Edit</a>';
}

function save() { //儲存修改後的顯示條數
var pagesize=document.getElementById('pagesize'); //這個就不寫了,跟上面的用法一樣。
if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //確定使用者輸入的新資料是不是一個數字
alert("請正確填寫每頁顯示條數! ");
return;
}
var xmlhttp=createAjax(); //建立對象
if (xmlhttp) {
xmlhttp.open('get','set.asp?pagesize='+pagesize.value+'&n='+Math.random(),true) //參上同看
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('right').innerHTML=unescape(xmlhttp.responseText); //先寫入從伺服器返回的字串,如果成功,會寫入completed。
getweblist(1); //從新擷取新修改後的第一頁的資料
setTimeout('rightinfo()',3000); //3秒後將right對象的原始字串寫入。
}
else {
document.getElementById('pagesize').disabled=true; //將幾個FORM表單的元素都設為不可改動
document.getElementById('savebtn').disabled=true;
document.getElementById('cancelbtn').disabled=true;
}
}
xmlhttp.send(null); //發送請求。
}
}

//-->
</script>
</head>

<body onload="getweblist(1);rightinfo();">
<div id="main">
<div id="title">
<div id="left">靜態分頁的AJAX實現</div>
<div id="right"></div>
</div>
<div id="content"></div>
<div id="download">
作者:十一狼<br />
聯絡:275915854(QQ) 112183883@163.com(email)<br />
下載:<a href="http://www.w3cg.net/Ajax.rar" target="_blank">http://www.w3cg.net/Ajax.rar</a>
</div>

</div>
</body>
</html>

打包檔案下載

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.