Screenshots | Demo | Download

Related posts:

1. AJAX – Asynchronous JavaScript And XML (PART 2)
2. AJAX – Asynchronous JavaScript And XML (PART 1)
3. AJAX – Asynchronous JavaScript And XML (PART 3)

—————
http://www.adobe.com/go/labs_spry_pr1_article

Related posts:

1. AJAX – Asynchronous JavaScript And XML (PART 2)
2. AJAX – Asynchronous JavaScript And XML (PART 1)
3. AJAX – Asynchronous JavaScript And XML (PART 3)

AJAX Toolkits

Sebelum melakukan proses dibawah ini sebaiknya install terlebih dahulu ASP.NET AJAX Extention 1.0 pada Visual Studio 2005, file installasi dapat di download dari link berikut : http://go.microsoft.com/fwlink/?LinkID=77296

Setelah selesai menginstall ASP AJAX Extention, lakukan step2 berikut untuk installasi AJAX Control Toolkits

1. Download source AJAX Control Toolkits – http://www.asp.net/ajax/downloads/
2. Extract data hasil download
3. Open folder hasil extract
4. Cari file AjaxControlToolkit.SLN  dan buka file tersebut dengan Visual studio 2005

AJAX Toolkits

5. Setelah project terbuka pada Visual Studio lakukan BUILD untuk templateVSI, hal ini untuk membuat VSI file installasi

AJAX Toolkits

6. Setelah build selesai maka akan terbentuk file AjaxControlExtender.VSI pada folder [Drive]:\…\AjaxControlToolkit\TemplateVSI\bin\ dimana source tersebut berada

AJAX Toolkits

9. Setelah tombol NEXT ditekan akan muncul windows baru seperti gambar dibawah, sebagai konfirmasi installasi kita cukup menekan tombol FINISH dan proses installasi component akan dilakukan oleh VisualStudio 2005.

Ajax Toolkits

10. Jika tidak ada masalah dalam proses installasi maka setelah selesai akan muncul windows form hasil proses seperti gambar berikut.

AJAX Toolkits

11. Sampai disini AJAX Control Toolkits telah selesai terinstall pada Visual Studio 2005, dan kita bisa mulai mengunakannya.

12. Buka visual studio 2005, pilih menu FILE –> NEW –> Web Site…

AJAX Toolkits

13. Pada form New Web Site pilih ASP.NET AJAX Control Toolkits website kemudian tekan tombol OK

AJAX Toolkits

14. Selanjutnya akan terbentuk beberapa file berikut pada Visual Studio Solution Explorer

AJAX Toolkits

15. Selanjutnya bukalah file Default.aspx yang terdapat pada Solution Explorer, dan perhatikan Toolbox yang terdapat pada visual studio 2005. Disana belum terlihat adanya component AJAX Control toolkits yang ingin kita gunakan, untuk menambahkannya click kanan pada area dibawah TAB General dan pilih ADD TAB.

AJAX Toolkits

16. Setelah Tab baru terbentuk berinama AJAX Control Toolkits (atau bisa digunakan nama lain sesuai keinginan)

AJAX Toolkits

17. Setelah selesai memberi nama pada TAB baru tersebut click kanan pada Area kosong dibawahnya dan pilih Choose Item …

AJAX Toolkits

18. Pada window form Choose Toolbox Item yang muncul click tombol browse untuk memanggil file .DLL milik AJAX Control Toolkits.

AJAX Toolkits

19. Kemudian cari file AJAXControlToolkits.dll yang secara default berada pada folder [Drive]:\…\AjaxControlToolkit\SampleWebSite\Bin\

AJAX Toolkits

20. Setelah add file .DLL tersebut component AJAX akan tampil pada toolbox yang baru dibuat sebelumnya dan siap di pake digunakan.

AJAX Toolkits

Related posts:

1. Error installasi Visual Studio 2008 di Vista
2. MX AJAX – Dreamwaver plugin
3. AJAX – Asynchronous JavaScript And XML (PART 1)

ajax-class

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

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

Related posts:

1. AJAX – Asynchronous JavaScript And XML (PART 1)
2. AJAX – Asynchronous JavaScript And XML (PART 2)
3. MX AJAX – Dreamwaver plugin

Sedikit penjelasan singkat XML
- XML merupakan singkatan dari eXtensible Markup Language.
- XML merupakan Tag base sintaks.
- Data XML dapat sebagai Datasource kecil dalam melakukan pertukaran informasi.
- Lebih lengkap tentang XML bisa di lihat pada link berikut ini : http://www.w3.org

Pada AJAX pengunaan format XML digunakan dalam pengembalian data dari server atau data respon dari server atas request yang di lakukan user dari browser, berikut gambaran proses Request dari browser dan Respon dari server.

Ajax Diagram

Setelah menerima Respon data XML dari server selanjutnya kita hanya perlu membaca data XML tersebut dan melakukan pemformatan data tersebut. Pada contoh berikut akan dibuat pemformatan data dengan menanfaatkan DOM dengan Javascript.

Sample Data XML yang akan di berikan server pada contoh ini sebagai berikut :

<xml id="coreQuick">
 <coreQuick>
 <quicknews>
 <id>1</id>
 <title>Quick news pertama</title>
 <sender>JerryPeter</sender>
 <date>2006-07-30</date>
 <time>19:20:19</time>
 <info>
 Ruangkecil.Or.id, pemanfaatan AJAX
 dalam pengembangan web application
 </info>
 </quicknews>
 </coreQuick>
</xml>

Ajax Demo

Format ini digunakan untuk melakukan format data Quick news pada Ruangkecil ini.

Dari contoh data XML tersebut terdapat hanya terdapat 1 buat info Quick news yang didalamnya terdapat beberapa element berikut (Id, Title, Sender, Date, Time dan Info), dari format XML tersebut akan di lakukan pemformatan data seperti pada gambar disamping.

Untuk melakukan pemformatan data akan di lakukan pada bagian block function setelah pengiriman respon dari server telah selesai di download (readyState=4).

Halaman sample demo bisa di lihat disini.

Pengunaan Javascript dalam melakukan formating data dengan DOM adalah sebagai berikut :

function createFormat(){
	document.getElementById("divContent").innerHTML=
	"<div align='center'>Menunggu Respon server</div>";
	if (oRequest.readyState == 4) {
		// baca data respon dari server
		var xmlData = oRequest.responseXML;
		var coreQuick = xmlData.getElementsByTagName("quicknews");

		// Loop data XML yang ada
		for (var i=0; i < coreQuick.length; i++){
			var currentQuick = coreQuick[i];

			// Create main Quick News data
			var newQuick = document.createElement("div");
			newQuick.setAttribute("className", "quickNews")
			newQuick.setAttribute("class", "quickNews");

			// Ambil data title dari  XML data
			var newTitle = document.createElement("div");
			newTitle.setAttribute("className", "title");
			newTitle.setAttribute("class", "title");

			var titleStr = document.createTextNode(
			    currentQuick.getElementsByTagName("title")[0].firstChild.data);
			newTitle.appendChild(titleStr);

			// Ambil data sender dari XML data
			var newSender = document.createElement("div");
			newSender.setAttribute("className", "sender");
			newSender.setAttribute("class", "sender");
			var senderStr = document.createTextNode("Pengirim: " +
                 currentQuick.getElementsByTagName("sender")[0].firstChild.data);;
			newSender.appendChild(senderStr);

			// Ambil data Tanggal dari XML
			var newDate = document.createElement("div");
			newDate.setAttribute("className", "date");
			newDate.setAttribute("class", "date");
			var dateStr = document.createTextNode("Tanggal kirim: " +
                  currentQuick.getElementsByTagName("date")[0].firstChild.data);
			newDate.appendChild(dateStr);

			// Ambil data Info quick news dari XML data
			var newInfo = document.createElement("div");
			newInfo.setAttribute("className", "info");
			newInfo.setAttribute("class", "info");
			var infoStr = document.createTextNode(
			     currentQuick.getElementsByTagName("info")[0].firstChild.data);
			newInfo.appendChild(infoStr);

			// Final proses formating data yang akan di tampilkan
			newQuick.appendChild(newTitle);
			newQuick.appendChild(newInfo);
			newQuick.appendChild(newSender);
			newQuick.appendChild(newDate);

			// Append data quick news kedalam Div content yang telah di persiapkan
			document.getElementById("divContent").appendChild(newQuick);
			}
		}
	}
}

Penjelasan function diatas
Pada bagian awal function terdapat script untuk memberikan pesan selama proses loading dan formating data belum selesai dilakukan, berikut pesan yang akan di tampilkan:

<span class="script">document.getElementById("divContent").innerHTML= "<div align='center'>Menunggu Respon server</div>";</span>

Setelah data XML selesai diterima, proses pembacan data dilakukan dengan mengunakan script berikut:

<span class="script">var xmlData = oRequest.responseXML; </span>

Disini digunakan responeXML bukan mengunkan responseText seperti pada contoh sebelumnya, hal ini digunakan karena format data yang diterima kali ini berupa XML data.
Hal ini juga agar browser memperlakukan data hasil respon dari server sebagai data XML sehingga nantinya dapat dilakukan parsing dengan mengunakan function2 parsing XML dengan DOM.
Hasil respon yang di dapat akan di tampung kedalam sebuah variable object xmlData, selanjutnya variabel xmlData ini akan berisi data XML hasil respon dari server.

Script berikutnya adalah membaca semua Element (tag) dengan nama”quicknews” dan menampungnya kedalam variabel coreQuick.
Sampai disini semua Group element dengan nama quicknews telah di tampung pada variable coreQuick dan kita dapat membaca-nya satu persatu untuk dilakukan formating data.

<span class="script">var coreQuick = xmlData.getElementsByTagName("quicknews"); </span>

Untuk pembacaan masing-masing data quicknews akan dilakukan Loop sebanyak jumlah Element quicknews terdapat pada file data XML yang diterima, untuk mengetahui jumlah Element quicknews yang ada di gunakan sintaks berikut :

<span class="script">coreQuick.length</span>

Setiap kali loop quickNews dibaca akan dibuat variable penampung data aktif yang sedang dibaca dengan mengunakan script berikut :

<span class="script">var currentQuick = coreQuick[i];</span>

Berikutnya dibuat sebuah DIV baru untuk masing-masing quick news yang ada, dengan menambahkan 2 attribute kedalam DIV tersebut, attribut ini nantinya akan di link dengan file CSS.
Digunakan 2 attribute (className dan class) agar pembuatan link format CSS dapat dibaca pada IE browser dan Non IE browser.

<span class="script">// Create main Quick News data
var newQuick = document.createElement("div");
newQuick.setAttribute("className", "quickNews");
newQuick.setAttribute("class", "quickNews"); </span>

Catatan:
- IE mengunakan attribute className
- Non IE mengunakan attribute class

Langkah selanjutnya adalah meng-extract data masing2 quicknews kedalam object data (newTitle, newInfo, newSender dan newDate) dengan mengunakan script berikut :

<span class="script">// Ambil data title dari  XML data
var newTitle = document.createElement("div");
newTitle.setAttribute("className", "title");
newTitle.setAttribute("class", "title");
var titleStr = document.createTextNode(
currentQuick.getElementsByTagName("title")[0].firstChild.data);
newTitle.appendChild(titleStr);

// Ambil data sender dari XML data
var newSender = document.createElement("div");
newSender.setAttribute("className", "sender");
newSender.setAttribute("class", "sender");
var senderStr = document.createTextNode( "Pengirim: " +
currentQuick.getElementsByTagName("sender")[0].firstChild.data);
newSender.appendChild(senderStr);

// Ambil data Tanggal dari XML
var newDate = document.createElement("div");
newDate.setAttribute("className", "date");
newDate.setAttribute("class", "date");
var dateStr = document.createTextNode( "Tanggal kirim: " +
currentQuick.getElementsByTagName("date")[0].firstChild.data);
newDate.appendChild(dateStr);

// Ambil data Info quick news dari XML data
var newInfo = document.createElement("div");
newInfo.setAttribute("className", "info");
newInfo.setAttribute("class", "info");
var infoStr = document.createTextNode(
currentQuick.getElementsByTagName("info")[0].firstChild.data);
newInfo.appendChild(infoStr);</span>

Mulai2 akan dibuat DIV untuk masing-masing element, kemudian menambahkan attribute className dan class untuk link kedalam file format CSS, seteleh selesai dilakukan pengambilan data masing2 element dengan script berikut :

<span class="script">var senderStr = document.createTextNode("Pengirim: " +
  currentQuick.getElementsByTagName("sender")[0].firstChild.data);</span>

Berikutnya kita tinggal melakukan formating peletakan informasi yang sudah di data pada proses diatas kedalam format yang kita perlukan, script melakukan formating adalah sebagai berikut :

<span class="script">newQuick.appendChild(newTitle);
newQuick.appendChild(newInfo);
newQuick.appendChild(newSender);
newQuick.appendChild(newDate); </span>

Title dibagian atas, di ikuti dengan Informasi quick news, Pengirim dan juga Tanggal kirim.

Sampai disini semua object class yang telah di bentuk masih dalam posisi Onthefly object dan belum di tambahkan kedalam lokasi content yang telah di perisapkan sebelumnya pada Document file HTML.
Untuk menambahkan kedalam struktur data HTML yang ada digunakan script pada bagian berikut, pada contoh ini DIV dengan nama divContent merupakan lokasi penempatan data2 quick news yang sedang di format.

<span class="script">document.getElementById("divContent").appendChild(newQuick); </span>

Selesai dari loop dan function diatas data2 XML telah di parsing dan di format, dan berikutnya tinggal membuat file CSS sesuai keperluan untuk merapihkan data XML yang ada.

Contoh hasil bisa di lihat disini.
Dan source code lengkap bisa di download disini.

Related posts:

1. AJAX – Asynchronous JavaScript And XML (PART 1)
2. AJAX – Asynchronous JavaScript And XML (PART 3)
3. Minishowcase: PHP dan Javascript photo gallery

Ajax Diagram

Istilah AJAX technology belakangan ini sering terdengar dalam pengembangan aplikasi web, berikut sedikit gambaran tentang AJAX dan cara memanfaatkannya dalam pengembangan web.
AJAX pertama kali di perkenalkan oleh Jesse James Garrett pada tulisannya yang berjudul AJAX: A New Approach To Web Applications.
AJAX bukan merupakan bahasa pemrograman baru, namun hanya sebuah tehnik pemanfaatan Javascript dalam mengontrol class object XMLHttpRequest untuk me-Refresh / mengupdate content dalam halaman web tanpa melakuan Reload keseluruhan halaman web seperti pada Metoede Tradisional, AJAX sendiri merupakan singkatan dari “Asynchronous JavaScript And XML”.

Kelebihan utama AJAX sendiri terletak pada pemanfaatan class object XMLHttpRequest untuk berkomunikasi dengan Web Server dalam melakukan request content, berikut pengunaan Javascript dalam membuat class object XMLHttpRequest :

Untuk membuat class object pada browser Firefox, Safari, IE7, Mozila, dsb gunakan sintaks berikut:

oAJAX = new XMLHttpRequest();

Untuk membuat class object pada browser IE versi terbaru.

oAJAX= new ActiveXObject('MSXML2.XMLHTTP');

Untuk membuat class object pada browser IE versi lama.

oAJAX = new ActiveXObject('Microsoft.XMLHTTP');

Untuk dapat berjalan pada semua browser (Cross Browser), kita dapat mengabungkan kesemua script tersebut kedalam sebuah function pembuat class object XMLHttpRequest seperti berikut :

function createRequest(){
 var oAJAX = false;
 /*@cc_on @*/
 /*@if (@_jscript_version >= 5)
 try {
 	oAJAX = new ActiveXObject("Msxml2.XMLHTTP");
 } catch (e) {
 try {
	 	oAJAX = new ActiveXObject("Microsoft.XMLHTTP");
	 } catch (e2) {
	 	oAJAX = false;
	 }
 }
 @end @*/

 if (!oAJAX && typeof XMLHttpRequest != 'undefined') {
 	oAJAX = new XMLHttpRequest();
 }
 if (!oAJAX){
	 alert("Error saat membuat XMLHttpRequest!");
 }else{
 	alert("XMLHttpRequest sukses dibuat!");
 }
	 return oAJAX;
 }

Mula-mula function diatas akan mencoba membuat class object XMLHttpRequest dengan sintaks IE versi terbaru, jika gagal maka akan di coba mengunakan sintaks pd IE versi sebelumnya jika masih gagal maka akan di coba mengunakan sintaks pembuatan pada browser Mozila, Firefox dsb.
Dengan pengabungan diatas di pastikan class object XMLHttpRequest akan terbentuk dan function akan mengembalikan class object yang telah berhasil dibuat.

Untuk view example demo click disini

Setelah object XMLHttpRequest terbentuk selanjutnya kita dapa menanfaatkan object tersebut untuk berkomunikasi dengan server, berikut contoh pemanfaatan class object XMLHttpRequest untuk meminta content data dari server.

Untuk merequest data dari server pada contoh berikut di gunakan function requestContent yang akan di panggil saat sebuah link di click, detail script function yang digunakan seperti berikut :

function requestContent(){
	oRequest = createRequest();
	var url = "dataLoad.html";

	// Buka komunikasi dengan server
	oRequest.open("GET", url, true);

	// menunggu respon dari server
	// jika sudah di dapat respon dari server, maka hasil respon akan di tampilkan pada DIV dengan ID='divContent'
	oRequest.onreadystatechange = function () {
	document.getElementById("divContent").innerHTML="<div align='center'>Menunggu Respon server</div>";
	if (oRequest.readyState == 4) {
		// baca data respon dari server
		var response = oRequest.responseText;
			document.getElementById("divContent").innerHTML = response;
		}
	}

	oRequest.send(null);
}

Function diatas pertama kali akan membuat class object XMLHttpRequest dengan memanfaatkan function createRequest() yang ada sebelumnya, hasil pembuatan object akan di tampung kedalam variabel object oRequest.

setelah object XMLHttpRequest terbentuk, berikut akan dilakukan komunikasi dengan request dengan server untuk meminta data dari file dataLoad.html dengan GET method.

Sintaks open request sebagai berikut :

oXML.open(<method>, <URL_file>, <async_status>);

parameter: - methode : POST atau GET – url_file : lokasi URL file yang akan di request – async_status : TRUE atau FALSE Catatan Asynchronous status: Status TRUE : Javascript akan melanjutkan proses secara normal sementara menunggu respon dari server diterima Status FALSE: akan menunggu hingga respon dari server, selama respon belum di dapat proses yang ada berikutnya akan di hold hingga respon dari server di terima. Setelah melakukan request kepada server function akan menunggu respon dari server

oRequest.onreadystatechange;

selama menggu respon dari server script pd function berikut akan dijalankan

document.getElementById("divContent").innerHTML="<div align='center'>Menunggu Respon server</div>";
if (oRequest.readyState == 4) {
 // baca data respon dari server
 var response = oRequest.responseText;
 document.getElementById("divContent").innerHTML = response;
 }
}

ReadyState status:
0: uninitialized –> Open status belum dijalankan
1: loading –> Status request belum di jalankan
2: loaded –> Status request sudah di kirimkan, dan menunggu respon dari server.
3: interactive –> Respon dari server sedang dalam proses download.
4: completed –> Respon data dari server telah selesai di download.

Function akan menunggu hingga status respon dari server oRequest.readyState == 4, nilai 4 tersebut berarti respon telah selesai diberikan oleh server, setelah respon selesai di kirimkan hasil respon di tampung kedalam variabel bernama response, proses menampung data respon ini mengunakan sintaks berikut :

var response = oRequest.responseText;

Dan selanjutnya data hasil respon di tampilkan pada div dengan nama “divcontent” yang telah di persiapkan sebelumnya, untuk menampilkan hasil respon ini mengunakan bantuan DOM (document object model) berikut :

document.getElementById("divContent").innerHTML = response;

Untuk view example demo click disini

Sampai disini baru terlihat pemanfaatan Javascript dalam mengunakan object XMLHttpRequest saja, data yang di berikan oleh server masih berupa file content statis dan belum memanfaatkan XML data respon.

Semua file contoh ini dapat di download disini

Related posts:

1. AJAX – Asynchronous JavaScript And XML (PART 3)
2. AJAX – Asynchronous JavaScript And XML (PART 2)
3. MX AJAX – Dreamwaver plugin

Untuk lebih mencoba mengunakan MX-AJAX ini bisa mendownload langsung dari link berikut ini : http://www.interaktonline.com/go/mxajaxtoolbox

mx-ajax-toolbox

Related posts:

1. Installasi AJAX Toolkits pada Visual Studio 2005
2. AJAX – Asynchronous JavaScript And XML (PART 1)
3. AJAX – Asynchronous JavaScript And XML (PART 2)

ruangkecil

YUI merupakan Script AJAX open source dari Yahoo, semua script pendukung pembentuk class YAHOO untuk pembuatan Rich Internet Application disertakan dalam versi opensource yang bisa di download langsung pada WWW.YUIBLOG.COM atau pada developer.yahoo.com.
Berbeda dengan backbase semua script pada YUI ini bener2 opensouce, kita bisa melihat halaman demo pada file hasil download yang ada, semua contoh pengunaan Class juga disertakan berikut dengan dokomuntasi masing2 class yang ada.

Setelah gue mencoba pada local server ternyata sangat mudah mengunakan component-component dari YUI ini, kita cukup meng-include file2 javascript yang ada dan kemudian membuat dan memanggil class yang ingin digunakan.

Untuk info lengkap dan lebih detail silakan meilihat pada developer.yahoo.com.

Related posts:

1. AJAX – Asynchronous JavaScript And XML (PART 2)
2. AJAX – Asynchronous JavaScript And XML (PART 1)
3. Backbase