ASP AJAX
AJAX 是关于更新网页的一部分，而无需重新加载整个页面。
什么是 AJAX？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
AJAX 允许网页通过与服务器后台交换少量数据来异步更新。这意味着可以更新网页的一部分，而无需重新加载整个页面。
传统的网页（不使用 AJAX）必须在内容发生变化时重新加载整个页面。
使用 AJAX 的应用程序示例：谷歌地图、Gmail、YouTube 和 Facebook 标签。
AJAX 如何工作
AJAX 基于互联网标准
AJAX 基于互联网标准，并结合使用
- XMLHttpRequest 对象（用于与服务器异步交换数据）
- JavaScript/DOM（用于显示/交互信息）
- CSS（用于样式化数据）
- XML（通常用作传输数据的格式）
AJAX 应用程序与浏览器和平台无关！
Google Suggest
AJAX 在 2005 年由 Google 通过 Google Suggest 推广开来。
Google Suggest 使用 AJAX 创建了一个非常动态的网页界面：当您开始在 Google 搜索框中输入时，JavaScript 会将字母发送到服务器，服务器会返回一个建议列表。
立即开始使用 AJAX
在我们的 ASP 教程中，我们将演示 AJAX 如何更新网页的一部分，而无需重新加载整个页面。服务器脚本将使用 ASP 编写。
如果您想了解更多关于 AJAX 的信息，请访问我们的 AJAX 教程。
AJAX ASP 示例
以下示例将演示网页如何在用户在输入字段中键入字符时与网页服务器通信
示例
在下面的输入字段中开始键入姓名
建议：
示例解释
在上面的示例中，当用户在输入字段中键入一个字符时，会执行一个名为“showHint()”的函数。
该函数由 onkeyup 事件触发。
以下是 HTML 代码
示例
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>在下面的输入字段中开始键入姓名：</b></p>
<form>
名字：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>建议：<span id="txtHint"></span></p>
</body>
</html>
亲自尝试 »
代码解释
首先，检查输入字段是否为空 (str.length == 0)。如果是，则清除 txtHint 占位符的内容并退出函数。
但是，如果输入字段不为空，则执行以下操作
- 创建一个 XMLHttpRequest 对象
- 创建服务器响应准备就绪时要执行的函数
- 将请求发送到服务器上的 ASP 文件 (gethint.asp)
- 请注意，q 参数已添加到 gethint.asp?q="+str
- str 变量保存输入字段的内容
ASP 文件 - “gethint.asp”
ASP 文件检查一个名称数组，并将相应的名称返回到浏览器
<%
response.expires=-1
dim a(30)
' 用名称填充数组
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
' 从 URL 获取 q 参数
q=ucase(request.querystring("q"))
' 如果 q 的长度大于 0，则查找数组中的所有提示
if len(q)>0 then
hint=""
for i=1 to 30
if q=ucase(mid(a(i),1,len(q))) then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
' 如果没有找到提示，则输出“无建议”
' 或输出正确的值
if hint="" then
response.write("无建议")
else
response.write(hint)
end if
%>
AJAX 可用于与数据库进行交互式通信。
AJAX 数据库示例
以下示例将演示网页如何使用 AJAX 从数据库中获取信息
示例解释 - HTML 页面
当用户在上面的下拉列表中选择客户时，将执行名为“showCustomer()”的函数。该函数由“onchange”事件触发。
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 的代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 的代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">选择客户:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">客户信息将在此列出...</div>
</body>
</html>
源代码解释
如果没有选择客户（str.length==0），该函数将清除 txtHint 占位符的内容并退出函数。
如果选择了一个客户，则 showCustomer() 函数将执行以下操作：
- 创建一个 XMLHttpRequest 对象
- 创建服务器响应准备就绪时要执行的函数
- 向服务器上的文件发送请求
- 请注意，一个参数（q）被添加到 URL 中（包含下拉列表的内容）
ASP 文件
由上面 JavaScript 代码调用的服务器页面是一个名为“getcustomer.asp”的 ASP 文件。
“getcustomer.asp”中的源代码对数据库运行查询，并将结果以 HTML 表格的形式返回。
<%
response.expires=-1
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("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>
