International - English

Topic Center

Contact Sales

首頁 > 開發者 > Ajax

ajax實現分頁效果一

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

總共有兩個檔案,第一個檔案為index.html是用來顯示的檔案,第二個就p.asp檔案處理並返回頁面.

先來看看效果圖吧:

下面是調用頁面index.html

<html>
<head>
<title>AJAX靜態分頁</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">

<style type="text/css">

</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 />
     </div>

</div>
</body>

</html>
p.asp檔案請看下一篇,

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：

ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls

ajax入門指南（二） 02-28

ajax使用_雜類 08-22

jQuery ajax 檔案下載_ajax 08-22

AJAX各種實現方式比較_ajax 08-23

AJAX入門--- XMLHttpRequest對象的屬性和方法 08-23

解決spring-security session逾時 Ajax 請求沒有重新導向的問題 09-06

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More