Silakan tunggu sedang proses
Jum'at Kliwon 03 Juli 2020 02:17
learn make rich
share make it perfect
Ayat Suci
Hai orang-orang yang beriman, apabila kamu pergi (berperang) di jalan Allah, maka telitilah dan janganlah kamu mengatakan kepada orang yang mengucapkan" salam "kepadamu:" Kamu bukan seorang mukmin " (lalu kamu membunuhnya), dengan maksud mencari harta benda kehidupan di dunia, karena di sisi Allah ada harta yang banyak. Begitu jugalah keadaan kamu dahulu, lalu Allah menganugerahkan nikmat-Nya atas kamu, maka telitilah. Sesungguhnya Allah Maha Mengetahui apa yang kamu kerjakan.
(QS. AN NISAA':94)

 otomatis refresh

Javascript ayat
Para Rekan
Lain-lain
User online: 86
User login: 0
Statistik BengkelProgram.com
user/passwd: bpuser

AJAX, langkah 2

Penulis
Membahas respon berupa XML, Request Timeout, dan method Post

Aryo Sanjaya <h1>Coeg</h1>
Kamis Kliwon, 9 Maret 2006

Setelah dibahas dasar-dasar AJAX pada artikel sebelumnya (AJAX, langkah 1), 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

madecenik

Rabu Pahing, 19 Juli 2006

Wah.... coba ada yang pake ASP ya.... hiks.... tapi terima kasih... nanti saya coba convert ke ASP deh..

Aryo:

Sudah ada tuh yang bikin, Eko Heri. Silakan lihat di bagian artikel ASP yak.

Slash Mnemonic

Selasa Legi, 31 Oktober 2006

Hai-hai, kalo mo nampilin image activity saat loading ajax gimana yah? kasih tau dong caranya?

Aryo:

Sederhana. Bikin div yang nampilkan tulisan dan gambar loading, tapi style display:none (gak terlihat). Lalu setiap ada proses AJAX, style display:block (terlihat). Kalau sudah completed, disembunyikan lagi. Gitu aja. Silakan dicoba ;)

Jusi Marwan

Senin Kliwon, 12 Februari 2007

Mas Aryo, kasih kita juga dong bocoran-bocoran untuk menghandle tombol navigasi Back/Forward di browser. Itu kan salah satu komponen ajax yang penting juga. thanks

jvttleyxeh

Sabtu Pon, 26 Mei 2007

Hello! Good Site! Thanks you! iiyapfsemc

satya

Selasa Pon, 5 Februari 2008

Bagaimana cara mengatasi masalah timeout request, karena proses yang begitu lama. Biasanya sebuah aplikasi terdapat Modul Proses, misal "Tutup Periode Inventory/Ledger/.....", dimana untuk memproses sebuah record memerlukan proses yang rumit sehingga untuk 1 record diproses katakanlah 10 detik, sedangkan record yang diproses mencapai ratusan bahkan ribuan. Saya coba kirim ???.php sebagai server side (AJAX), ternyata tetap timeout. Apa ada trik-trik untuk mengatasi ini ? Terima kasih....! Salam


Mengisi Komentar





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

[code]
(kode program)
[/code]



Daftar Artikel PHP

» Constructors dan Destructors di PHP (70)
Rabu Pon, 30 April 2008

Constructors sebuah methode yg dijalakan ketika sebuah object dibuat dari sebuah class sedangkan Destructors adalah methode untuk menghapus object ketika script/program berakhir.

» GRABBING KURS BANK BCA (17)
Jum'at Pahing, 20 April 2007

TERINSPIRASI DARI GRABBING KURS BI BANG ARYO

» OOP Pada PHP (Part 1) (61)
Senin Pon, 18 September 2006

Pembahasan mengenai dasar pemrograman OOP pada PHP

(Rakhmad Maulidi)

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

Mengitung jarak waktu dan menampilkan sebagai Javascript

» Grabbing Kurs Dari BI (46)
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)



Halaman:    1  2  3  >  

Account Data
Anda belum login.






 

Login hanya diperlukan bagi kontributor untuk mengisi artikel/berita dan mengupload file/gambar
Status Y!M
Saya sedang Offline. Silakan gunakan menu Kontak atau tinggalkan pesan di Yahoo! Messenger pada Id: aryo_sanjaya
Artikel Rame
Aplikasi Handphone (675)
Senin Pon, 20 Februari 2006

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

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

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

Barcode Reader (163)
Sabtu Pahing, 20 Januari 2007

Bukutamu
» addin
Kamis Wage
30 Juli 2009

» shen
Senin Legi
27 Juli 2009

» iyha
Rabu Wage
15 Juli 2009

» wawan
Rabu Kliwon
1 Juli 2009

» fuad hasan
Minggu Kliwon
21 Juni 2009


Halaman Bukutamu
Daftar Fungsi
pasaran
Mencari nama hari dan nama pasaran
pdu2sms
Konversi dari PDU ke Teks SMS
bacarss
Membaca RSS dari beberapa situs
Jejak Halaman
© 2005-2020 BengkelProgram.com