主頁(yè) > 知識(shí)庫(kù) > asp+ajax實(shí)現(xiàn)靜態(tài)頁(yè)面分頁(yè)的代碼

asp+ajax實(shí)現(xiàn)靜態(tài)頁(yè)面分頁(yè)的代碼

熱門(mén)標(biāo)簽:電銷機(jī)器人違法了嗎 姜堰電銷機(jī)器人 遼寧正規(guī)電銷機(jī)器人 澳大利亞城市地圖標(biāo)注 許昌智能電銷機(jī)器人公司 遼寧銀行智能外呼系統(tǒng) 辰溪地圖標(biāo)注 上海浦東騰訊地圖標(biāo)注位置 海南銀行智能外呼系統(tǒng)商家
最近因工作需要,要在靜態(tài)頁(yè)面上實(shí)現(xiàn)分頁(yè),想了下,決定用AJAX來(lái)實(shí)現(xiàn),所以就搗鼓了下面這么個(gè)東西,截圖如下:

復(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ù)解碼并寫(xiě)入指定的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中也可以不寫(xiě),但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變量的值寫(xiě)入該對(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è)就不寫(xiě)了,跟上面的用法一樣。
    if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) {        //確定用戶輸入的新數(shù)據(jù)是不是一個(gè)數(shù)字
        alert("請(qǐng)正確填寫(xiě)每頁(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);    //先寫(xiě)入從服務(wù)器返回的字符串,如果成功,會(huì)寫(xiě)入completed。
                getweblist(1);        //從新獲取新修改后的第一頁(yè)的數(shù)據(jù)
                setTimeout('rightinfo()',3000);        //3秒后將right對(duì)象的原始字符串寫(xiě)入。
            }
            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)nbsp;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ì)功能示例

標(biāo)簽:撫州 伊春 威海 銅川 崇左 晉城 深圳 西藏

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《asp+ajax實(shí)現(xiàn)靜態(tài)頁(yè)面分頁(yè)的代碼》,本文關(guān)鍵詞  asp+ajax,實(shí)現(xiàn),靜態(tài),頁(yè)面,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《asp+ajax實(shí)現(xiàn)靜態(tài)頁(yè)面分頁(yè)的代碼》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于asp+ajax實(shí)現(xiàn)靜態(tài)頁(yè)面分頁(yè)的代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章