AJAX – Asynchronous JavaScript And XML (PART 3)

Ini merupakan posting ketiga tentang AJAX, dan ini menjadi FINAL TRILOGY POSTING tentang AJAX …  =)

Pada posting pertama menjelaskan pembuatan class object XMLHttpRequest dan juga pemanfaatannya dalam melakukan Asynchronous komunikasi dengan server untuk meminta (Request) data dari server.

Pada posting kedua menjelaskan tentang pengembalian (Respon) dari server berupa data XML dan proses parsing data tersebut dengan memanfaatkan DOM (Document Object Model).

Pada posting ketiga yang terakhir ini menjadi penutup dari kedua posting sebelumnya, disini akan menjelaskan pembuatan class object AJAX dengan javascript dan juga pemanfaatan object yang akan dibuat tersebut.


Dalam javascript pembuatan class tidak terlalu rumit, cukup membuat constructor function di ikuti dengan nama class yang akan dibuat, berikut sedikit catatan singkat pembuatan class dalam javascript :

  • Pembuatan class, dilakukan dengan membuat sebuat constructor function diikuti dengan nama class yang akan dibuat.
  • Pembuatan properties, dilakukan dengan mendeklarasikan variabel pada block function
  • Pembuatan method, dilakukan dengan membuat function object didalam block class function.

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

ajax-class

ajax-class

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 :

[javascript]

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;
}
};
}

[/javascript]

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 :

[php]

<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>

[/php]

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

HAVE A NICE CODING

Related Posts



Leave a Reply