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); //打開與服務器的連接，其中get為連接方式，server.asp為要連接的頁面，有兩個參數(shù)，其中第一個參數(shù)page為需要返回數(shù)據(jù)的頁數(shù),第二個參數(shù)n為一個隨機數(shù)，這樣每次發(fā)送的URL都會不一樣，相當于都向服務器發(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為請求完成，是客戶端向服務器提交的數(shù)據(jù)成功到達，status有N多值-_-!!，其中200為OK，是指服務器向客戶端完成發(fā)送數(shù)據(jù)。 content.innerHTML=unescape(xmlhttp.responseText); //將服務器返回的數(shù)據(jù)解碼并寫入指定的ID中。 } else { content.innerHTML='span style="color:red">正在從服務器提取數(shù)據(jù)....../span>'; //如果服務器沒有完成傳送，則向用戶提示正在傳輸。 } } xmlhttp.send(null); //向服務器發(fā)送請求，因為是get請求，會直接附在URL后面，所以這里括號中的數(shù)據(jù)為null，IE中也可以不寫，但FF就必須加上null，否則會發(fā)送失敗。 } }
function edit() { //編輯分頁顯示條數(shù)的函數(shù) 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對象中的原始信息，請在頁面開始和被顯示條數(shù)被修改后調用 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); //先寫入從服務器返回的字符串，如果成功，會寫入completed。 getweblist(1); //從新獲取新修改后的第一頁的數(shù)據(jù) 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); //發(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 target="_blank">https://www.jb51.net/a> /div>
