Pembuatan class AJAX ini berdasarkan buku karya Mathew Errnisse : Build your own AJAX web application

Class object yang akan dibuat memiliki struktur gambar disamping ini, Class ajax yang akan dibuat memiliki 13 buah properties, dan 7 buah method. Properties object Req : object objectXMLHttpRequest url : lokasi URL file/data method : Metode request (POST/GET) async : tipe (TRUE atau FALSE) status : status error respon server statusText : text error status respon postData : Data ke-server readyState : Status respon dari server reponseText: response jika Text Data. responseXML: response jika XML Data. handleResp : Function handle respon responseFormat : Format respon Method object init : membuat XMLHttpRequest object handErr : function error handle abort : membatalkan request doReq : melakukan request doGet : membuka proses request

Script class AJAX yang akan dibuat bisa di download disini

berikut script detail class AJAX tersebut :

function ajax()
{
this.req = null;
this.url = null;
this.method = 'GET';
this.async = true;
this.status = null;
this.statusText = '';
this.postData = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = 'text', // 'text', 'xml', or 'object'

this.init = function() {
  if (!this.req) {
	try {
  	  // Firefox, Safari, IE7, etc.
	  this.req = new XMLHttpRequest();
	  }
	  catch (e) {
	   try {
	    // IE Versi lama.
	    this.req = new ActiveXObject('MSXML2.XMLHTTP');
	   }
	   catch (e) {
	   try {
		 // IE Versi terbaru.
		 this.req = new ActiveXObject('Microsoft.XMLHTTP');
	   }
	   catch (e) {
		 // Could not create an XMLHttpRequest object.
		 return false;
	   }
	}
  }
}
return this.req;
};		

this.doGet = function(url, hand, format) {
	var self = this;
	self.url = url;
	self.handleResp = hand;
	self.responseFormat = format || 'text';
	self.doReq();
};		


this.doReq = function() {
	if (!this.init()) {
	  alert('Could not create XMLHttpRequest object.');
	  return;
	}		

	this.req.open(this.method, this.url, this.async);
	var self = this;						
	this.req.onreadystatechange = function() {
		var resp = null;			
		if (self.req.readyState == 4) {				
		 switch (self.responseFormat) {
			case 'text':
				resp = self.req.responseText
				break;
			case 'xml'
				resp = self.req.responseXML;
				break;
			case 'object':
				resp = req;
				break;
		}

		if (self.req.status >= 200 && self.req.status <= 299) {
			self.handleResp(resp);
		}else{
			self.handleErr(resp);
		}	
		} //END if (self.req.readyState == 4)			
	};	// END 	this.req.onreadystatechange = function()	
	
	this.req.send(this.postData);		
};	// END this.doReq = function()

this.handleErr = function() {
	var errorWin;
	try {
	  errorWin = window.open('', 'errorWin');
	  errorWin.document.body.innerHTML = this.responseText;
	}
	catch (e) {
	  alert('ERROR, browser mengaktifkan pop-up blocker \n'
	  + 'Status Code: ' + this.req.status + '\n'
	  + 'Status Description: ' + this.req.statusText);
	}
};	

this.abort = function() {
	if (this.req) {
  	  this.req.onreadystatechange = function() { };
	  this.req.abort();
	  this.req = null;
	}
};	
}

Penjelasan detail function AJAX diatas :

Pada bagian awal class dilakukan pembuatan properties untuk class AJAX ini dan juga dibuat nilai default untuk masing-masing properties tersebut.

Method init
method ini digunakan untuk membuat sebuah class object XMLHttpRequest dan hasil pembuatannya akan di tampung kedalam properies req, sehingga nantinya properies req ini akan berisi object XMLHttpRequest yang telah dibuat.

Method doGet
Methode ini digunakan untuk melakukan komunikasi request dengan server dalam meminta data, dalam memanggil function ini di perlukan 3 parameter yang harus dikirimkan/diparsing, parameter tersebut adalah :
- url : alamat URL halaman yang akan di request
- hand : function yang akan menangani jika respon dari server telah selesai diterima
- format : format data yang akan di respon dari server (TEXT, XML atau OBJECT)
Ketiga parameter yang diparsing akan di input kedalam properies object oleh method ini, dan setelah itu akan di panggil method doReq setelah selesai mengisi properties.

Methode doReq
Method yang akan melakukan komunikasi dengan server, mulai2 method akan membuat sebuah class object XMLHttpRequest dengan memangil method init dari object, kemudian akan dilakukan open Async komunikasi dengan server dari class object XMLHttpRequest yang telah dibuat tersebut.
Setelah selesai mengirikan request kepada server method ini akan menunggu respon pengembalian data dari server, jika respon telah di dapatkan maka akan di panggil function yang telah dipersiapkan untuk memproses data respon tersebut.
Function untuk memproses data hasil respon dari server ini bisa dibuat diluar object AJAX ini sesuai dengan keperluan.

Method handleErr
Method ini akan di panggil jika dalam proses komunikasi dengan server pada doReq terjadi kesalahan/error, method ini hanya akan menampilkan pesan error yang terjadi dari komunikasi request yang dilakukan.

Method abort
Method ini bisa digunakan jika ingin membatalkan komunikasi request dengan server jika diperlukan.

Berikut contoh pengunaan class object AJAX tersebut, buat sebuah halaman HTML dengan script dibawah ini :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Contoh AJAX</title>
<script language="javascript" src="class-ajax.js"></script>
</head>
<body>
	<div id="content"></div>
	<script language="javascript">
		var hand = function(str) {
			document.getElementById("content").innerHTML = str;
		}
		var oAJAX = new ajax();
		oAJAX.doGet("dataLoad.html",hand);
	</script>
</body>
</html>

Contoh lengkap bisa di lihat disini
Source code bisa di download disini

HAVE A NICE CODING