初始AJAX简单实例
上一篇 /
下一篇 2007-01-09 13:58:05
/ 个人分类：IT技术
使用技术Javascrīpt/AJAX/ASP
需要平台:IIS/IE or FireFox客户端
例子：在文本框中输入E文时会给出匹配E文提示
ajax.html 执行ajax页面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX TEST</title>
</head>
<body>
<scrīpt language="javascrīpt"> <!--
var xmlHttp; function showHint(){ //set execute ajax object var str = document.getElementById('txt1').value; if (str.length > 0) { var url = "ajax_do.asp?q=" + str; document.getElementById("txtInner").innerHTML = 'Now Loading...'; xmlHttp = GetXmlHttpObject(stateChanged); //send ajax request xmlHttp.open("GET", url , true); xmlHttp.send(null); }else{ document.getElementById("txtInner").innerHTML = ""; } } function stateChanged(){ //if ajax object active done Output data if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){ document.getElementById("txtInner").innerHTML = xmlHttp.responseText; } } function GetXmlHttpObject(handler){ //create Ajax object function var ōbjXmlHttp = null; if (navigator.userAgent.indexOf("Opera") >= 0){ alert("This example doesnt 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{ ōbjXmlHttp = new ActiveXObject(strName); objXmlHttp.onreadystatechange = handler; return objXmlHttp; }catch(e){ alert("Error. scrīpting for ActiveX might be disabled"); return; } } if (navigator.userAgent.indexOf("Mozilla") >= 0){ ōbjXmlHttp = new XMLHttpRequest(); objXmlHttp.onload = handler; objXmlHttp.onerror = handler; return objXmlHttp; } } -->
</scrīpt> <form id="Fm">
First Name:<input type="text" id="txt1" ōnkeyup="showHint();">
</form>
<p>Suggestions: <span id="txtInner"></span></p>
</body>
</html>
ajax_do.asp 处理发送的请求页面
<%@LANGUAGE="VBscrīpt" CODEPAGE="65001"%>
<%
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)="Wells"
a(30)="Vicky"
q=request.querystring("q")
if len(q)>0 then
hint=""
for i=1 to 30
x1=ucase(mid(q,1,len(q)))
x2=ucase(mid(a(i),1,len(q)))
if x1=x2 then
if hint="" then
hint=a(i)
else
hint=hint & " , " & a(i)
end if
end if
next
end if
if hint="" then
response.write("<font color=#FF0000>no suggestion</font>")
else
response.write(hint)
end if
%>
设置好路径后用浏览器访问ajax.html在文本框中输入E文....
还可以下一个
prototype.js包里面封装了ajax的功能，我们可以很方便使用它来简化代码
将
prototype.js包含进ajax.html后原先的脚本代码全改成如下
<scrīpt language="javascrīpt">
<!--
function showHint(){
var param=$('txt1').value;
if (param.length > 0){
$('txtInner').innerHTML='On Loading...';
new Ajax.Updater("txtInner", 'ajax_do2.asp',{method:'get',parameters:'q='+param});
}else{
$('txtInner').innerHTML='';
}
}
-->
</scrīpt>
导入论坛
收藏
分享给好友
推荐到圈子
管理
举报
TAG:
IT技术
