|
其实说起AJAX的初级应用是非常简单的，通俗的说就是客户端(javascript)与服务端(asp或php等)脚本语言的数据交互。 看完本篇ajax实例教程，我相信你也可以轻松做出一个初级的AJAX应用。 你也可以直接访问：http://www.alixixi.com/Dev/web/ajax/jiaocheng.html预览此篇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" onchange="showCustomer(this.value)"> <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" onchange="showCustomer(this.value)"> 第二步：后台服务端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" onchange="showCustomer(this.value)"> 下拉列表选择触发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实例提供了源代码下载，下载地址为：http://www.alixixi.com/download/ajaxjiaocheng.rar 。演示地址为：http://www.alixixi.com/Dev/web/ajax/jiaocheng.html。 |
