Belajar Ajax – Contoh sederhana AJAX ~ inno zero

Seri Belajar Ajax

Bagian 1. Pengenalan AJAX

Sebelum membaca tutorial ini lebih lanjut sebaiknya membaca seri belajar ajax sebelumnya

Arti XmlHttpRequest

XmlHttpRequest adalah sebuah object javascript yang digunakan untuk mengakses web server secara asingkron, jadi user dapat terus melakukan aktifitasnya di sebuah halaman web tanpa me-refresh halaman tersebut, karena proses requestnya dilakukan di background. Mengakses web server artinya adalah melakukan sebuah request biasa ke sebuah halaman di webserver yang berisi script (server side script). Teknisnya XMLHttpRequest (XHR) adalah sebuah DOM API yang dapat digunakan pada web browser scripting language seperti JavaScript.

Pada proses request ini, tentunya ada data yang akan kita lewatkan untuk diproses di sisi server. Metode request yang dapat dan biasa kita gunakan adalah GET atau POST. Tentunya akan sangat mudah bagi server untuk membaca data yang di kirimkan oleh client dengan menggunakan metode tersebut.

Setelah data tersebut terkirim, otomatis server akan mengirimkan respon balik atas request yang telah dilakukan. Berbeda dengan respon web server biasa, biasanya hasil respon tersebut dalam sebuah format yang mudah di parsing oleh javascript di sisi client. Walaupun berlabel XML kita juga dapat menggunakan data format lain seperti # HTML, JSON, CSV. Text Format yang banyak digunakan adalah XML dan Json. Xml banyak digunakan karena format ini sudah di dukung banyak system dan ada banyak library yang dapat digunakan untuk memanipulasi dokumen XML tersebut. Sedangkan JavaScript Object Notation (JSON) karena simple dalam mendecode dan ukurannya yang sangat kecil dan data oriented.

Sejarah XMLHttpRequest

Konsep utama XMLHttpRequest ini berasal dari Microsoft pada project Outlook Web Access. Sebuah interface bernama IXMLHTTPRequest telah diimplementasikan di MSXML. Dan pada versi kedua MSXML, IXMLHTTPRequest sudah dapat digunakan pada Internet Explorer 5.0(March 1999) menggunakan ActiveX wrapper.

Hal tersebut diikuti oleh Mozilla Foundation dengan membangun sebuah interface yang disebut nsIXMLHttpRequest pada browser engine mereka – gecko. Interface ini dibangun mirip dengan Microsoft’s IXMLHTTPRequest interface. Perbedaanya Mozzila menjadikannya sebagai salah satu object dalam javascript.

Karena konsepnya yang bagus, XMLHttpRequest menjadi standard diantara browser-browser besar. Safari mengimplementasikan pada February 2004 (safari 1.2), Konqueror, Opera 8.0 pada April 2005. Pada tahun 2006 World Wide Web Consortium (W3C) mempublish sebuah draft tentang XMLHttpRequest ini untuk menjadi standar yang lebih baku.

Implementasi XHR

Pada implementasinya, untuk membuat sebuah object XMLHttp cukup dengan meninstance class XMLHttpRequest(), tetapi pada browser IE, microsoft mengimplentasikannya pada sebuah ActiveX Control, jadi kita harus menggunakan ActiveX tersebut untuk mengimplmentasikan ajax pada IE. Contoh :

var xmlHttp = createXmlHttpRequestObject();
function createXmlHttpRequestObject(){
  var xmlHttp;
  try
  {
    xmlHttp = new XMLHttpRequest();
  }
  catch(e)
  {
    var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
                                    "MSXML2.XMLHTTP.5.0",
                                    "MSXML2.XMLHTTP.4.0",
                                    "MSXML2.XMLHTTP.3.0",
                                    "MSXML2.XMLHTTP",
                                    "Microsoft.XMLHTTP");
 
    for (var i=0; i<XmlHttpVersions.length && !xmlHttp; i++){
      try{
        xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
      }
      catch (e) {}
    }
  }
 if (!xmlHttp)
    alert("Error creating the XMLHttpRequest object.");
  else
    return xmlHttp;
}

Setelah object XMLHttp dibuat, kita dapat membuat HTTP request mengunakan javascript dengan memanggil fungsi open() yang merupakan member dari class XMLhttp. Fungsi ini mempunyai 3 parameter diantaranya:

Type Request: Sebuah string yang menunjukkan dengan tipe request apa koneksiyang akan dilakukan.
URL kemana kita akan mengirim request tersebut.
Async: Sebuah value bertipe boolean yang menunjukkan apakah request akan diminta secara asingkron

Parameter terakhir Async sangat penting karena ia mengontrol javascript bagaimana cara menangani request. Ketika ia di set True maka request akan dilakukan secara asingkon, artinya javascript akan tetap menjalankan kode salanjutnya tanpa menunggu response dari server, Tetapi jika di set false maka browser akan menunggu sampai aja respon sebelum melanjutkan eksekusi code. Ini berarti jika respon membutuhkan waktu yang banyak, maka user tidak dapat berinteraksi dengan browser sampai request selesai.

Selanjutnya setelah object XMLhttp terbentuk, kita perlu mendefinisikan sebuah event handler onreadystatechange. Objek XMLHttp mempunyai sebuah properti dengan nama readyState yang berisi informasi tentang status response dari server. Ada 5 jenis status respondari server diantaranya:

0 (Uninitialized) : Objek XML Http sudah dibuat tetapi fungsi open belum dipanggil.
1 (Loading) : Fungsi open telah dipanggil tetapi request belum dikirim
2 (Loaded) : Request telah dikirim
3 (Interactive) : Sebagian response telah di terima
4 (Complete) : Semua data telah diterima

Setiap ada perubahan value pada property readystate maka eventhandler onreadystatechange akan di panggil. Adapun method/properties pada XMLHTTP Object adalah

Method/Property	keterangan
Abort ()	Membatalkan request yang telah dikirim
getAllResponseHeaders ()	Mendapatkan header respon sebagai string
Open ( “method”, ”URL”[,asyncflag [, “username” [, “pasword”]]])	Inisialiasi parameter request
Send (content)	Melakukan HTTP Request
setRequestHeader(“Label”, “value”)	Set pasangan label dan valuenya pada header request
Onreadystatechange	Digunakan untuk mengeset fungsi callback yang menghandle perubahan request state
readyState	Memberikan informasi status request
responseText	Mengembalikan respon server dalam format string
responseXML	Mengembalikan respon server dalam format XML
Status	Mengembalikan kode status request
statusText	Mengembalikan pesan status request

Sumber : http://www.koder.web.id

inno zero

Selasa, 20 September 2011