ASP AJAX
AJAX 是指在不重新加载整个页面的情况下更新网页的一部分。
什么是 AJAX？
AJAX = Asynchronous JavaScript and XML（异步 JavaScript 和 XML）。
AJAX 是一种创建快速动态网页的技术。
AJAX 允许通过在后台交换少量数据与服务器进行通信，从而异步更新网页。这意味着可以在不重新加载整个页面的情况下更新网页的一部分。
传统的网页（不使用 AJAX）如果内容需要更改，则必须重新加载整个页面。
使用 AJAX 的应用程序示例：Google Maps、Gmail、Youtube 和 Facebook 标签页。
AJAX 如何工作
AJAX 基于 Internet 标准
AJAX 基于 Internet 标准，它结合使用了
- XMLHttpRequest 对象（用于与服务器异步交换数据）
- JavaScript/DOM（用于显示/交互信息）
- CSS（用于样式化数据）
- XML（通常用作数据传输格式）
AJAX 应用程序是浏览器和平台无关的！
Google Suggest
AJAX 在 2005 年由 Google 推广，通过 Google Suggest。
Google Suggest 使用 AJAX 创建了一个非常动态的 Web 界面：当您开始在 Google 的搜索框中输入时，JavaScript 会将字母发送到服务器，服务器会返回一个建议列表。
立即开始使用 AJAX
在我们的 ASP 教程中，我们将演示 AJAX 如何在不重新加载整个页面的情况下更新网页的一部分。服务器脚本将用 ASP 编写。
如果您想了解更多关于 AJAX 的信息，请访问我们的AJAX 教程。
AJAX ASP 示例
以下示例将演示当用户在输入字段中键入字符时，网页如何与 Web 服务器进行通信。
示例
在下面的输入字段中开始输入姓名
建议：
示例解释
在上面的示例中，当用户在输入字段中键入一个字符时，会执行一个名为 "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("no suggestion")
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
循环
response.write("</table>")
%>
