AJAX ASP 实例

Ang AJAX ay ginagamit para lumikha ng mas masasamang aplikasyon.

AJAX ASP 实例

Nasa ibaba ang halimbawa: Kapag may nagsulat ang user sa input field, paano magkakaroon ng komunikasyon ang web page sa web server:

Mga Halimbawa

Mag-sulat ng mga titik A-Z sa ibabang input field:

Pangalan:

Mga Mungkahi ng Pagsasaliksik:

Paliwanag ng Halimbawa

Sa pagkakakitaan, kapag may nagsulat ang user sa input field, isasagawa ang function na may pangalang "showHint()".

Ang function na ito ay inilulusya ng pangyayari na onkeyup.

Nasa ibaba ang kodigo ng HTML:

Mga Halimbawa

<html>
<head>
<script>
function showHint(str) {
    kung (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            kung (this.readyState == 4 at this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.asp?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Maglagay ng titik A-Z sa ibabang input field:</b></p>
<form> 
Pangalan:<input type="text" onkeyup="showHint(this.value)">
</form>
<p>Mga mungkahi ng paghahanap:<span id="txtHint"></span></p>
</body>
</html>

Subukan nang personal

Kundisyon ng code:

Una, suriin kung ang input field ay walang laman (str.length == 0）；Kung mayroon, bawasan ang nilalaman ng txtHint placeholder at lumisan sa function.

Gayunman, kung ang input field ay walang laman, gawin ang sumusunod:

  • Lumikha ng XMLHttpRequest object
  • Lumikha ng function na magiging epektibo kapag handa ang sagot ng server
  • Magpadala ng kahilingan sa ASP file (gethint.asp) na nasa server
  • Pansin na magdagdag sa q parameter ng gethint.asp
  • Ang str variable ay nangangalaga ng nilalaman ng input field

ASP file - "gethint.asp"

Ang ASP na file na ito ay sumusuri sa array ng pangalan, pagkatapos ay ibabalik sa browser ang katugmaang pangalan:

<%
 response.expires=-1
 dim a(32)
 Puny sa pangalan na ilalagay sa array
 a(1)="Ava"
 a(2)="Brielle"
 a(3)="Caroline"
 a(4)="Diana"
 a(5)="Elise"
 a(6)="Fiona"
 a(7)="Grace"
 a(8)="Hannah"
 a(9)="Ileana"
 a(10)="Jane"
 a(11)="Kathryn"
 a(12)="Laura"
 a(13)="Millie"
 a(14)="Nancy"
 a(15)="Opal"
 a(16)="Petty"
 a(17)="Queenie"
 a(18)="Rose"
 a(19)="Shirley"
 a(20)="Tiffany"
 a(21)="Ursula"
 a(22)="Victoria"
 a(23)="Wendy"
 a(24)="Xenia"
 a(25)="Yvette"
 a(26)="Zoe"
 a(27)="Angell"
 a(28)="Adele"
 a(29)="Beatty"
 a(30)="Carlton"
 a(31)="Elisabeth"
 a(32)="Violet"
 从 URL 获取 q 参数
 q=ucase(request.querystring("q"))
 查看数组中所有 hint，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
 如果未找到 hint，输出 "no suggestion"，或输出正确的值
 if hint="" then
   response.write("no suggestion")
 else
   response.write(hint)
 end if
%>