关于AJAX几个入门练习

所有练习都使用ASP作为服务器端动态编程语言，这一块无需大家了解，只需了解其作用即可，同时需要将这些示例文件全部拷贝到IIS服务器上的根目录（C:\inetpub\wwwroot）中，并通过http://localhost来访问

1）基本的方法演示，点击按钮获取服务器时间信息并显示在页面上

index.html文件为：

<html>
<head>
<meta charset=”utf-8″>
<script type=”text/javascript”>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(“myDiv”).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open(“GET”, “http://localhost/result.asp”, true);
xmlhttp.send();
}
</script>
</head>
<body>

</body>
</html>

result.asp文件为：

<%
response.write(date())
%>

2）利用数据库完成的验证，可以在用户输完学号后自动查询数据库是否存在相同学号学生

index.html文件为：

<html>
<head>
<meta charset=”utf-8″>
<script type=”text/javascript”>
function showHint(str) {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
s = xmlhttp.responseText;
if(s==”1″)
{
document.getElementById(“txtHint”).innerHTML = “<FONT color=#FF0000>该学号已经存在</FONT>”;
document.getElementById(“image”).src = “images/error.bmp”;
}
else
{
document.getElementById(“txtHint”).innerHTML = “<FONT color=#00FF00>该学号可以使用</FONT>”;
document.getElementById(“image”).src = “images/ok.bmp”;
}
}
}
xmlhttp.open(“GET”, “result.asp?q=” + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action=””>
number: <input type=”text” name=”number” onblur=”showHint(this.value)”><img id=”image” src=”images/common.bmp”/><span id=”txtHint”></span><br>
name: <input type=”text” name=”name”><br>
<input type=”submit” value=”Register”>
</form>
<br />

</body>
</html>

result.asp文件为：

<%
response.charset=”GB2312″
response.expires=-1
sql=”SELECT count(*) FROM stu WHERE number=”
sql=sql & “‘” & request.querystring(“q”) & “‘”

set conn=Server.CreateObject(“ADODB.Connection”)
DBPath = Server.MapPath(“student.mdb”)
conn.Open “provider=microsoft.jet.oledb.4.0;data source=”&dbpath

set rs=Server.CreateObject(“ADODB.recordset”)
rs.Open sql,conn

countNum=rs.fields(0)
response.write(countNum)
%>

完整文件包（数据库、图片、网页）：下载

说明：为了正确访问数据库，需要在IIS7下选择“应用程序池”，右击对应站点的应用程序池，“启用32位应用程序”设置为“True”即可。

3）利用数据库，完成对下拉列表框的选择进行响应并呈现对应的学生信息（数据库同示例2）

index.html文件为：

<html>
<head>
<meta charset=”utf-8″>
<script type=”text/javascript”>
function showCustomer(str) {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById(“txtHint”).innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open(“GET”, “result.asp?q=” + str, true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action=”” style=”margin-top:15px;”>
<label>请选择一位客户：
<select name=”customers” onchange=”showCustomer(this.value)” style=”font-family:Verdana, Arial, Helvetica, sans-serif;”>
<option value=”000001″>000001</option>
<option value=”000002″>000002</option>
<option value=”000003″>000003</option>
<option value=”000004″>000004</option>
<option value=”000005″>000005</option>
<option value=”000006″>000006</option>
</select>
</label>
</form>
<br />
<div id=”txtHint”>客户信息将在此处列出 …</div>

</body>
</html>

result.asp文件为：

<%
response.charset=”GB2312″
response.expires=-1
sql=”SELECT * FROM stu WHERE number=”
sql=sql & “‘” & request.querystring(“q”) & “‘”

set conn=Server.CreateObject(“ADODB.Connection”)
DBPath = Server.MapPath(“student.mdb”)
conn.Open “provider=microsoft.jet.oledb.4.0;data source=”&dbpath

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>”)
%>

4）在用户输入信息时实现智能动态提示

index.html文件为：

</body>
</html>

result.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

‘如果未找到提示，则输出 “no suggestion”
‘否则输出正确的值
if hint=”” then
response.write(“no suggestion”)
else
response.write(hint)
end if
%>

李树青

关于AJAX几个入门练习

发表评论取消回复

发表评论 取消回复

发表评论取消回复