AJAX digunakan untuk mencipta aplikasi yang lebih dinamik.

Contoh AJAX ASP/PHP

Contoh berikut akan menunjukkan kepada anda cara halaman web berkomunikasi dengan pelayan web apabila pengguna menaip aksara dalam kotak input: Sila taip huruf (A - Z) dalam kotak input di bawah: 

<html><!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

Contoh analisis - fungsi showHint()

Apabila pengguna menaip dalam kotak input di atas aksara , fungsi "showHint()" akan dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onkeyup": 

function showHint(str)
{
var xmlhttp;
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }
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","gethint.html?q="+str,true);
xmlhttp.send();
}

Analisis kod sumber:

Jika kotak input kosong (str.length ==0 ), fungsi mengosongkan kandungan pemegang tempat txtHint dan keluar dari fungsi.

Jika kotak input tidak kosong, fungsi showHint() melaksanakan tugas berikut:

  • Mencipta objek XMLHttpRequest

  • Apabila pelayan Laksanakan fungsi apabila respons sedia

  • Hantar permintaan ke fail pada pelayan

  • Perhatikan bahawa kami telah menambah parameter q ke URL (dengan Kandungan kotak input)

Halaman Pelayan AJAX - ASP dan PHP

Halaman pelayan yang dipanggil oleh JavaScript di atas ialah fail ASP bernama "gethint. asp".

Di bawah, kami mencipta dua versi fail pelayan, satu ditulis dalam ASP dan satu lagi dalam PHP.

Kod sumber dalam fail ASP

"gethint.asp" menyemak tatasusunan nama dan mengembalikan nama yang sepadan kepada penyemak imbas:

rreee

Fail PHP

Kod berikut ditulis dalam PHP dan mempunyai fungsi yang sama seperti kod ASP di atas. 

<%
response.expires=-1
dim a(30)
'Fill up array with names
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"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of 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
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then

   
  response.write("no suggestion")
else

   
  response.write(hint)
end if
%>