asp+ajax實(shí)現(xiàn)靜態(tài)頁(yè)面分頁(yè)的代碼
更新時(shí)間：2007年11月20日 23:42:51 作者：
最近因工作需要，要在靜態(tài)頁(yè)面上實(shí)現(xiàn)分頁(yè)，想了下，決定用AJAX來(lái)實(shí)現(xiàn)，所以就搗鼓了下面這么個(gè)東西，截圖如下：
<html>
<head>
<title>AJAX靜態(tài)分頁(yè)</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() { //該函數(shù)將返回XMLHTTP對(duì)象實(shí)例
var _xmlhttp;
try {
_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的創(chuàng)建方式
}
catch (e) {
try {
_xmlhttp=new XMLHttpRequest(); //FF等瀏覽器的創(chuàng)建方式
}
catch (e) {
_xmlhttp=false; //如果創(chuàng)建失敗，將返回false
}
}
return _xmlhttp; //返回xmlhttp對(duì)象實(shí)例
}
function getweblist(page) { //該函數(shù)用來(lái)獲取分頁(yè)數(shù)據(jù)
var xmlhttp=createAjax(); //創(chuàng)建變量xmlhttp，并將createAjax()函數(shù)創(chuàng)建的對(duì)象實(shí)例賦于它
if (xmlhttp) { //如果xmlhttp對(duì)象創(chuàng)建成功，則執(zhí)行條件語(yǔ)句中的程序
var content=document.getElementById('content'); //獲取頁(yè)面中id為content的對(duì)象
xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打開(kāi)與服務(wù)器的連接，其中g(shù)et為連接方式，server.asp為要連接的頁(yè)面，有兩個(gè)參數(shù)，其中第一個(gè)參數(shù)page為需要返回?cái)?shù)據(jù)的頁(yè)數(shù),第二個(gè)參數(shù)n為一個(gè)隨機(jī)數(shù)，這樣每次發(fā)送的URL都會(huì)不一樣，相當(dāng)于都向服務(wù)器發(fā)出一個(gè)新的請(qǐng)求，避免瀏覽器緩存數(shù)據(jù)。
xmlhttp.onreadystatechange=function() { //為xmlhttp對(duì)象的readyState屬性指定事件，改屬性值改變時(shí)，則會(huì)執(zhí)行其中的程序
if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200時(shí)，執(zhí)行條件中的程序，其中readyState有五個(gè)值，4為請(qǐng)求完成，是客戶端向服務(wù)器提交的數(shù)據(jù)成功到達(dá)，status有N多值-_-!!，其中200為OK，是指服務(wù)器向客戶端完成發(fā)送數(shù)據(jù)。
content.innerHTML=unescape(xmlhttp.responseText); //將服務(wù)器返回的數(shù)據(jù)解碼并寫入指定的ID中。
}
else {
content.innerHTML='<span style="color:red">正在從服務(wù)器提取數(shù)據(jù)......</span>'; //如果服務(wù)器沒(méi)有完成傳送，則向用戶提示正在傳輸。
}
}
xmlhttp.send(null); //向服務(wù)器發(fā)送請(qǐng)求，因?yàn)槭莋et請(qǐng)求，會(huì)直接附在URL后面，所以這里括號(hào)中的數(shù)據(jù)為null，IE中也可以不寫，但FF就必須加上null，否則會(huì)發(fā)送失敗。
}
}
function edit() { //編輯分頁(yè)顯示條數(shù)的函數(shù)
var str='<form style="margin:0">每頁(yè)顯示 <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'); //獲得頁(yè)面中的right對(duì)象。
right.innerHTML=str; 將str變量的值寫入該對(duì)象中。
}
function rightinfo() { //right對(duì)象中的原始信息，請(qǐng)?jiān)陧?yè)面開(kāi)始和被顯示條數(shù)被修改后調(diào)用
document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每頁(yè)顯示條數(shù)">Edit</a>';
}
function save() { //保存修改后的顯示條數(shù)
var pagesize=document.getElementById('pagesize'); //這個(gè)就不寫了，跟上面的用法一樣。
if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //確定用戶輸入的新數(shù)據(jù)是不是一個(gè)數(shù)字
alert("請(qǐng)正確填寫每頁(yè)顯示條數(shù)！ ");
return;
}
var xmlhttp=createAjax(); //創(chuàng)建對(duì)象
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); //先寫入從服務(wù)器返回的字符串，如果成功，會(huì)寫入completed。
getweblist(1); //從新獲取新修改后的第一頁(yè)的數(shù)據(jù)
setTimeout('rightinfo()',3000); //3秒后將right對(duì)象的原始字符串寫入。
}
else {
document.getElementById('pagesize').disabled=true; //將幾個(gè)FORM表單的元素都設(shè)為不可改動(dòng)
document.getElementById('savebtn').disabled=true;
document.getElementById('cancelbtn').disabled=true;
}
}
xmlhttp.send(null); //發(fā)送請(qǐng)求。
}
}
//-->
</script>
</head>
<body onload="getweblist(1);rightinfo();">
<div id="main">
<div id="title">
<div id="left">靜態(tài)分頁(yè)的AJAX實(shí)現(xiàn)</div>
<div id="right"></div>
</div>
<div id="content"></div>
<div id="download">
作者：十一狼<br />
聯(lián)系：275915854(QQ) 112183883@163.com(email)<br />
下載：<a >http://www.w3cg.net/Ajax.rar</a>
</div>
</div>
</body>
</html>
打包文件下載
復(fù)制代碼 代碼如下:
<html>
<head>
<title>AJAX靜態(tài)分頁(yè)</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() { //該函數(shù)將返回XMLHTTP對(duì)象實(shí)例
var _xmlhttp;
try {
_xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE的創(chuàng)建方式
}
catch (e) {
try {
_xmlhttp=new XMLHttpRequest(); //FF等瀏覽器的創(chuàng)建方式
}
catch (e) {
_xmlhttp=false; //如果創(chuàng)建失敗，將返回false
}
}
return _xmlhttp; //返回xmlhttp對(duì)象實(shí)例
}
function getweblist(page) { //該函數(shù)用來(lái)獲取分頁(yè)數(shù)據(jù)
var xmlhttp=createAjax(); //創(chuàng)建變量xmlhttp，并將createAjax()函數(shù)創(chuàng)建的對(duì)象實(shí)例賦于它
if (xmlhttp) { //如果xmlhttp對(duì)象創(chuàng)建成功，則執(zhí)行條件語(yǔ)句中的程序
var content=document.getElementById('content'); //獲取頁(yè)面中id為content的對(duì)象
xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true); //打開(kāi)與服務(wù)器的連接，其中g(shù)et為連接方式，server.asp為要連接的頁(yè)面，有兩個(gè)參數(shù)，其中第一個(gè)參數(shù)page為需要返回?cái)?shù)據(jù)的頁(yè)數(shù),第二個(gè)參數(shù)n為一個(gè)隨機(jī)數(shù)，這樣每次發(fā)送的URL都會(huì)不一樣，相當(dāng)于都向服務(wù)器發(fā)出一個(gè)新的請(qǐng)求，避免瀏覽器緩存數(shù)據(jù)。
xmlhttp.onreadystatechange=function() { //為xmlhttp對(duì)象的readyState屬性指定事件，改屬性值改變時(shí)，則會(huì)執(zhí)行其中的程序
if (xmlhttp.readyState==4 && xmlhttp.status==200) { //如果xmlhttp.readyState==4并且xmlhttp.status==200時(shí)，執(zhí)行條件中的程序，其中readyState有五個(gè)值，4為請(qǐng)求完成，是客戶端向服務(wù)器提交的數(shù)據(jù)成功到達(dá)，status有N多值-_-!!，其中200為OK，是指服務(wù)器向客戶端完成發(fā)送數(shù)據(jù)。
content.innerHTML=unescape(xmlhttp.responseText); //將服務(wù)器返回的數(shù)據(jù)解碼并寫入指定的ID中。
}
else {
content.innerHTML='<span style="color:red">正在從服務(wù)器提取數(shù)據(jù)......</span>'; //如果服務(wù)器沒(méi)有完成傳送，則向用戶提示正在傳輸。
}
}
xmlhttp.send(null); //向服務(wù)器發(fā)送請(qǐng)求，因?yàn)槭莋et請(qǐng)求，會(huì)直接附在URL后面，所以這里括號(hào)中的數(shù)據(jù)為null，IE中也可以不寫，但FF就必須加上null，否則會(huì)發(fā)送失敗。
}
}
function edit() { //編輯分頁(yè)顯示條數(shù)的函數(shù)
var str='<form style="margin:0">每頁(yè)顯示 <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'); //獲得頁(yè)面中的right對(duì)象。
right.innerHTML=str; 將str變量的值寫入該對(duì)象中。
}
function rightinfo() { //right對(duì)象中的原始信息，請(qǐng)?jiān)陧?yè)面開(kāi)始和被顯示條數(shù)被修改后調(diào)用
document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每頁(yè)顯示條數(shù)">Edit</a>';
}
function save() { //保存修改后的顯示條數(shù)
var pagesize=document.getElementById('pagesize'); //這個(gè)就不寫了，跟上面的用法一樣。
if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) { //確定用戶輸入的新數(shù)據(jù)是不是一個(gè)數(shù)字
alert("請(qǐng)正確填寫每頁(yè)顯示條數(shù)！ ");
return;
}
var xmlhttp=createAjax(); //創(chuàng)建對(duì)象
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); //先寫入從服務(wù)器返回的字符串，如果成功，會(huì)寫入completed。
getweblist(1); //從新獲取新修改后的第一頁(yè)的數(shù)據(jù)
setTimeout('rightinfo()',3000); //3秒后將right對(duì)象的原始字符串寫入。
}
else {
document.getElementById('pagesize').disabled=true; //將幾個(gè)FORM表單的元素都設(shè)為不可改動(dòng)
document.getElementById('savebtn').disabled=true;
document.getElementById('cancelbtn').disabled=true;
}
}
xmlhttp.send(null); //發(fā)送請(qǐng)求。
}
}
//-->
</script>
</head>
<body onload="getweblist(1);rightinfo();">
<div id="main">
<div id="title">
<div id="left">靜態(tài)分頁(yè)的AJAX實(shí)現(xiàn)</div>
<div id="right"></div>
</div>
<div id="content"></div>
<div id="download">
作者：十一狼<br />
聯(lián)系：275915854(QQ) 112183883@163.com(email)<br />
下載：<a >http://www.w3cg.net/Ajax.rar</a>
</div>
</div>
</body>
</html>
打包文件下載
您可能感興趣的文章:
- Jquery AJAX 用于計(jì)算點(diǎn)擊率(統(tǒng)計(jì))
- php ajax網(wǎng)站瀏覽統(tǒng)計(jì)功能的簡(jiǎn)單實(shí)現(xiàn)
- php的ajax簡(jiǎn)單實(shí)例
- ThinkPHP中使用ajax接收json數(shù)據(jù)的方法
- php AJAX POST的使用實(shí)例代碼
- php,ajax實(shí)現(xiàn)分頁(yè)
- php+ajax+jquery實(shí)現(xiàn)點(diǎn)擊加載更多內(nèi)容
- php+mysql結(jié)合Ajax實(shí)現(xiàn)點(diǎn)贊功能完整實(shí)例
- php+ajax實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)加載數(shù)據(jù)技術(shù)
- Ajax實(shí)現(xiàn)對(duì)靜態(tài)頁(yè)面的文章訪問(wèn)統(tǒng)計(jì)功能示例
相關(guān)文章
用過(guò)AJAX的朋友肯定知道javascript是使用UTF-8國(guó)際編碼，即每個(gè)漢字用3個(gè)字節(jié)來(lái)存儲(chǔ)，但是這就造成了用AJAX來(lái)send數(shù)據(jù)的時(shí)候出現(xiàn)亂碼。2014-05-05
Ajax實(shí)現(xiàn)關(guān)鍵字聯(lián)想和自動(dòng)補(bǔ)全功能及遇到坑
這篇文章主要介紹了Ajax實(shí)現(xiàn)關(guān)鍵字聯(lián)想和自動(dòng)補(bǔ)全功能,實(shí)現(xiàn)代碼包括前端部分和后端部分，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
下面小編就為大家?guī)?lái)一篇ajax傳送參數(shù)含有特殊字符的快速解決方法。希望對(duì)大家有所幫助，一起跟隨小編過(guò)來(lái)看看吧2016-04-04
ajax方式實(shí)現(xiàn)注冊(cè)功能(提交數(shù)據(jù)到后臺(tái)數(shù)據(jù)庫(kù)完成交互)
這篇文章主要介紹了ajax方式實(shí)現(xiàn)注冊(cè)功能，提交數(shù)據(jù)到后臺(tái)數(shù)據(jù)庫(kù)完成交互，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要介紹了AJAX簡(jiǎn)單測(cè)試代碼,以一個(gè)簡(jiǎn)單實(shí)例分析了Ajax的實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)題
今天小編就為大家分享一篇解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08![AJAX 請(qǐng)求區(qū)分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解](http://img.jbzj.com/images/xgimg/bcimg7.png)
AJAX 請(qǐng)求區(qū)分 $_SERVER[''HTTP_X_REQUESTED_WITH''] 小解
關(guān)于這個(gè)內(nèi)容,很多人都有所了解.但從我搜索的內(nèi)容來(lái)看,他們只是略微看一下,根本不知道里面到底是什么情況.2011-06-06
用Ajax來(lái)控制書簽和回退按鈕的代碼2007-01-01
ajax實(shí)現(xiàn)無(wú)刷新省市縣三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了ajax實(shí)現(xiàn)無(wú)刷新省市縣三級(jí)聯(lián)動(dòng)的相關(guān)資料，利用三層架構(gòu)實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-05-05