Setelah dibahas dasar-dasar AJAX pada artikel sebelumnya, berikut ini akan dibahas cara mengembangkan teknik AJAX untuk berinteraksi dengan webserver memanfaatkan format XML.
Sesuai dengan namanya, obyek XMLHttpRequest memiliki kemampuan untuk memparsing dokumen XML, sehingga memungkinkan kita untuk menyimpan lebih banyak data dalam proses request/response AJAX, dibandingkan dengan teknik sebelumnya, yang hanya menggunakan satu string dengan delimiter '|' (pipe).
Format XML yang kita tentukan sebagai respon dari server untuk AJAX adalah sebagai berikut:
<xmlresponse> <status>status respon (OK/ERROR/dsb)</status> <action>variabel action, sebagai pengenal request</action> <data>data1</data> <data>data2</data> <data>data3</data> ... </xmlresponse>
Respon tersebut akan dikenali oleh AJAX, yang akan melakukan tindakan sesuai respon tersebut.
File-file yang dibutuhkan dalam artikel ini adalah:
Untuk menangani kemungkinan browser yang tidak mendukung javascript, atau tidak mendukung teknologi XMLHttpRequest, website harus menyediakan interaksi tanpa AJAX.
Hal ini dimungkinkan dengan cara menentukan link/request secara default ke script nonajax, dan melalui javascript link tersebut dibelokkan ke AJAX. Jika browser tersebut tersebut tidak mendukung javascript, maka setiap link/request otomatis akan menjalankan script nonajax.
Contoh:
<a href='nonajax.php?action=namaserver' onclick='return doRequest("get", "rpcxml.php?action=namaserver")'> Nama server</a><br/>
link pada href akan dijalankan, jika onclick tidak dieksekusi (karena browser tidak mendukung javascript), atau jika fungsi doRequest( ) mengembalikan nilai true, yaitu jika browser tidak mendukung XMLHttpRequest atau jika proses request AJAX sedang berlangsung.
Salah satu handler yang penting dalam AJAX adalah batasan waktu. Karena kemungkinan hasil request yang tidak selalu benar, maka jalannya script penting untuk dibatasi, hal ini agar user tidak bingung dengan request script yang lama.
Ketika script pertama kali melakukan request, script akan menentukan batas waktu selama 15 detik.
pewaktu = setTimeout("waktuHabis()", bataswaktu);
Jika proses request belum selesai dalam batas waktu tersebut, maka fungsi waktuHabis( ) akan dijalankan, yang berarti proses request dibatalkan.
Jika proses request selesai terlebih dahulu, maka dia harus segera menghentikan proses pewaktu ini, dengan fungsi clearTimeout( ):
clearTimeout(pewaktu);
Request terhadap server dapat dilakukan dalam 2 mode, yaitu get dan post. Penggunaan method ini disesuaikan dengan kebutuhan. Misalnya untuk submit form, maka method post lebih tepat digunakan. Sedangkan jika dibutuhkan sekedar request URL, maka method get yang sebaiknya digunakan.
Perbedaan mendasar kedua method ini adalah peletakan data request. Jika menggunakan method post, data yang dikirimkan bisa lebih banyak.
Jika menggunakan method get:
http.open('get', data); http.onreadystatechange = handleRequest; http.send(null);
dimana variabel data berisi url dan requestnya.
Untuk method post, langkah yang dilakukan lebih banyak:
var reqList = ''; for(i = 0; i < data.length; i++) { if (reqList.length) reqList += '&'; reqList += data.elements[i].name + '=' + encodeURI(data.elements[i].value); } http.open('post', formaction, true); http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); http.onreadystatechange = handleRequest; http.send(reqList);
Script harus merangkai sendiri semua entity dalam form, yang nantinya
dijadikan parameter dalam http.send( ).
Semua respon dari server ditangani oleh fungsi handleRequest( ), yang bertanggung jawab untuk menerjemahkan response server sesuai dengan request yang dikirimkan.
// ambil xml var response = http.responseXML; // baca tiap2 node var response_status = response.getElementsByTagName("status"); var response_action = response.getElementsByTagName("action"); var response_data = response.getElementsByTagName("data");
Tidak seperti teknik sebelumnya yang mengambil property responseText, kali ini yang diambil dari respon server adalah property responseXML, yang berupa object XML.
Masing-masing node penting diambil dan diletakkan dalam variabel, agar lebih mudah penanganannya.
Dari status dan jenis action yang diberikan oleh server, fungsi ini akan mengolah data yang diberikan sesuai actionnya. Dalam contoh yang diberikan, untuk respon yang diberikan jika hanya memiliki satu data, maka akan langsung ditulis pada div 'hasil'.
Untuk data yang lebih dari satu, maka masih perlu dilakukan looping terhadap data yang bersangkutan:
for(i = 0; i < response_data.length; i++) { var items = response_data[i].firstChild.data.split("|"); div.innerHTML += '<font color="#0000ff">' + items[0] + '</font> = ' + items[1] + '<br/>'; }
Keterangan lebih lanjut ada pada listing script masing-masing. Selamat mencoba.
Baru saja nemu link ini: http://javaboutique.internet.com/tutorials/ajaxhacks/ Mungkin ada yang minat? Buku, tapi ada sampli PDFnya. Lumayan lah. Atau bisa aja gak usah cari buku, nunggu kocoran ilmunya mas Aryo aja.... :P
Hahaha, bisa aja mas Deni nih. Aku juga kan ngambil dari buku, hehehe... Di PDF-nya cuman ada 5 bahasan. Hmm... ada yang punya lengkapnya?
wers
» Grabbing Kurs Dari BI (10)Mengitung jarak waktu dan menampilkan sebagai Javascript
» Autocomplete Pada Form (1)Grabbing data adalah tindakan tidak sopan. Tapi kali ini yang dibahas adalah teknik grabbing, masalah moral dan etika silakan cari sendiri (inspired by Iwan Fals)
» Merubah Isi Combobox (1)Contoh script berikut ini menampilkan cara mengisi value field suatu form, tanpa harus melakukan submit data
» Membuat Tampilan Perhalaman (11)Pada artikel ini dibahas bagaimana cara merubah isi suatu combobox, sesuai dengan isi combobox lain yang dipilih oleh user
Masih banyak yang menanyakan cara untuk menampilkan data perhalaman