Silakan tunggu sedang proses
Sabtu Legi 13 Juli 2024 00:09
learn make rich
share make it perfect
Ayat Suci
Maka sesungguhnya untuk orang-orang zalim ada bahagian (siksa) seperti bahagian teman-teman mereka (dahulu); maka janganlah mereka meminta kepada-Ku menyegerakannya.
(QS. ADZ-DZAARIYAAT:59)

 otomatis refresh

Javascript ayat
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 1

Aryo Sanjaya
AJAX sebagai metode baru dalam interaksi web dengan penggunanya

Aryo Sanjaya
Selasa Pon, 7 Maret 2006

Istilah AJAX digunakan pada website yang berinteraksi dengan server melalui javascript secara asinkron (background), sehingga pengguna tidak perlu untuk meload keseluruhan halaman. Hal ini menyebabkan pengiritan waktu dan bandwidth, juga menghasilkan website yang makin interaktif. Seperti kebanyakan artikel pada umumnya, website yang dijadikan contoh AJAX sejati adalah GMail. Bagi yang pernah menggunakan GMail, tentu merasakan kehandalan interface webmailnya dengan AJAX.

Untuk mengaplikasikan AJAX (Asyncronous Javascript And XML) dalam website, yang dibutuhkan adalah browser dengan kemampuan Javascript, dan komponen XMLHTTP bagi pengguna IE, dan XMLHttpRequest untuk Firefox dan browser lainnya. Syarat-syarat tersebut hampir pasti sudah terpenuhi, mengingat pengguna internet kita banyak yang menggunakan IE dan Firefox :)

Sebenarnya tidak ada hal baru dalam AJAX, karena yang digunakan adalah teknologi javascript, yang notabene sudah lama digunakan. Karena itu, bagi yang sudah terbiasa dengan javascript, akan mudah sekali mempelajari AJAX.

Pembahasan ini tidak menekankan pada salah satu teknologi (Javascript, AJAX, HTML, PHP),  tapi keseluruhan dari hal tersebut. Hal ini karena penggunaan AJAX tidak hanya pada sisi klien (browser), tapi juga melibatkan respon dari server.

Sebagai acuan, berikut ini adalah salah satu kerangka dasar AJAX, yang katanya bikinan Mr Rasmus Redlorf, the creator of PHP.
Simpan dengan namafile: ajaxify.js

Kode di atas adalah AJAX yang sangat dasar, yang jika ingin dikembangkan, masih butuh untuk dimodifikasi lagi.

Untuk melaksanakan proses request, dibutuhkan obyek XMLHttpRequest. Pada kode di atas, hal tersebut dilakukan pada fungsi createRequestObject(), yang hasilnya disimpan dalam obyek http.
Dalam fungsi tersebut, jika browser yang digunakan adalah IE, maka yang diciptakan adalah obyek Microsoft.XMLHTTP, dan XMLHttpRequest untuk browser lainnya.

Fungsi berikutnya, yaitu sndReq(), berfungsi sebagai pengirim request kepada server. Pada contoh di atas, request yang dilakukan adalah dengan method 'get', dan action/datanya diletakkan pada URL-nya.
Pada kasus sebenarnya, mungkin saja suatu saat nanti dibutuhkan pengiriman data melalui method 'post'. Untuk hal seperti ini, dibutuhkan teknik yang lebih jauh. Kali ini kita gunakan method 'get' dulu.

Pada fungsi sndReq() ditentukan bahwa yang akan menangani hasil request adalah fungsi handleResponse(), dan setelah melakukan pengiriman (send), tugas dari fungsi sndReq() telah berakhir.

Fungsi yang akan sangat sibuk dalam AJAX adalah fungsi handleRequest(), karena di sinilah segala respon dari server ditangani.

Dalam contoh ini, yang ditangani adalah ketika request telah komplit diterima (readyState == 4). Data yang diambil adalah responseText, yaitu seluruh teks hasil kembalian dari server. Jika ingin menangani kembalian data yang berupa XML, maka data yang diambil adalah responseXML.

Untuk kasus di atas, diharapkan response dari server berupa:

"status|Pesan"

Sehingga script akan langsung mengetahui status request, dan merubah isi div yang telah disediakan dengan teks respon dari server.

Pemanfaatan kode di atas, mengharuskan kita menyediakan script dengan nama rpc.php, dan halaman HTML dengan suatu div untuk menampilkan hasil respon.

Berikut ini contoh file rpc.php:

Ini adalah contoh halaman HTML yang memanfaatkan AJAX:

Untuk mengaplikasikan AJAX dalam situs anda, banyak hal yang harus dipikirkan, diantaranya adalah:

  • Kelebihan dan kekurangan yang didapatkan oleh pengguna anda
    Jangan sampe user anda kesulitan berhadapan dengan interface baru, meski secara teori, interface AJAX justru mempermudah.
  • Keterbatasan user
    Browser yang support AJAX memang sudah banyak, tapi bagaimana dengan user yang benar-benar tidak dapat menjalankan AJAX?
  • Handling yang banyak
    Ini adalah beban buat programmer, bagaimana menangani berbagai kemungkinan. Misalnya jika transfer tidak sukses, jika user membatalkan proses, jika browser tidak diaktifkan javascriptnya, dan lain sebagainya.

Demikian tutorial singkat ini. Memang masih belum lengkap, karena kita masih belum memanfaatkan teknologi XML, sebagaimana kepanjangan AJAX :)

Untuk proses interaksi menggunakan XML, akan dibahas pada pada artikel selanjutnya.

Komentar

neubi

Rabu Wage, 8 Maret 2006

kutunggu jandamu ,.. ehh salah... kurunggu article berikutnya...hehehe...

Deni WIbowo

Kamis Kliwon, 9 Maret 2006

Wah, thanks lagi mas Aryo. Ajax ini sebenarnya aku pengen mbuat dari dulu, tapi belum kesampaian. Sekarang tinggal mengembangkan karena udah ada contohnya. Once again, theng kiu perimat yo...

ferdhie

Selasa Kliwon, 14 Maret 2006

Oh, ta pikir sepak bola,

Aryo Sanjaya

Rabu Legi, 15 Maret 2006

Kebiasaan, ngisruh forum orang :p Ayo, kasih masukane, jangan sok jadi pengunjung yang baik :))

jaylangkung

Rabu Wage, 12 April 2006

di sini juga ada brow tentang ajaxhttp://www.sony-ak.com/articles/6/short_introduction_ajax.phpsmoga membantu juga (aku dewe males utek2 program ... Tulisan thok hare)

ferdhie

Kamis Pon, 15 Juni 2006

Oh, ta pikir sepak bola,

Aryo Sanjaya

Kamis Kliwon, 22 Juni 2006

Kebiasaan, ngisruh forum orang :p

Ayo, kasih masukane, jangan sok jadi pengunjung yang baik :))

hybrid

Kamis Kliwon, 22 Juni 2006

coba pake ajax yang ada pada yahoo api atau pake prototype 1.4 tapi aku lupa alamatnya. keren deh........

ferdhie

Selasa Kliwon, 27 Juni 2006

Oh, ta pikir sepak bola,

Deni WIbowo

Kamis Pahing, 29 Juni 2006

Wah, thanks lagi mas Aryo.
Ajax ini sebenarnya aku pengen mbuat dari dulu, tapi belum kesampaian.
Sekarang tinggal mengembangkan karena udah ada contohnya.
Once again, theng kiu perimat yo...


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: 12
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