AJAX教程实例,ASP+AJAX+ACCESS数据库应用教程(附源码)

80酷酷网    80kuku.com

  access|asp+|数据|数据库|ajax教程

AJAX教程实例[阿里西西原创] 

其实说起AJAX的初级应用是非常简单的,通俗的说就是客户端(javascript)与服务端(asp或php等)脚本语言的数据交互。

看完本篇ajax实例教程,我相信你也可以轻松做出一个初级的AJAX应用。

你也可以直接访问:预览此篇ajax教程的源码示例。

好,下面我们就始一步步让你了解AJAX+ASP基础应用,我们将分三步讲解,如下。

1.        前台AJAX代码(javascript)的创建。

2.        后台服务端ASP AJAX代码的编写。

3.        ASP+AJAX+数据库的实例演示及讲解。

 

第一步:前台AJAX代码(javascript)的创建。

我们先创建一个index.html前台文件,内容代码如下:

<html>

<head>

<title>AJAX教程实例-AJAX教程实例-ASP+AJAX+ACCESS数据库应用-阿里西西原创ajax实例教程</title>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

</head>

<body>

<script> var xmlHttp

 

function showCustomer(str)

{

var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str

xmlHttp=GetXmlHttpObject(stateChanged)

xmlHttp.open("GET", url , true)

xmlHttp.send(null)

}

 

function stateChanged()

{

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

{

document.getElementById("txtHint").innerHTML=xmlHttp.responseText

}

}

 

function GetXmlHttpObject(handler)

{

var objXmlHttp=null

 

if (navigator.userAgent.indexOf("Opera")>=0)

{

alert("This example doesn't work in Opera")

return;

}

if (navigator.userAgent.indexOf("MSIE")>=0)

{

var strName="Msxml2.XMLHTTP"

 

if (navigator.appVersion.indexOf("MSIE 5.5")>=0)

{

strName="Microsoft.XMLHTTP"

}

try

{

objXmlHttp=new ActiveXObject(strName)

objXmlHttp.onreadystatechange=handler

return objXmlHttp

}

catch(e)

{

alert("Error. Scripting for ActiveX might be disabled")

return

}

}

if (navigator.userAgent.indexOf("Mozilla")>=0)

{

objXmlHttp=new XMLHttpRequest()

objXmlHttp.onload=handler

objXmlHttp.onerror=handler

return objXmlHttp

}

}

</script>

<form>请选择用户:

<select name="customers" >

<option value="1">阿里西西.by.alixixi.com</option>

<option value="2">哇塞网</option>

<option value="3">收音机</option>

</select>

</form><p>

<div id="txtHint"><b>网站信息...</b></div>

</p></body>

</html>

 

ajax代码讲解:

关键代码为JS部分,其原理就是创建一个客户的Microsoft.XMLHTTP对象,来完成前台数据与服务端ASP的交互。

    然后要注意的就是<select name="customers" >
这一行代码,原理就是通过showCustomer(this.value)触发AJAX的前台脚本对象,将用户在下拉列表选择的结果数据通过Microsoft.XMLHTTP发送到服务端处理,再返回到前台ID为txtHint的<div id="txtHint"><b>用户信息...</b></div>层标签显示出来。

 

第二步:后台服务端ASP AJAX代码的编写。

创建完刚才的index.html,我们接着再创建一个getcustomer.asp文件,请确认你的ASP环境一切OK:)

getcustomer.asp的代码如下:

<%

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

sql=sql & request.querystring("q")

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("ajaxjiaocheng.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open sql, conn

Response.CharSet = "GB2312"

if not rs.EOF then

response.write "<li>编号:"&rs(0)&"</li>"

response.write "<li>名称:"&rs(1)&"</li>"

response.write "<li>点击:"&rs(2)&"</li>"

response.write "<li>介绍:"&rs(3)&"</li>"

end if

rs.close

set rs = nothing

conn.close

set conn = nothing

%>

ajax代码讲解:

    如果有asp基础的朋友一看就能明白,连接数据库代码及跟据前台发送过来的q参数查询相应的数据库结果:

sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="

sql=sql & request.querystring("q")

set conn=Server.CreateObject("ADODB.Connection")

conn.Provider="Microsoft.Jet.OLEDB.4.0"

conn.Open(Server.Mappath("ajaxjiaocheng.mdb"))

set rs = Server.CreateObject("ADODB.recordset")

rs.Open sql, conn

 

    接着要注意的就是这行代码:

Response.CharSet = "GB2312"         ‘这句很关键,解决ajax中文乱码

很多人在使用AJAX过程中,经常都会遇到ajax中文显示变成乱码的问题,其实在ASP+AJAX应用中很容易解决这个问题,只需要在Response.Write语句输出中文内容前加入这行代码,就可以轻松解决ajax中文乱码问题。

 

    继续讲解下段代码,就是显示相应的数据库查询结果,关闭数据库连接:

if not rs.EOF then

response.write "<li>编号:"&rs(0)&"</li>"

response.write "<li>名称:"&rs(1)&"</li>"

response.write "<li>点击:"&rs(2)&"</li>"

response.write "<li>介绍:"&rs(3)&"</li>"

end if

rs.close

set rs = nothing

conn.close

set conn = nothing

 

第三步:ASP+AJAX+数据库的实例演示及讲解

 

    一路下来,代码非常精简明了,相信看过后,你就可以准备动手自己测试一下了。下面我们再附上数据库表的说明及截图如下:

 

库名:ajaxjiaocheng.mdb

表名: Customers

 

字段1:CustomerID    自动编号

字段2:Name        文本格式

字段3:NL                    数字格式

字段4:Address   文本格式

 

 

看到这里,不知道你是否能理解AJAX的工作原理?建议你动手一步步跟着本教程编写代码并进行测试。

 

本实例直观的说可以这样理解:

通过index.html页面上的<select name="customers" > 下拉列表选择触发JS代码中的showCustomer(this.value)事件,将选中的option值<option value="1">阿里西西</option>

由以下的代码传递给ASP文件:

var url="getcustomer.asp?sid=" + Math.random() + "&q=" + str

xmlHttp=GetXmlHttpObject(stateChanged)

xmlHttp.open("GET", url , true)

xmlHttp.send(null)

 

ASP文件接收到q参数后,输出数据库相应的查询结果,然后js会检查asp的输出状态,如果输出完成后会把结果返回到index.html文件ID为txtHint的标签上。

 

哈哈,这个直观说法只是为最初级的AJAX学习者适用,想被AJAX高手看到了一定会汗颜。

 

好了,这个ajax实例教程就写完了,本ajax实例提供了源代码下载,下载地址为: 。演示地址为:。如果你其它问题或想了解更多的ajax教程及资源,欢迎访问阿里西西web开发社区的AJAX教程专栏,网址是:。

 

作者:阿里西西

网址: 

日期:2007-12-08



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: