Silakan tunggu sedang proses
Sabtu Kliwon 09 November 2024 02:19
learn make rich
share make it perfect
Ayat Suci
Di kala datang hari itu, tidak ada seorangpun yang berbicara, melainkan dengan izin-Nya; maka di antara mereka ada yang celaka dan ada yang berbahagia.
(QS. HUD:105)
Daftar Fungsi
pasaran
Mencari nama hari dan nama pasaran
pdu2sms
Konversi dari PDU ke Teks SMS
bacarss
Membaca RSS dari beberapa situs
Para Rekan
MyWeblog

AJAX, langkah 2

Aryo Sanjaya
Membahas respon berupa XML, Request Timeout, dan method Post

Aryo Sanjaya
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.

Komentar

Deni Wibowo

Sabtu Pahing, 15 April 2006

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

Rabu Legi, 19 April 2006

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

Minggu Kliwon, 2 Juli 2006

wers


Mengisi Komentar





untuk kode program, apit dengan tanda [code][/code].
contoh:

[code]
(kode program)
[/code]



Daftar Artikel PHP

» Menghitung Jarak Waktu (4)
Rabu Wage, 17 Mei 2006

Mengitung jarak waktu dan menampilkan sebagai Javascript

» Grabbing Kurs Dari BI (10)
Rabu Pahing, 5 April 2006

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)

» Autocomplete Pada Form (1)
Rabu Pahing, 5 April 2006

Contoh script berikut ini menampilkan cara mengisi value field suatu form, tanpa harus melakukan submit data

» Merubah Isi Combobox (1)
Selasa Legi, 4 April 2006

Pada artikel ini dibahas bagaimana cara merubah isi suatu combobox, sesuai dengan isi combobox lain yang dipilih oleh user

» Membuat Tampilan Perhalaman (11)
Jum'at Pon, 17 Maret 2006

Masih banyak yang menanyakan cara untuk menampilkan data perhalaman



Halaman:    1  2  3  >  

Artikel Rame
Aplikasi Handphone (250)
Senin Pon, 20 Februari 2006

Mengirim SMS dari PC (208)
Senin Wage, 28 November 2005

Membaca SMS dari PC (162)
Selasa Pahing, 14 Juni 2005

Source SMS Autorespond (66)
Senin Legi, 24 April 2006

Penyembunyian Password di Database (36)
Kamis Kliwon, 2 Juni 2005

Bukutamu
» Imam Izzatir Rizzan
Jum'at Kliwon
7 Juli 2006

» adindri
Selasa Pahing
4 Juli 2006

» Je Malakian
Selasa Pahing
4 Juli 2006

» A.Azis
Jum'at Pon
30 Juni 2006

» zorro
Kamis Pahing
29 Juni 2006


Halaman Bukutamu
Lain-lain
User online: 47
User login: 0

user/passwd: bpuser

Status Y!M
Saya sedang Offline. Silakan gunakan menu Kontak atau tinggalkan pesan di Yahoo! Messenger pada Id: aryo_sanjaya
© 2005-2024 BengkelProgram.com