Contoh AJAX ASP/PHP
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:
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 %>