DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX源碼應用示例1
AJAX源碼應用示例1
編輯:AJAX詳解     

下面為源碼:

第一個文件: index.Html

<Html>
<head>
<title>阿裡西西-AJax-應用示例1</title>
<script src="clIEnthint.JS"></script>
</head>
<body>
<form>
請輸入全稱的頭一個英文字母:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
</form>
<p>建議輸入: <span id="txtHint"></span></p>
</body>
</Html>

第二個文件: gethint.ASP

<%
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"

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("no suggestion")
else
  response.write(hint)
end if

%>

第三個文件:clIEnthint.JS

var XMLHttp

function showHint(str)
{
if (str.length > 0)
{
var url="gethint.ASP?sid=" + Math.random() + "&q=" + str
xmlHttp=GetXMLHttpObject(stateChanged)
XMLHttp.open("GET", url , true)
XMLHttp.send(null)
}
else
{
document.getElementById("txtHint").innerHtml=""

}
}

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
}
}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved