A. Pengertian

AJAX adalah 2 hal yang digabungkan merupakan sebuah teknologi, sekaligus arsitektur pemrograman.

1. AJAX sebagai sebuah teknologi

AJAX adalah singkatan dari “Asynchronous JavaScript and XML”, yang dibuat dari serangkaian teknologi dengan berbagai kemampuan : JavaScript, XML dan sebuah method komunikasi asinkron antara client dan server.

Teknologi yang saling berinteraksi : JavaScript menangkap isyarat, gerak serta aksi. Sebagaimana pada situasi yang mungkin terjadi, JavaScript menggunakan jalur komunikasi pada server (object JavaScript dengan nama XMLHttpRequest) untuk memanggil method yang tersimpan pada server dan menggunakan XML sebagai mekanisme pengiriman data. Jika JavaScript pada client telah menerima respon dari server, maka JavaScript akan menggunakan kemampuan bawaannya untuk memanipulasi struktur DOM halaman untuk menambahkan content yang didapat dari server. Perubahan yang terjadi pada struktur DOM kemudian diterjemahkan oleh browser pada client, sehingga meningkatkan efek interaktivitas pada user.

2. AJAX sebagai sebuah Arsitektur

Pada awalnya AJAX dibuat sebagai sebuah rangkaian dari teknologi, namun kemudian AJAX mengalami perkembangan. Sebagai contoh, adanya aplikasi web yang tidak menggunakan XML dalam mentransfer data dari client ke server. Cara tersebut dilakukan dengan menggunakan object XMLHttpRequest.

Berdasarkan realita di atas, beberapa pihak mendefinisikan sebagai paradigma baru dalam pemrograman, disamping teknologi yang menyediakan fungsionalitas. Mari kita bahas lebih mendalam tentang arsitektur AJAX.

Pengembang telah mengembangkan web programming sebelum hadirnya AJAX : action dari user yang membutuhkan data dari server ditampilkan dalam halaman yang digunakan, dimana data request dari user dikirimkan menuju server. Setelah mengolah halaman tersebut, server menampilkan halaman baru bagi user yang mengandung hasil dari proses sebelumnya.

Permasalah dari macam arsitektur tersebut adalah lambat dan cukup memakan waktu, terutama bila dibandingkan dengan aplikasi desktop. Aplikasi desktop mampu merespon cepat atas request dari user, aplikasi ini tidak memproses ulang masing – masing komponen interface yang akan ditampilkan sebagai respon.

AJAX menggunakan arsitektur pemrograman tersebut pada aplikasi Web. Daripada memberikan sebuah halaman penuh pada server dan mendapatkan pula sebuah halaman penuh sebagai hasil operasi, AJAX mengijinkan kita untuk mengirimkan request dalam ukuran yang lebih kecil pada server. Halaman yang terpakai hanya termodifikasi untuk menampilkan hasil, bukan tergantikan dengan sebuah halaman baru.

Faktor penting yang lain dari arsitektur AJAX adalah request dan response dijalankan secara asinkron : AJAX tidak melarang user untuk melakukan proses lain pada halaman yang dipakai. User dapat mengisi dan menggunakan area lain pada halaman, sedangkan AJAX bekerja pada background.

Yang terakhir, AJAX mengijinkan user untuk berinteraksi dengan server sebagai respon terhadap seluruh hal yang dilakukan oleh user. Arsitektur yang ada sebelumnya hanya mengijinkan kita untuk berkomunikasi dengan server pada saat user menekan tombol atau link yang akan mengirim data pada halaman. AJAX memperbolehkan untuk me-request data baru dari server dalam bentuk mouseovers, keypress dan even lain yang dikenali oleh JavaScript.

B. KONSEP AJAX

Konsep HTTP Request dan Response

Untuk mengetahui bagaimana konsep dari Ajax anda perlu mengetahui bagaimana sebuah web browser memproses sebuah request dan menerima sebuah response dari web server. Standar yang digunakan web browser pada saat ini adalah HTTP (HyperText Transfer Protocol). HTTP digunakan oleh web browser untuk mengirim request dari website ke web server dan kemudian menerima response dari web server. HTTP request berkerja seperti email, memberitahukan kapan request dikirim, berisi header yang memberitahu apa yang harus dilakukan server dan bagaimana menghandle request tersebut. Sekali sebuah request diterima, web server kemudian menentukan response apa yang akan diberikan. Terdapat banyak kode response, tabel dibawah memperlihatkan kode yang umumnya.

Terdapat banyak request method yang ada, tetapi yang paling sering digunakan adalah GET dan POST. Sekarang anda telah memiliki bayangan bagaimana request dikirim ke web server dan kemudian web server mengirim response dari request tersebut ke web browser, akan mudah bagi anda untuk memahami bagaimana XMLHttpRequest berkerja. Keduanya sangat mirip, tetapi XMLHttpRequest dioperasikan di belakang layar dan tanpa memerlukan refresh halaman.

XMLHttpRequest Object

Ajax bisa dibilang adalah sebuah konsep untuk menerangkan interaksi antara client-side XMLHttpRequest Object dengan script server-side. Untuk membuat request ke web server menggunakan Ajax, anda harus membentuk Object XMLHttpRequest terlebih dahulu. Untuk membentuk object XMLHttpRequest berbeda pada setiap browser. Pada microsoft internet explorer object dibentuk sebagai ActiveX control, sedang pada browser seperti Firefox dan safari menggunakan basic javascript object.

XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dijelaskan di bawah ini.

1. abort()
Method abort() digunakan untuk menghentikan request yang sedang berjalan. Method ini sangat berguna jika anda memperhitungkan lama waktu koneksi, misalnya jika waktu koneksi melebihi rentang waktu tertentu anda bisa menggunakan method abort() untuk menghentikan request secara prematur.

2. getAllResponseHeader()
Anda dapat menggunakan method ini untuk memperoleh semua informasi dari semua header HTTP yang sedang diberikan oleh server. Misalnya set sebuah header akan terlihat seperti :

Date: Sun, 13 Nov 2005 22:53:06 GMT
Server: Apache/2.0.53 (Win32) PHP/5.0.3
X-Powered-By: PHP/5.0.3
Content-Length: 527
Keep-Alive: timeout=15, max=98
Connection: Keep-Alive
Content-Type: text/html

3. getResponseHeader("headername")
Method ini dapat digunakan untuk memperoleh isi dari begian sebuah header, sebagai contoh untuk memperoleh ukuran dari document yang sedang direquest, anda dapat menggunakan getResponseHeader("Content-Length").

4. open ("method","URL","async","username","pswd")
Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini anda memberitahukan kepada web server method apa yang digunakan untuk membuka file ("GET" atau "POST"). Sebagai catatan tidak semua argument pada method ini harus diisi, tergantung dengan situasi dan kebutuhan.

5. setRequestHeader("label","value")
Method ini dapat digunakan untuk menentukan header pada saat melakukan request. Sebagai catatan, method ini hanya bisa dipanggil setelah method open digunakan dan sebelum method send dipanggil.

6. send("content")
method ini digunakan untuk mengirim request ke server. Jika request dikirim secara asynchronous, maka response akan datang secepatnya. Jika tidak, response akan datang setelah response diterima oleh web browser. Parameter pada method ini tidak harus diisi, parameter ini sangat berguna untuk memproses HTML form dan memberikan anda untuk mengirim nilai dari element form ke web server.

XMLHttpRequest Methods

Setelah XMLHttpRequest terbentuk, terdapat beberapa method atau fungsi yang bisa digunakan. Method-method tersebut dijelaskan di bawah ini.

4. open ("method","URL","async","username","pswd")

Method ini merupakan method yang paling penting dan berguna pada XMLHttpRequest. Method ini digunakan untuk membuka koneksi dengan document yang ada di server. Dengan method ini anda memberitahukan kepada web server method apa yang digunakan untuk membuka file ("GET" atau "POST"). Sebagai catatan tidak semua argument pada method ini harus diisi, tergantung dengan situasi dan kebutuhan.

Membentuk Object XMLHttpRequest

Untuk membentuk sebuah object XMLHttpRequest anda dapat menggunakan kode berikut ini :

function getXMLHttpRequest(){

//jika user menggunak IE

 if(window.ActiveXObject){

     return new ActiveXObject("Microsoft.XMLHTTP");

 }else if(window.XMLHttpRequest){

 //user menggunakan browser selain IE

     return new XMLHttpRequest();

 }else {alert("Status : can not create XMLHttpRequest Object");}

Mengirim Request ke Server

Setelah selesai membuat object XMLHttpRequest anda dapat mengirim request ke server. Saat mengirim request ke server anda harus menentukan request method yang digunakan, apakah akan menggunakan GET atau POST. Jika anda ingin menampilkan informasi dari server maka anda akan menggunakan method GET, sedangkan jika anda mengirim informasi ke server maka gunakan method POST. Pada tutorial ini ada akan belajar menggunakan method GET (POST akan dijelaskan pada tutorial selanjunya). Untuk mengirim request ke server menggunakan method GET, anda dapat menggunakan kode di bawah.

var xmlhttp=getXMLHttpRequet();

function sendRequest(pageUrl,elementID){

 var obj=document.getElementById(elementID);

 var obj.innerHTML='loading... please wait';

 if(xmlhttp.readyState==4 || xmlhttp.readyState==0){

     xmlhttp.open("GET",pageUrl,true);

     xmlhttp.onreadystatechange=function(){

         if(xmlhttp.readyState==4 && xmlhttp.status==200){

             obj.innerHTML=xmlhttp.responseText;

 xmlhttp.send(null);

function di atas mengambil parameter HTML element ID dan URL dari file yang ada di server. Pertama yang dilakukan adalah mengganti properti innerHTML dari HTML element, untuk menampilkan text "loading...please wait". Kemudian membuka koneksi ke server dengan method open(). Jika properti readyState sama dengan 4 (complete) dan status sama dengan 200 (OK) maka tampilkan response dari server dengan mengganti properti innerHTML dari element HTML dengan properti responseText dari object XMLHttpRequest.

C. Teknik – teknik penerapan AJAX

Ada beberapa teknik yang dapat digunakan untuk menerapkan AJAX dalam sebuah web. Teknik-teknik tersebut memiliki kelebihan dan kekurangan masing-masing. Adapun teknik-teknik yang sering digunakan untuk menerapkan AJAX antara lain: Hidden Frame, HTTP Request, dan Cookie. Dari ketiga teknik tersebut yang banyak digunakan adalah HTTP Request.

1. Teknik Hidden Frame

Teknik ini memanfaatkan frameset yang disembunyikan, caranya dengan mengatur lebar (width) dan tinggi (height) menjadi 0 pixel sehingga frame tak akan terlihat di halaman web. Hidden frame ini yang sebenarnya melakukan request ke dan menerima respon dari sever sehingga frame yang tampil tidak tampak melakukan post-back ke server.
Kode untuk hidden frame adalah sebagai berikut:

;

atau bisa juga menggunakan elemen tag iframe

Home

Sabtu, 27 April 2013

AJAX

XMLHttpRequest Methods

Membentuk Object XMLHttpRequest

Tidak ada komentar:

Posting Komentar