![asp ajax统计源码 Ajax+Asp源代码]读取数据库内容的表格(没有用框架)](https://600zi.400zi.cn/uploadfile/img/15/93/acb39ba0463e3a3a7854d44033b8aef8.jpg)
功能:
读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码.
目前还有一个小问题,如果有朋友有兴趣帮我解决一下在下不胜感激
你翻到最后一页的时候如果只有一行会出现空白和undefined.这个问题我试了很多方法一直没有很妥当的解决.
注:下面一些地方出现笑脸表情的是大写的d
其实很多地方都可以根据asp文件中输出的字符来控制.目前还没有往那方面完善.比如说一列显示多少行等.
Asp页面的代码:
文件名:demo.Asp
'下面这个Sub是延迟用于调试ajax的loading
SubTimeDelaySeconds(DelaySeconds)
SecCount=0
Sec2=0
WhileSecCount
Sec1=Second(Time())
IfSec1<>Sec2Then
Sec2=Second(Time())
SecCount=SecCount+1
EndIf
Wend
EndSub
TimeDelaySeconds(0)
%>
Response.Expires=-9999
Response.AddHeader"Pragma","no-cache"
Response.AddHeader"cache-ctrol","no-cache"
Response.Charset="GB2312"
Setconn=Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;DataSource="&Server.MapPath("Database.mdb")
conn.Openconnstr
%>
setrs=server.createobject("adodb.recordset")
Sqlstr="select*fromUserDataorderbyid"
rs.openSqlstr,conn,1,1
rs.PageSize=3
AllPage=rs.PageCount
Page=request.QueryString("page")
'***********************判断
ifcint(page)=
Page=1
elseifcint(page)>=rs.PageCountthen
Page=rs.PageCount
else
intpage=cint(page)
endif
'***************************
rs.AbsolutePage=page
Response.writeAllPage&","&rs.AbsolutePage&","
fori=1tors.PageSize
ifrs.EOForrs.BOFthenexitfor
Response.writers(0)&","&rs(1)&","&rs(2)&","&rs(3)&","
rs.movenext
next
rs.close
Setrs=nothing
%>
ajax处理的页面代码
文件名:Ajax.js
varrequest=false;
//------------------判断浏览器并建立对象----------------------------------------------------------------
try{//尝试创建XMLHttpRequest对象
request=newXMLHttpRequest();//---此对象将兼容除IE外大部分浏览器!
}//-
catch(trymicrosoft){//如果失败catch(trymicrosoft)
try{//尝试使用较新版IE兼容的对象(Msxml2.XMLHTTP)
request=newActiveXObject("Msxml2.XMLHTTP");//---此对象将兼容老版本IE
}//-
catch(othermicrosoft){//如果失败catch(othermicrosoft)
try{//尝试使用较老版IE兼容的对象(Microsoft.XMLHTTP)
request=newActiveXObject("Microsoft.XMLHTTP");//---此对象将兼容新版本IE
}//-
catch(failed){//如果失败catch(failed)
request=false;//request=false
alert("ObjectError!");
}
}
}
defaultPages();
//-------------------------------------------------------------------------------------------------------------*/
//**********读取数据***********************************************************
functiondefaultPages(){
varurl="Demo.asp";
request.open("GET",url,true);//open方法("方式",url,是否异步)
request.onreadystatechange=updatePage;//判断服务器处理的结果
request.send(null);//送出.
}
functionselectPages(Method,Pages){
//先删除以前的数据
for(i=0;i<3;i++)
document.getElementById("MyTable").deleteRow();
//----------------
if(Method=="Previous"){
varPageTemp=document.getElementById("PageNow").value;
varPageNow=parseInt(PageTemp)-1;
//alert(PageNow);//debug
varurl="Demo.asp?Page="+PageNow;
request.open("GET",url,true);
request.onreadystatechange=updatePage;
request.send(null);
}
elseif(Method=="Next"){
varPageTemp=document.getElementById("PageNow").value;
varPageNow=parseInt(PageTemp)+1;
//alert(PageNow);//debug
varurl="Demo.asp?Page="+PageNow;
request.open("GET",url,true);
request.onreadystatechange=updatePage;
request.send(null);
}
}
//***********服务器是否处理完成.**********************************************************************************
functionupdatePage(){
if(request.readyState<=3){//小于或等于状态3----loading.
document.getElementById("Status").innerHTML="Loading...";
document.getElementById("Pages").innerHTML="Previous│Next";
}
if(request.readyState==4){//状态4----完成.
if(request.status==200){//如果http状态为200--当成功获取获取数据.
requestAllright();
}else{//如果http状态为404--http报错.
document.getElementById("Status").innerHTML="Error:"+request.status;
document.getElementById("Pages").innerHTML="Previous│Next";
}
}
}
//***********处理完成-生成数据.**********************************************************************************
functionrequestAllright(){
vargetStr=request.responseText;
vargetValue=getStr.split(",");
varPageCount=getValue[0];
varPageNow=getValue[1];
varContact=[
[getValue[2],getValue[3],getValue[4],getValue[5]],
[getValue[6],getValue[7],getValue[8],getValue[9]],
[getValue[10],getValue[11],getValue[12],getValue[13]]
];
for(varList=0;List
varMyTr=MyTable.insertRow();//创建Tr标签
for(varCell=0;Cell
varMyTd=MyTr.insertCell();//创建Td标签
MyTd.innerHTML=Contact[List][Cell];//给Td标签插入内容
if(Cell==0)//如果当前为每行的第一个Td
MyTd.id="Number";//赋予其ID为Number
}
}
//上一页下一页处的判断,是否可以点击******************************************************************************************
if(PageNow==PageCount){
document.getElementById("Pages").innerHTML="Previous│Next"
}
elseif(PageNow==1){
document.getElementById("Pages").innerHTML="Previous│Next"
}
elseif(PageNow!=1||PageNow!=PageCount){
document.getElementById("Pages").innerHTML="Previous│Next"
}
//上一页下一页处的判断,是否可以点击******************************************************************************************
document.getElementById("PageCount").value=PageCount;
document.getElementById("PageNow").value=PageNow;
document.getElementById("Status").innerHTML="Donewith!";
//alert(PageCount);//debug
//alert(PageNow);//debug
}
html页面的代码
页面名称:List.htm
htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DynamicofTable-Auntion-Javascript+DOM
/*------------publicstyle--------------*/
body{
font-family:Geneva,Arial,Helvetica,sans-serif;
font-size:11px;
}
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
a:active{
text-decoration:none;
}
/*-------------------------------------*/
#MyTable{
color:#888888;
border-top:1pxdashed#d6d6d6;
border-left:1pxdashed#d6d6d6;
}
#MyTabletd{
height:18px;
text-align:center;
border-right:1pxdashed#d6d6d6;
border-bottom:1pxdashed#d6d6d6;
padding:3px3px2px3px;
}
.MyTableTag{
color:#0099FF;
font-size:12px;
font-weight:bolder;
}
#Number{
color:#FF6633;
}
.pages{
border-left:1pxdashed#d6d6d6;
border-right:1pxdashed#d6d6d6;
border-bottom:1pxdashed#d6d6d6;
}
.pagesTag{
color:#0099FF;
}
.status{
color:#666666;
}
.statusContact{
color:#888888;
}
.No{
color:#BBBBBB;
}
数据库为access.
数据库文件名:database.mdb表名:UserData
字段:IdNameSexAge
id为编号.其他全部为String.发不上来图,自己看加吧.性别也是普通的文本字段,如果需要yes/no.自己修改一下就可以了
