当前位置: 首页 > 图文教程 > 网络编程 > AJAX技术 > Ajax+Asp源代码]读取数据库内容的表格(没有用框架)

AJAX技术
AJAX 用户注册时的应用实例
ajax readyState的五种状态详解
php AJAX POST的使用实例代码
Ajax 用户名验证是否存在
Ajax+PHP简单基础入门实例教程
AJAX 异步传输数据的问题
ASP AJAX 静态分页
js装载xml文件然后发向服务器的实现代码
完成了AJAX树附原理分析
AJAX 支持搜索引擎问题分析
ajax Suggest类似google的搜索提示效果
Ajax 框架学习笔记
用ajax xml的数据读取的HelloWorld程序
Ajax 表单验证 实现代码
Ajax request response 乱码解决方法
AJAX 随记
ajax 乱码的一种解决方法
ajax session过期问题的几个解决方案
四步学会 Ajax
Ajax异步(请求)提交类 支持跨域

No. « 6 7 8 9 »

技术文章搜索

关键字

AJAX技术 中的 Ajax+Asp源代码]读取数据库内容的表格(没有用框架)

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-13   浏览: 87 ::
收藏到网摘: n/a

功能:
读取数据库内容的表格.读取数据方式为ajax,分页也是.代码写得不好.呵呵.供一些学习ajax的朋友参考参考.如有不妥请大家跟贴纠正.我会根据大家的提议不断修正代码.
目前还有一个小问题,如果有朋友有兴趣帮我解决一下在下不胜感激
你翻到最后一页的时候如果只有一行会出现空白和undefined.这个问题我试了很多方法一直没有很妥当的解决.
注:下面一些地方出现笑脸表情的是 大写的d
其实很多地方都可以根据asp文件中输出的字符来控制.目前还没有往那方面完善.比如说一列显示多少行等.
Asp页面的代码:
文件名:demo.Asp
复制代码 代码如下:

'下面这个Sub 是延迟用于调试ajax的loading
<%
Sub TimeDelaySeconds(DelaySeconds)
SecCount = 0
Sec2 = 0
While SecCount < DelaySeconds + 1
Sec1 = Second(Time())
If Sec1 <> Sec2 Then
Sec2 = Second(Time())
SecCount = SecCount + 1
End If
Wend
End Sub
TimeDelaySeconds(0)
%>
<%
Response.Expires = -9999
Response.AddHeader "Pragma","no-cache"
Response.AddHeader "cache-ctrol","no-cache"
Response.Charset = "GB2312"
Set conn = Server.CreateObject("ADODB.Connection")
connstr="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("Database.mdb")
conn.Open connstr
%>
<%
set rs = server.createobject("adodb.recordset")
Sqlstr = "select * from UserData order by id"
rs.open Sqlstr,conn,1,1
rs.PageSize = 3
AllPage = rs.PageCount
Page = request.QueryString ("page")
'***********************判断
if cint(page) =< 1 then
Page = 1
elseif cint(page) >= rs.PageCount then
Page = rs.PageCount
else
intpage = cint(page)
end if
'***************************
rs.AbsolutePage=page
Response.write AllPage&","&rs.AbsolutePage&","
for i = 1 to rs.PageSize
if rs.EOF or rs.BOF then exit for
Response.write rs(0)&","&rs(1)&","&rs(2)&","&rs(3)&","
rs.movenext
next
rs.close
Set rs = nothing
%>

ajax处理的页面代码
文件名:Ajax.js
复制代码 代码如下:

var request = false;
//------------------判断浏览器并建立对象----------------------------------------------------------------
try { //尝试创建 XMLHttpRequest 对象
request = new XMLHttpRequest(); //---此对象将兼容除IE外大部分浏览器!
} //-
catch (trymicrosoft) { //如果失败 catch (trymicrosoft)
try { //尝试使用较新版IE兼容的对象（Msxml2.XMLHTTP）
request = new ActiveXObject("Msxml2.XMLHTTP"); //---此对象将兼容老版本IE
} //-
catch (othermicrosoft) { //如果失败 catch (othermicrosoft)
try { //尝试使用较老版IE兼容的对象（Microsoft.XMLHTTP）
request = new ActiveXObject("Microsoft.XMLHTTP"); //---此对象将兼容新版本IE
} //-
catch (failed) { //如果失败 catch (failed)
request = false; //request = false
alert("Object Error!");
}
}
}
defaultPages();
//-------------------------------------------------------------------------------------------------------------*/

//**********读取数据***********************************************************
function defaultPages() {
var url = "Demo.asp";
request.open("GET", url, true); //open方法 （"方式",url,是否异步）
request.onreadystatechange = updatePage; //判断服务器处理的结果
request.send(null); //送出.
}
function selectPages(Method,Pages) {
//先删除以前的数据
for(i=0;i<3;i++)
document.getElementById("MyTable").deleteRow();
//----------------
if (Method == "Previous"){
var PageTemp = document.getElementById("PageNow").value;
var PageNow = parseInt(PageTemp)-1;
//alert (PageNow);//debug
var url = "Demo.asp?Page="+PageNow;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
else if (Method == "Next"){
var PageTemp = document.getElementById("PageNow").value;
var PageNow = parseInt(PageTemp)+1;
//alert (PageNow);//debug
var url = "Demo.asp?Page="+PageNow;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
}
//***********服务器是否处理完成.**********************************************************************************
function updatePage() {
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";
}
}
}
//***********处理完成-生成数据.**********************************************************************************
function requestAllright() {
var getStr = request.responseText;
var getValue = getStr.split(",");
var PageCount = getValue[0];
var PageNow = getValue[1];
var Contact = [
[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 (var List=0;List<Contact.length;List++){
var MyTr = MyTable.insertRow(); //创建Tr标签
for (var Cell=0;Cell<Contact[List].length;Cell++){ //Td循环
var MyTd = 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 = "<a href=javascript:selectPages('Previous','0'); target=_self class=pagesTag>Previous</a>│Next"
}
else if (PageNow == 1){
document.getElementById("Pages").innerHTML = "Previous│<a href=javascript:selectPages('Next','0'); target=_self class=pagesTag>Next</a>"
}
else if (PageNow != 1 || PageNow != PageCount){
document.getElementById("Pages").innerHTML = "<a href=javascript:selectPages('Previous','0'); target=_self class=pagesTag>Previous</a>│<a href=javascript:selectPages('Next','0'); target=_self class=pagesTag>Next</a>"
}
//上一页下一页处的判断,是否可以点击******************************************************************************************
document.getElementById("PageCount").value = PageCount;
document.getElementById("PageNow").value = PageNow;
document.getElementById("Status").innerHTML = "Done with!";
//alert(PageCount);//debug
//alert(PageNow);//debug
}

html页面的代码
页面名称:List.htm
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Dynamic of Table - Auntion - Javascript+DOM</title>
<style type="text/css">
/*------------public style--------------*/
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:1px dashed #d6d6d6;
border-left:1px dashed #d6d6d6;
}
#MyTable td {
height:18px;
text-align: center;
border-right:1px dashed #d6d6d6;
border-bottom:1px dashed #d6d6d6;
padding: 3px 3px 2px 3px;
}
.MyTableTag {
color:#0099FF;
font-size:12px;
font-weight:bolder;
}
#Number {
color:#FF6633;
}
.pages {
border-left:1px dashed #d6d6d6;
border-right:1px dashed #d6d6d6;
border-bottom:1px dashed #d6d6d6;
}
.pagesTag {
color:#0099FF;
}
.status {
color:#666666;
}
.statusContact {
color:#888888;
}
.No {
color:#BBBBBB;
}
</style>
<script language="javascript" type="text/javascript" src="Ajax.Js"></script>
</head>
<body>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="0" id="MyTable" >
<tr>
<td width="30" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeId">Id</td>
<td width="140" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeName">Name</td>
<td width="80" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeSex">Sex</td>
<td width="50" align="center" bgcolor="#F0F9FF" class="MyTableTag" id="modeAge">Age</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="300" height="24" border="0" cellpadding="0" cellspacing="0" bgcolor="#F0F9FF" class="pages">
<tr>
<td width="36" align="right" valign="middle" class="status" style="padding-left:8px;">Status:
<input type="hidden" name="PageCount" id="PageCount"/><!--储存分页总数-->
<input type="hidden" name="PageNow" id="PageNow"/><!--储存当前页码-->
</td>
<td id="Status" width="162" align="left" valign="middle" class="statusContact" style="padding-left:2px;">Loading...</td>
<td id="Pages" width="98" align="center" valign="middle" class="No">Previous│Next</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

数据库为access.
数据库文件名:database.mdb
表名:UserData
字段:Id Name Sex Age
id为编号.其他全部为String.发不上来图,自己看加吧.性别也是普通的文本字段,如果需要yes/no.自己修改一下就可以了