ASP AJAX
AJAX adalah tentang memperbarui bagian dari halaman web, tanpa memuat ulang seluruh halaman.
Apa itu AJAX?
AJAX = JavaScript dan XML asinkron.
AJAX adalah teknik untuk membuat halaman web yang cepat dan dinamis.
AJAX memungkinkan halaman web diperbarui secara asinkron dengan menukar sejumlah kecil data dengan server di belakang layar. Ini berarti dimungkinkan untuk memperbarui bagian halaman web, tanpa memuat ulang seluruh halaman.
Halaman web klasik, (yang tidak menggunakan AJAX) harus memuat ulang seluruh halaman jika konten harus diubah.
Contoh aplikasi yang menggunakan AJAX: Google Maps, Gmail, Youtube, dan tab Facebook.
Bagaimana AJAX Bekerja
AJAX Berdasarkan Standar Internet
AJAX didasarkan pada standar internet, dan menggunakan kombinasi dari:
- Objek XMLHttpRequest (untuk bertukar data secara asinkron dengan server)
- JavaScript/DOM (untuk menampilkan/berinteraksi dengan informasi)
- CSS (untuk menata data)
- XML (sering digunakan sebagai format untuk mentransfer data)
Aplikasi AJAX tidak bergantung pada browser dan platform!
Saran Google
AJAX dipopulerkan pada tahun 2005 oleh Google, dengan Google Suggest.
Google Suggest menggunakan AJAX untuk membuat antarmuka web yang sangat dinamis: Saat Anda mulai mengetik di kotak pencarian Google, JavaScript mengirimkan surat ke server dan server mengembalikan daftar saran.
Mulai Gunakan AJAX Hari Ini
Dalam tutorial ASP kami, kami akan menunjukkan bagaimana AJAX dapat memperbarui bagian dari halaman web, tanpa memuat ulang seluruh halaman. Skrip server akan ditulis dalam ASP.
Jika Anda ingin mempelajari lebih lanjut tentang AJAX, kunjungi tutorial AJAX kami .
Contoh AJAX ASP
Contoh berikut akan menunjukkan bagaimana halaman web dapat berkomunikasi dengan server web saat pengguna mengetik karakter di bidang input:
Contoh
Start typing a name in the input field below:
Suggestions:
Contoh Dijelaskan
Dalam contoh di atas, ketika pengguna mengetik karakter di bidang input, fungsi yang disebut "showHint()" dijalankan.
Fungsi ini dipicu oleh acara onkeyup.
Berikut kode HTMLnya:
Contoh
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new
XMLHttpRequest();
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 &&
this.status == 200) {
document.getElementById("txtHint").innerHTML =
this.responseText;
}
};
xmlhttp.open("GET", "gethint.asp?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>Start typing a name in the
input field below:</b></p>
<form>
First name: <input type="text"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
Penjelasan kode:
Pertama, periksa apakah kolom input kosong (str.length == 0). Jika ya, hapus konten placeholder txtHint dan keluar dari fungsinya.
Namun, jika bidang input tidak kosong, lakukan hal berikut:
- Buat objek XMLHttpRequest
- Buat fungsi yang akan dieksekusi ketika respons server sudah siap
- Kirim permintaan ke file ASP (gethint.asp) di server
- Perhatikan bahwa parameter q ditambahkan gethint.asp?q="+str
- Variabel str menyimpan konten bidang input
File ASP - "gethint.asp"
File ASP memeriksa array nama, dan mengembalikan nama yang sesuai ke browser:
<%
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
%>
AJAX dapat digunakan untuk komunikasi interaktif dengan database.
Contoh Basis Data AJAX
Contoh berikut akan menunjukkan bagaimana halaman web dapat mengambil informasi dari database dengan AJAX:
Contoh
Contoh Dijelaskan - Halaman HTML
Saat pengguna memilih pelanggan di daftar dropdown di atas, fungsi yang disebut "showCustomer()" dijalankan. Fungsi dipicu oleh peristiwa "onchange":
<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
{
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 (this.readyState==4 && this.status==200)
{
document.getElementById("txtHint").innerHTML=this.responseText;
}
}
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>
Penjelasan kode sumber:
Jika tidak ada pelanggan yang dipilih (str.length==0), fungsi akan menghapus konten placeholder txtHint dan keluar dari fungsi.
Jika pelanggan dipilih, fungsi showCustomer() menjalankan yang berikut:
- Buat objek XMLHttpRequest
- Buat fungsi yang akan dieksekusi ketika respons server sudah siap
- Kirim permintaan ke file di server
- Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan konten daftar dropdown)
File ASP
Halaman di server yang dipanggil oleh JavaScript di atas adalah file ASP yang disebut "getcustomer.asp".
Kode sumber di "getcustomer.asp" menjalankan kueri terhadap database, dan mengembalikan hasilnya dalam tabel HTML:
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/datafolder/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>