溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

asp中怎么利用ajax實現(xiàn)靜態(tài)頁面分頁

發(fā)布時間：2021-08-07 17:18:58 來源：億速云 閱讀：137 作者：Leah 欄目：web開發(fā)

今天就跟大家聊聊有關(guān)asp中怎么利用ajax實現(xiàn)靜態(tài)頁面分頁，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

代碼如下:


<html>
<head>
<title>AJAX靜態(tài)分頁</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對象實例
    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對象實例
}

function getweblist(page) {        //該函數(shù)用來獲取分頁數(shù)據(jù)
    var xmlhttp=createAjax();    //創(chuàng)建變量xmlhttp，并將createAjax()函數(shù)創(chuàng)建的對象實例賦于它
    if (xmlhttp) {        //如果xmlhttp對象創(chuàng)建成功，則執(zhí)行條件語句中的程序
        var content=document.getElementById('content');        //獲取頁面中id為content的對象
        xmlhttp.open('get','server.asp?page='+page+'&n='+Math.random(),true);    //打開與服務(wù)器的連接，其中g(shù)et為連接方式，server.asp為要連接的頁面，有兩個參數(shù)，其中第一個參數(shù)page為需要返回數(shù)據(jù)的頁數(shù),第二個參數(shù)n為一個隨機數(shù)，這樣每次發(fā)送的URL都會不一樣，相當(dāng)于都向服務(wù)器發(fā)出一個新的請求，避免瀏覽器緩存數(shù)據(jù)。
        xmlhttp.onreadystatechange=function() {        //為xmlhttp對象的readyState屬性指定事件，改屬性值改變時，則會執(zhí)行其中的程序
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {    //如果xmlhttp.readyState==4并且xmlhttp.status==200時，執(zhí)行條件中的程序，其中readyState有五個值，4為請求完成，是客戶端向服務(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 >正在從服務(wù)器提取數(shù)據(jù)......</span>';    //如果服務(wù)器沒有完成傳送，則向用戶提示正在傳輸。
            }
        }
        xmlhttp.send(null);    //向服務(wù)器發(fā)送請求，因為是get請求，會直接附在URL后面，所以這里括號中的數(shù)據(jù)為null，IE中也可以不寫，但FF就必須加上null，否則會發(fā)送失敗。
    }
}

function edit() {    //編輯分頁顯示條數(shù)的函數(shù)
    var str='<form >每頁顯示 <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對象中的原始信息，請在頁面開始和被顯示條數(shù)被修改后調(diào)用
    document.getElementById('right').innerHTML='<a href="javascript:void(edit())" title="修改每頁顯示條數(shù)">Edit</a>';
}

function save() {    //保存修改后的顯示條數(shù)
    var pagesize=document.getElementById('pagesize');    //這個就不寫了，跟上面的用法一樣。
    if (pagesize.value==''||/[0-9]+/.test(pagesize.value)==false) {        //確定用戶輸入的新數(shù)據(jù)是不是一個數(shù)字
        alert("請正確填寫每頁顯示條數(shù)！ ");
        return;
    }
    var xmlhttp=createAjax();    //創(chuàng)建對象
    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ù)器返回的字符串，如果成功，會寫入completed。
                getweblist(1);        //從新獲取新修改后的第一頁的數(shù)據(jù)
                setTimeout('rightinfo()',3000);        //3秒后將right對象的原始字符串寫入。
            }
            else {
                document.getElementById('pagesize').disabled=true;    //將幾個FORM表單的元素都設(shè)為不可改動
                document.getElementById('savebtn').disabled=true;
                document.getElementById('cancelbtn').disabled=true;
            }
        }
        xmlhttp.send(null);    //發(fā)送請求。
    }
}

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

<body onload="getweblist(1);rightinfo();">
    <div id="main">
        <div id="title">
            <div id="left">靜態(tài)分頁的AJAX實現(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 href="http://www.w3cg.net/Ajax.rar" target="_blank">http://www.w3cg.net/Ajax.rar</a>
        </div>

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

看完上述內(nèi)容，你們對asp中怎么利用ajax實現(xiàn)靜態(tài)頁面分頁有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手