AJAX telah menjadi trend baru dunia web development sejak GOOGLE me release aplikasi GMAIL yang menggunakan AJAX. AJAX memungkinkan aplikasi web base client-server tanpa harus melakukan full roundtrip (refreshing/reloading) halaman web (eg: submit form memposting data ke server-side script). Dengan tehnik tradisional data yang diposting ke server, diproses dan kemudian di kirimkan kembali ke browser harus melalui reloading halaman web penuh.
AJAX memungkinkan posting data ke server tanpa harus meloading page secara penuh, sehingga proses menjadi lebih cepat karena tidak perlu meload element-element halaman web yang tidak perlu diproses. Data yng dikirimkan ke server di proses kemudian diresponse balik, kemudian nilai itu di catch oleh javascript dan javascript melakukan proses di browser client sesuai dengan nilai response yang dikirimkan oleh server tersebut.
Berikut ini adalah contoh sederhana HTML + ASP menggunakan AJAX, HTML form mengirimkan nilai element form ke server melalui javascript, server memproses nilai tersebut(ASP script), kemudian mengirimkan response kembali ke browser, Javascript mengambil nilai response tersebut kemudian menuliskan text response tersebut di dalam element HTML “span”.
AJAX hanya bisa berjalan baik pada browser yang mendukung HTTP REQUEST.
AJAX Javascript
var oAjax = false;
function doPost(url, postVar) {
oAjax = false;
/* Check Browser */
// Mozilla, Safari,…
if (window.XMLHttpRequest) {
oAjax = new XMLHttpRequest();
if (oAjax.overrideMimeType) {
oAjax.overrideMimeType(‘text/html’);
}
// INternet Explorer
} else if (window.ActiveXObject) {
try {
// IE Baru
oAjax = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
// IE Lama
oAjax = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
// Browser Tidak Support HTTP Request
if (!oAjax) {
alert(‘Browser anda tidak mendukung HTTP Request’);
return false;
}
oAjax.onreadystatechange = doResponse;
oAjax.open(‘POST’, url, true);
oAjax.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
oAjax.setRequestHeader(“Content-length”, postVar.length);
oAjax.setRequestHeader(“Connection”, “close”);
oAjax.send(postVar);
}
function doResponse() {
if (oAjax.readyState == 4) {
if (oAjax.status == 200) {
document.getElementById(‘oResponse’).innerHTML = oAjax.responseText;
} else {
alert(‘Proses gagal.’);
}
}
}
function doGetValue(obj) {
var poststr = “Var1=” + encodeURI( document.getElementById(“Var1″).value ) +
“&Var2=” + encodeURI( document.getElementById(“Var2″).value );
doPost(‘post.asp’, poststr);
}
</script>
HTML FORM
<input name=“Var1″ id=“Var1″ value=“Testing” type=“text”><br />
<select name=“Var2″ id=“Var2″>
<option value=“satu”>satu</option>
<option value=“dua”>dua</option>
<option value=“tiga”>tiga</option>
<option value=“empat”>empat</option>
</select>
<br>
<input type=“Submit” name=“button” value=“Submit”>
</form>
<br><br>
Response Text:<br>
<hr>
<span name=“oResponse” id=“oResponse”></span>
<hr>
Server Side Script (ASP)
for each result in request.Form()
Response.Write(result&“=”&request.Form(result)&“<br />”)
next
%>
inspired from captain.at
Topik-Topik Yang Berhubungan
Sungguh menarik artikel yang Anda sajikan di sini. Kebetulan saya sedang melakukan research mengenai AJAX ini.
Bagaimana jika saya ingin melakukan upload file (misalkan image) dengan AJAX ini? Apa ada contoh script AJAX untuk ASP untuk menangani upload file?
setahu saya uploading file menggunakan ajax tidak bisa, kecuali anda menggunakan iFrame + Ajax
Ajax FIle Upload silakan coba tutorial tersebut, untuk ASP Upload script-nya tergantung komponen upload apa yang anda gunakan, atau bisa juga menggunakan ADODB Stream
wah gak bisa yah upload file pake ajax… huuuuuuu lemes
setau saya sih ngga bisa tapi banyak developer mengakalinya dengan menggunakan IFRAME
bisa bisa bisa
hihihi…
tapi kalo upload image ( via blob database ) tetep bisa kan?? thx
yup bisa, karna tidak memindahkan fisik file tetapi byte mentahnya
Mas aril
Form bertype multipart/form-data, asp tidak bisa menerimanya dengan request.form, saya menggunakan kode script loader.asp (Faisal Khan - www.stardeveloper.com), ada yang pernah pake ga? simple script buat request form binary data.
bagaimana ya saya melakukan
for each result in request.Form
untuk tugas yang sama bila saya terimanya dari multipart/form-data? atau jika tidak dengan loader.asp nya faisal, itu gimana?
terus bisa g ya asp terima input array, contoh kalo saya menggunakan php saya bisa buat
biasanya saya gunakan untuk multiple upload,
ini bisa diterima oleh php, gimana ya kalo asp?
Thanks reply nya.
maksud saya seperti ini inputan arraynya. (hoho di post sebelumnya ilang)
Coba pakai jQuery, write less do more