Ajax如何實現靜態頁面分頁_AJAX教程
推薦：解析AJAX進度條在最近的一個項目中，有一個上傳功能：上傳一個cvs文件，然后解析此文件并寫入數據庫 由于經常需要傳很大的文件，客戶完成此功能往往需要40分鐘，在這個過程中，頁面也沒有任何提示，用戶體驗非常不好？ 為何不用ajax作一個進度條呢？ 分兩步完成此需求： 一
靜態頁面分頁的AJAX實現，效果如圖：
index.html頁面源文件：
<html>
<head>
<title>AJAX靜態分頁</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() { //該函數將返回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 />
聯系：275915854(QQ) 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>
set.asp文件代碼
<!--#include file="conn.asp"-->
<%
Dim pagesize
pagesize=Trim(Request.QueryString("pagesize"))
If pagesize<>"" And IsNumeric(pagesize)=True Then
session("pagesize")=pagesize
'sql="select top 1 * from [pagesize] order by id desc"
'rs.open sql,conn,1,3
'rs("pagesize")=pagesize
'rs.update
'rs.close
Response.Write(escape("<span style=""color:red"">Completed。</span>"))
Else
Response.Write(escape("<span style=""color:red"">Err：參數錯誤。</span>"))
End If
Set rs=Nothing
conn.Close
Set conn=Nothing
%>
conn.asp文件代碼
<%
Dim conn,rs
Set conn=Server.CreateObject("ADODB.Connection")
conn.open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("data.mdb")
Set rs=Server.CreateObject("ADODB.Recordset")
%>
server.asp文件代碼
<!--#include file="conn.asp"-->
<%
'Dim pagesize
'sql="select top 1 * from [pagesize] order by id desc"
'rs.open sql,conn,1,1
'pagesize=rs("pagesize")
'rs.Close
If session("pagesize")="" Then session("pagesize")=9
Dim page
page=unescape(Request.QueryString("page"))
If page<>"" Then
sql="select * from [test] order by id asc"
rs.open sql,conn,1,1
If rs.eof Then
Response.Write(escape("還沒有任何數據"))
Else
rs.pagesize=session("pagesize")
page=CLng(page)
If page<1 Then
page=1
ElseIf page>rs.pagecount Then
page=rs.pagecount
End If
rs.absolutepage=page
Dim i,str
str=str & "<div style='margin:0'>"
For i=1 To rs.pagesize
str=str & rs("id") & ". <a href='" & rs("weburl") & "' title='前往該網站' target='_blank'>" & rs("webname") & "</a><br />"
rs.movenext
If rs.eof Then Exit For
Next
str=str & "</div><div style='margin-top:10px;line-height:30px;text-align:left;border-top:1px #999 solid'>"
str=str & "<a href='javascript：void(getweblist(1))'><<</a> "
For i=1 To rs.pagecount
If i=page Then
str=str & "<span style='font-weight:bold;color:red;font-size:16px;'>" & i & "</span> "
Else
str=str & "<a href=javascript：void(getweblist(" & i & "))>" & i & "</a> "
End If
Next
str=str & " <a href='javascript：void(getweblist(" & rs.pagecount & "))'>>></a>"
str=str & "</div>"
str=escape(str)
Response.Write(str)
End If
rs.Close
Set rs=Nothing
conn.Close
Set conn=Nothing
Else
Response.Write(escape("Error：頁數不能為空！"))
End If
%>
data數據庫設置
表:pagesize 字段:id 自動編號 pagesize 數字
test 字段:id 自動編號 webname 文本 weburl 文本 addtime 日期/時間
分享：解讀jsp+ajax自動刷新實例一、JSP文件：auto.jsp %@ page contentType=text/html; charset=gb2312 % % //設置輸出信息的格式及字符集 response.setContentType(text/xml; charset=UTF-8); response.setHeader(Cache-Control,no-cache); out.println(response); for(int i=0
- 相關鏈接：
- 教程說明：
AJAX教程-Ajax如何實現靜態頁面分頁
。