pada suatu saat saya sedang mengotak2 atik database saya,eh terus saya menemukan sebuah kata yang bikin saya penasaran,kata itu adalah AJAX <kaya nama tim sepak bola aja>.. nah langsung aja saya cari artikelnya sm paman google..nah karena saya orang nya pelupa,langsung saja saya copy trus paste di sini... semoga bermanfaat bagi anda...
Sebelum membahas lebih jauh tentang AJAX. Apa sih sebenarnya AJAX?
AJAX bukanlah barang baru dan bukan teknologi baru. AJAX merupakan
paduan dari beberapa teknologi yang sudah dikenal sebalumnya yaitu
HTML, DOM, XML, Javascript dan teknologi pendukung lainnya. AJAX adalah
akronim dari Asynchronous JavaScript and XML, komponen-komponen AJAX meliputi: - HTML (HyperText Markup Language) digunakan dalam membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam browser. HTML merupakan standar internasional dengan spesifikasi yang ditetapkan oleh World Wide Web Consortium (W3C). Versi terakhir saat tulisan ini dibuat adalah HTML 4.01.
- XHTML (Extensible HyperText Markup Language), adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. Versi terakhir saat tulisan ini dibuat adalah XHTML 2.0.
- CSS (Cascading Style Sheets ) adalah sebuah mekanisme sederhana untuk memberikan style (seperti
font, warna, jarak spasi, dll) kepada dokumen web yang ditulis dalam
HTML atau XML (termasuk beberapa variasi bahasa XML seperti XHTML dan
SVG).
- JavaScript adalah bahasa scripting kecil,
ringan, berorientasi-objek dan lintas platform. JavaScript tidak dapat
berjalan dengan baik sebagai bahasa mandiri, melainkan dirancang untuk
ditanamkan pada produk dan aplikasi lain seperti peramban web.
- DOM (Document Object Model) adalah sebuah API (Application Program Interface)
untuk dokumen HTML dan XML. DOM menyediakan representasi dokumen secara
terstruktur, dimungkinkan untuk merubah isi dan presentasi visual.
Pada dasarnya, DOM menghubungkan halaman web dengan script atau bahasa
pemprograman.
- XML (Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan khusus. Keperluan utama XML adalah untuk pertukaran data antar sistem yang beraneka ragam.
- XSLT (Extensible Stylesheet Language Transformations )
adalah sebuah bahasa berbasis-XML untuk transformasi dokumen XML.
Walaupun proses merujuk pada transformasi, dokumen asli tidak berubah
melainkan dokumen XML baru dibuat dengan basis isi dokumen yang sudah
ada. XSLT biasanya digunakan untuk merubah skema XML ke halaman web
atau dokumen PDF.
- Objek XMLHttpRequest untuk
melakukan pertukaran data secara asinkron dengan peladen (server) web.
Beberapa kerangka-kerja Ahax dan dalam beberapa situasi, objek IFrame
digunakan selain objek XMLHttpRequest untuk melakukan pertukaran data
dengan peladen web.
- JSON (JavaScript Object Notation)
yaitu format pertukaran data komputer yang ringan dan mudah. Keuntungan
JSON dibandingkan dengan XML adalah pada proses penterjemahan data
menggunakan Javascript. Javascript dapat menterjemahkan JSON
menggunakan built-in procedure eval().
Dalam
penerapannya, tidak semua teknologi di atas digunakan. Terdapat
beberapa teknik komunikasi yang digunakan untuk implementasi AJAX.
Teknik yang umum digunakan adalah dengan menggunakan: - Hidden Frame
Metode
ini memanfaatkan frame yang tersembunyi. Biasanya salah satu frame
diset dengan ukuran tinggi/lebar 0 sehingga tidak terlihat di halaman.
Frame tersembunyi inilah yang sebenarnya melakukan request ke dan
menerima respon dari server, sehingga frame yang tampil kelihatan tidak
melakukan postback ke server. Javascript digunakan untuk mengambil data
dan mengisi data yang ada di frame tersembunyi ini. - Hidden IFrame
Metode ini hampir sama dengan hidden frame, perbedaannya hanya pada elemen yang digunakan yaitu IFrame, bukan Frame. - Objek XMLHttpRequest
Metode
yang satu ini memanfaatkan ActiveX Objek (IE) atau objek javascript
XMLHttpRequest (Mozilla/Firefox, Safari, Opera). Objek ini yang akan
melakukan postback ke server dan menerima respon balik berupa data
(bukan halaman). Data yang didapat dari server kemudian diolah di klien
untuk ditampilkan ke halaman. Teknik pemprosesan halaman secara umum ada dua: - Pemprosesan halam dengan pembuatan/manipulasi objek dokumen menggunakan javascript.
Klien
mengirimkan data dalam format XML/JSON kepada server dan mendapatkan
data dari server berupa XML/JSON. Data XML/JSON kemudian diolah untuk
memanipulasi objek dokumen menggunakan DOM dan javascript. - Parsial rendering.
Pada
teknik ini UI dan behaviour tidak diproses di klien melainkan diproses
di server. Klien menerima UI dan behaviour kemudian melakukan rendering
pada bagian halaman tertentu. Perpaduan
teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web
dan lebih responsif terhadap aksi pengguna. Dengan AJAX pertukaran data
antara klien dan server lebih ringan karena hanya data yang
dipertukarkan (bukan halaman) sehingga aplikasi web dapat berjalan
lebih cepat. Penggunaan Dasar Dua keistimewaan Ajax adalah dapat: - Membuat permintaan kepada server tanpa memuat kembali (reload) halaman.
- Mengurai (parse) dan bekerja dengan dokumen XML dan atau JSON.
1. Membuat Permintaan HTTP (HTTP Request) Untuk membuat permintaan HTTP kepada server menggunakan JavaScript, diperlukan sebuah class
yang menyediakan fungsi-fungsi ini. Pada Internet Explorer tersedia
objek ActiveX yang disebut XMLHTTP. Pada Mozilla, Safari, Opera dan
beberapa peramban lain, menerapkan sebuah class Javascript objek XMLHttpRequest yang mendukung method dan properties objek Microsoft ActiveX. Untuk membuat instance (objek) class lintas-browser (cross-browser), dapat dilakukan dengan: if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest (); } else if (window.ActiveXObject) { // IE http_request = new ActiveXObject("Microsoft.XMLHTTP"); }
Catatan: kode di atas hanya sebagai ilustrasi saja. Kode tersebut merupakan versi paling sederhana untuk membuat instance XMLHttp. Untuk penggunaan secara nyata dapat lihat di bagian 3 artikel ini.
Beberapa versi browser Mozilla tidak bekerja dengan baik jika respon dari server tidak mengandung header mime-type XML. Untuk memenuhi kebutuhan ini, panggil method untuk mengganti/menambahkan header yang dikirim oleh server. http_request = new XMLHttpRequest(); http_request overrideMimeType('text/xml');
Setelah itu, buat fungsi untuk mengolah setelah data diterima dari server berdasarkan permintaan yang dibuat sebelumnya. Tahap ini, daftarkan fungsi JavaScript yang menangani respon dari server. Setting properties onreadystatechange objek dengan nama fungsi Javascript yang disiapkan untuk mengerjakan proses respon. http_request.onreadystatechange = namaFungsi;
Perlu dicatat bahwa tidak ada tanda kurung setelah nama fungsi dan
tanpa parameter yang dilewatkan. Selain memberikan nama fungsi, dapat
juga digunakan teknik JavaScript dalam pendefinisian fungsi (tanpa
nama) saat program berjalan (run-time) -- yang disebut fungsi anonymous -- dan mendefinisikan tindakan untuk melakukan proses, seperti berikut: http_request.onreadystatechange = function() { // do the thing };
Selanjutnya, setelah deklarasi dan segera setelah menerima respon, kemudian buat permintaan. Panggil method open() dan send() dari klas permintaan HTTP seperti kode berikut: http_request.open('GET', 'http://www.example.org/somefile', true); http_request.send(null);
- Parameter panggil pertama dari open() adalah method permintaan HTTP GET, POST, HEAD atau method lain yang didukung oleh server.
Gunakan huruf kapital sebagaimana standar HTTP. Untuk informasi lebih
lanjut mengenai method permintaan HTTP dapat dilihat pada spesifikasi W3C.
- Parameter kedua adalah URL dari halaman yang diminta. Demi
keamanan, panggilan tidak dapat dilakukan pada halaman domain pihak
ketiga. Pastikan untuk menggunakan nama domain yang pasti pada semua
halaman jika tidak ingin mendapat error 'permision denied' ketika
melakukan panggilan open().
- Parameter ketiga diset ketika permintaan adalah asinkron. Jika
diset TRUE, eksekusi fungsi JavaScript akan berlanjut walau tanggapan
dari peladen belum sampai. Ini adalah A dalam AJAX.
Parameter untuk method send() dapat berupa sembarang data untuk dikirim ke server saat mengirimkan permintaan POST. Data harus dalam format query string, seperti: name=value&anothername=othervalue&so=on
Catatan bahwa jika ingin mengirim (POST) data, ganti tipe MIME permintaan menggunakan bari berikut: http_request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
Bila tidak, server akan mengabaikan data yang dikirim.
2. Penanganan Respon Server
Ingat bahwa ketika permintaan dikirim, fungsi JavaScript harus telah disediakan untuk menangani respon. http_request.onreadystatechange = namaFungsi;
Apa yang seharusnya dikerjakan oleh fungsi ini. Pertama, fungsi
untuk memeriksa status tanggapan. Jika status memiliki nilai 4, berarti
bahwa seluruh tanggapan peladen telah diterima dan siap dilanjutkan
proses berikutnya. if (http_request.readyState == 4) { // everything is good, the response is received } else { // still not ready }
Berikut adalah daftar nilai status readyState
- 0 (tidak diinisialisasi)
- 1 (dalam proses memuat)
- 2 (telah dimuat)
- 3 (interaktif)
- 4 (lengkap)
Berikutnya adalah pemeriksaan kode status dari respon HTTP server. Daftar kode status respon HTTP dapat dilihat di situs W3C. Pada contoh kali ini hanya digunakan status 200 yaitu respon OK. if (httpRequest.status == 200) { // perfect! } else { // there was a problem with the request, // for example the response may be a 404 (Not Found) // or 500 (Internal Server Error) response codes }
Setelah semua status permintaan diperiksa dan kode status HTTP telah
ada respon, data respon dari server dapat diolah. Terdapat dua pilihan
untuk mengakses data.
- httpRequest.responseText -- akan mengembalikan respon berupa teks string
- httpRequest.responseXML -- akan mengembalikan respon berupa
objek XMLDocument object yang dapat diakses dengan fungsi DOM
JavaScript
3. Contoh Sederhana
Tulis bagian program menjadi satu permintaan HTTP sederhana.
JavaScript akan meminta sebuah dokumen HTML yaitu test.html yang hanya
mengandung tulisan "I'm a test" dan kemudian memanggil alert() dengan isi dari berkas test.html <script type="text/javascript" language="javascript"> var http_request = false; function makeRequest(url) { http_request = false ; if (window.XMLHttpRequest) { // Mozilla, Safari ,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); // See note below about this line } } else if (window.ActiveXObject) { // IE var aVersions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0", "MSXML2.XMLHttp.3.0", "Microsoft.XMLHTTP" ]; for (var i = 0; i < aVersions.length; i++) { try { http_request = new ActiveXObject(aVersions[i]); break; } catch (e) { // Do nothing } } } if (!http_request) { alert ('Giving up :( Cannot create an XMLHTTP instance'); return false; } http_request.onreadystatechange = alertContents; http_request.open('GET', url, true); http_request.send(null); } function alertContents() { if (http_request.readyState == 4) { if (http_request.status == 200) { alert(http_request.responseText); } else { alert('There was a problem with the request.'); } } } </script> <span style="cursor: pointer; text-decoration: underline" onclick ="makeRequest('test.html')">Make a request </span >
Pada contoh di atas:
- Ketika pengguna menekan klik pada link "e;Make a
request"e; maka fungsi makeRequent dipanggil dengan parameter
nama file HTML test.html dalam direktori yang sama.
- Permintaan dibuat dan kemudian event onreadystatechange melakukan eksekusi alertContents()
- alertContents() memeriksa jika tanggapan telah diterima dalam keadaan baik dan kemudian tampilkan isi berkas test.html menggunakan fungsi alert()
Contoh di atas dapat diuji dengan klik di sini dan juga berkas test dapat dilihat di sini. Catatan: baris http_request.overrideMimeType('text/xml'); di atas mengakibatkan error Console pada Firefox 1.5b seperti tercantum dalam dokumen pada https://bugzilla.mozilla.org/show_bug.cgi?id=311724 jika halaman yang dipanggil dengan XMLHttpRequestbukan XML yang valid (seperti plaintext).
4. Bekerja dengan Respon XML
Pada contoh sebelumnya, setelah tanggapan dari permintaan HTTP
diterima, digunakan sifat responseText dari objek permintaan yang
mengandung isi file test.html. Sekarang, coba gunakan sifat responseXML Buat dokumen XML yang valid dengan nama test.xml seperti contoh di bawah: xml version ="1.0" ?> <root> I'm a test. </root>
Ganti baris permintaan pada script untuk melakukan request dengan: ... onclick ="makeRequest('test.xml')"> ...
Kemudian pada alertContents() ganti pada baris alert(http_request.responseText); diganti dengan: var xmldoc = http_request.responseXML; var root_node = xmldoc.getElementsByTagName('root').item(0); alert(root_node.firstChild.data);
Perintah tersebut untuk mengambil objek XMLDocument yang diberikan
oleh responseXML dengan menggunakan method DOM untuk mengakses data
dalam dokumen XML.
4. Petukaran data menggunakan JSON
Telah di sebutkan di atas bahwa JSON merupakan salah satu format
pertukaran data yang dapat secara langsung diterjemahkan ke dalam objek
Javascript. Pada contoh berikut akan dijelaskan bagaimana implementasi
JSON pada AJAX dibandingkan dengan XML.
Pertama, buat data JSON dalam sebuah file dengan nama test.txt yang isinya: { "FirstName" : "Ahmad", "LastName" : "Masykur" }
Ganti baris perintah pada script untuk melakukan request dengan: ... onclick ="makeRequest('test.txt')"> ...
Kemudian pada alertContents() ganti pada baris alert(http_request.responseText); diganti dengan: eval("jsonObj="+http_request.responseText+";"); alert(jsonObj.FirstName + ' ' + jsonObj.LastName);
Dari contoh di atas terlihat bahwa JSON lebih sederhana dan ringan
dibandingkan dengan XML. Jumlah data yang terkandung lebih banyak dan
total byte yang dikirim lebih kecil. Juga pada penulisan di
javascript lebih sederhana karena notasi data dapat langsung
diterjemahkan menjadi objek Javascript dengan fungsi eval().
Pada implementasi di projek nyata, data (baik XML maupun JSON) biasanya diambil dari application server atau webservice.
Demikian tulisan singkat dan contoh sederhana mengenai AJAX. Semoga
dapat membuka wawasan mengenai AJAX untuk dapat memulai mengembangkan
aplikasi web yang AJAX-enabled.
|