AJAX - Asyncronous JavaScript and XML

AJAX - Asyncronous JavaScript and XML

Pendahuluan
Asynchronous JavaScript and XML (AJAX) adalah teknik pembangunan web untuk membuat aplikasi web interaktif menggunakan paduan beberapa teknologi sebagai berikut:

• HTML (HyperText Markup Language) digunakan dalam membuat halaman web dan dokumen-dokumen lain yang dapat ditampilkan dalam peramban (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.
• Extensible HyperText Markup Language (XHTML), adalah bahasa penanda (markup) sebagaimana HTML, tetapi dengan gaya bahasa lebih baik.
  
• Cascading Style Sheets (CSS) adalah sebuat bahasa stylesheet yang digunakan untuk memaparkan presentasi sebuah dokumen 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 penanda untuk keperluan umum yang disarankan oleh W3C untuk membuat bahasa penanda keperluan khusus. Keperluan utama XML adalah untuk membagi data antar sistem yang berbeda, sebagian sistem terhubung melalui Internet.
  
• Extensible Stylesheet Language Transformations (XSLT) 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.
  

Perpaduan teknologi-teknologi tersebut dapat meningkatkan kinerja aplikasi web dan lebih responsif terhadap aksi pengguna sehingga dapat berjalan lebih cepat, pemutakhiran antarmuka pengguna secara berkala tanpa memuat kembali keseluruhan halaman.

Penggunaan Dasar
Dua keistimewaan Ajax adalah dapat:

• Membuat permintaan kepada peladen tanpa membuat kembali halaman.
• Mengurai dan bekerja dengan dokumen XML.

1. Membuat Permintaan HTTP (HTTP Request)
Untuk membuat permintaan HTTP kepada peladen menggunakan JavaScript, diperlukan sebuah klas yang menyediakan fungsi-fungsi ini. Seperti sebuah klas yang ada dalam Internet Explorer yaitu objek ActiveX, kemudian disebut XMLHTTP. Kemudian Mozilla, Safari dan beberapa peramban mengikutinya, menerapkan sebuah klas XMLHttpRequest yang mendukung method dan sifat (properties) objek asli Microsoft ActiveX.
Untuk membuat instance (objek) klas lintas-peramban (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");
}

Beberapa versi peramban Mozilla tidak bekerja dengan baik jika tanggapan (response) dari peladen tidak mengandung kop (header) mime-type XML. Untuk memenuhi kebutuhan ini, panggil method untuk mengabaikan kop yang dikirim oleh peladen.

http_request = new XMLHttpRequest();
http_request overrideMimeType(’text/xml’);

Setelah itu, daftarkan fungsi JavaScript yang menangani tanggapan dari peladen. Setting sifat onreadystatechange objek untuk nama fungsi Javascript yang disiapkan untuk mengerjakan proses tanggapan

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 saat program berjalan dan mendefinisikan tindakan untuk melakukan proses, seperti berikut:

http_request onreadystatechange = function(){
// do the thing
};
Selanjutnya, setelah deklarasi dan segera setelah menerima tanggapan, kemudian buat permintaan. Panggil
method open() dan send() dari klas permintaan HTTP seperti kode berikut:

http_request open (’GET ’, ’http ://www.example.org/some file’, true );
http_request send (null);

• Parameter panggil pertama dari open() adalah method permintaan HTTP GET, POST, HEAD. atau method lain yang didukung oleh peladen. 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 galat ’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 peladen 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, peladen akan mengabaikan data yang dikirim.

2. Penanganan Tanggapan Peladen
Ingat bahwa ketika permintaan dikirim, fungsi JavaScript telah disediakan untuk menangani tanggapan.

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)

3. Contoh Sederhana
Tulis bagian program menjadi satu permintaan HTTP sederhana. JavaScript akan meminta sebuah dokumen HTML yaitu test.html yang hanya mengandung tulisan ”Saya adalah percobaan.” dan kemudian memanggil alert() dengan isi dari berkas test.html

pada dokumen.

AJAX Framework dapat dipanggil dengan mendeklarasikan instance klas seperti pada contoh berikut:

var ajax = new AJAX ();

Untuk memanggil webservices gunakan method callService() dan untuk memanggil halaman gunakan callPage(). Method callService() akan melakukan invoke kepada webservice dan mengembalikan isi tanggapan berupa dokumen XML. Method callPage() akan memanggil halaman dan mengembalikan isi dokumen HTML.

Contoh callPage() :
function pageCallback(response){
alert(response);
}
var ajax = new AJAX ();
ajax callPage("mypage.html", pageCallback);

Contoh callService() :
function serviceCallback ( response ){
alert ( response );
}
var ajax = new AJAX ();
ajax.callService("MyWebService.asmx","MyMethodToCall",serviceCallback);

Contoh callService() dengan parameter :
function serviceCallback ( response ){
alert ( response );
}
var ajax = new AJAX ();
/* paramter ditambahkan pada akhir method callService dengan pasangan kunci=nilai */
ajax.callService("MyWebService.asmx", "MyMethodToCall", serviceCallback, "par1=hello", "par2=world");

Contoh callService() dengan namespace sendiri :
function serviceCallback ( response ){
alert ( response );
}
var ajax = new AJAX ();
/* set namespace baru untuk menggunakan dengan webservice */
ajax.setNameSpace("http://mynamespaceuri/");
ajax.callService("MyWebService.asmx","MyMethodToCall",serviceCallback);

Contoh penanganan galat :
/* Tetapan awal galat akan ditampilkan. Untuk menyembunyikannya
lakukan redirect terhadap fungsi tersebut. */
function myErrorHandler(error){
alert(error);
}
var ajax=new AJAX ();
ajax.onError = myErrorHandler;