AJAX, langkah 2

Membahas respon berupa XML, Request Timeout, dan method Post

Kamis Kliwon, 9 Maret 2006

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 dalam artikel

File-file yang dibutuhkan dalam artikel ini adalah:

• Fungsi-fungsi AJAX diletakkan dalam file ajax.js
• Script PHP sebagai handler AJAX adalah rpcxml.php
• Script PHP yang menangani request untuk browser non AJAX adalah nonajax.php
• Contoh script HTML untuk melakukan request, testajax2.html

Handler non AJAX

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.

Timeout Handler

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); 

Method Get dan Post

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( ).
 

Response handler

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.

Daftar Komentar

Deni Wibowo

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

Aryo Sanjaya

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? :D

ewsr

wers