ASP - AJAX with ASP

Ang AJAX ay ginagamit upang gumawa ng mas masiglang application.

AJAX ASP na Halimbawa

Ang sumusunod na halimbawa ay magpapakita kung paano magkakaroon ng komunikasyon ang web page sa server kapag ang gumagamit ay nag-type ng character sa input na text:

Halimbawa

Mangyaring mag-type ng mga alpabetong (A - Z) sa ibabang input na text:

Pangalan:

Mga Payo:

Subukan nang sarili ang source code

Halimbawa ng Pagpaliwanag - HTML na Pahina

Kapag ang gumagamit ay nag-type ng mga character sa itaas na input na text, ang "showHint()" na function ay magsasagawa. Ang function na ito ay binubuksan ng "onkeyup" na event:

<!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// Mag-encode ng IE7+, Firefox, Chrome, Opera, Safari na code
  xmlhttp=new XMLHttpRequest();
  }
else
  {// Mag-encode ng IE6, IE5 na code
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<p><b>Magpasok ng mga Ingles na character sa input box:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)" size="20">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Paliwanag ng Source Code:

Kung ang input box ay walang laman (str.length==0), ang function ay maglilinis ng nilalaman ng placeholder txtHint at papalabas sa function.

Kung ang input box ay walang laman, ang showHint() ay gagawa ng mga sumusunod na hakbang:

  • Lumikha ng XMLHttpRequest object
  • Lumikha ng function na tatapos na ang sagot ng server ay handa
  • Magpadala ng kahilingan sa file sa server
  • Paging ayon sa parametro (q) na idinagdag sa katapusan ng URL (nakapaloob sa nilalaman ng input box)

ASP na file

Ang pangungusap na pahina sa JavaScript na ginamit ay ang ASP na file na pinangalanan na "gethint.asp".

"gethint.asp" ang pinagmumulan ng source code ay magtitingnan ang array ng pangalan, pagkatapos ay ibabalik sa browser ang katugmaang pangalan:

<%
response.expires=-1
dim a(30)
'Punan ang array ng pangalan
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"
'Makakuha mula sa URL ang parameter na q
q=ucase(request.querystring("q"))
'Kung habang haba ng q>0, hanapin ang lahat ng mungkahi mula sa array
kung len(q)>0 then
  hint=""
  for i=1 to 30
    kung q=ucase(mid(a(i),1,len(q))) then
      kung hint="" paano
        hint=a(i)
      else
        hint=hint & " , " & a(i)
      end if
    end if
  next
end if
'Kung walang natagpuang mungkahi, ibahagi ang "walang mungkahi"
'o ibahagi ang tamang mga halaga
kung hint="" paano
  response.write("walang mungkahi")
else
  response.write(hint)
end if
%>

Paliwanag ng Source Code:

Kung nagpadala ang JavaScript ng anumang teksto (gaya na strlen($q) ay mas malaki sa 0), magaganap ang:

  • Find matching names from the characters received from JavaScript
  • If no match is found, set the response string to "no suggestion"
  • If one or more matching names are found, set the response string with all names
  • Send the response to the placeholder "txtHint"