Skip navigation


XML HTTP Request atau sering disingkat XHR adalah sebuah object pada API Javascript yang dapat dipakai untuk melakukan HTTP Request secara asynchronous yakni melakukan HTTP Request tanpa perlu melakukan page loading. Berikut contoh pemakaian XHR

Untuk kode client-sidenya

<html>
	<head>
		<script type="text/javascript" languange="javascript" src="test1.js"></script>
	</head>
	<body>
		<button id="button1" onclick="testAjax()">Test</button>
	</body>
</html>

Pada kode di atas halaman akan mengeksekusi fungsi testAjax setiap kali tombol button1 ditekan.

Kode Javascriptnya

/* Objek AJAX yang akan digunakan */
var xmlHttp;

/* Inisialisasi AJAX */
initAjax();

/* Inisialisasi AJAX */
function initAjax()
{
	try
	{
		// Firefox, Opera 8.0+, Safari
		xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		// Internet Explorer
		try
		{
			xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e)
		{
			try
			{
				xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e)
			{
				alert("Your browser does not support AJAX!");
				return false;
			}
		}
	}
}

/* Test AJAXnya */
function testAjax()
{
	var url = "test1.php";
	xmlHttp.onreadystatechange = function () {
			if (xmlHttp.readyState==4)
			{
				alert(xmlHttp.responseText);
			}
		};
	xmlHttp.open("GET", url, true);
	xmlHttp.send(null);
}

Pada kode di atas ada 2 buah fungsi yakni initAJAX dan testAJAX. Fungsi initAJAX akan menginisiasi object XHR yang bernama xmlHttp berdasarkan browser yang digunakan. Selanjutnya fungsi testAJAX akan mencoba melakukan request.

Request akan dilakukan pada fungsi callback yang diassign pada atribut onreadystatechange.

Di callback tersebut state dari XHR akan dicek

  • 0. Request belum diinisialisasi.
  • 1. Request belum dilakukan.
  • 2. Request sudah terkirim.
  • 3. Request sedang diproses.
  • 4. Request sudah selesai.

Pada kode di atas, saat request statenya sudah bernilai 4 maka script akan menampikan kembalian dari server script. Biasanya sering ditambahkan penanganan state 2 untuk menampilkan progress bar.

Method open bertugas untuk menspesifikkan HTTP Request yakni methodnya (POST, GET, dll), URLnya, dan argumen terakhir menandakan apakan request harus ditangani secara asynchronous.

Kode PHPnya sederhana saja

<?php
	echo "TEST";
?>

Jika kode PHP di atas dijalankan secara biasa maka akan ditampilkan “TEST”. Sedangkan pada AJAX ini nanti string yang dikembalikan akan disimpan pada atribut responseText pada XHR.

Kode penuhnya bisa didonlot di sini (extension diganti ke zip)

One Trackback/Pingback

  1. By AJAX-JSON « Males Koding on 06 Apr 2009 at 9:10 am

    […] Top Posts File DescriptorKomunikasi Modul Kernel – User Space Program melalui procfsTOKI : Pengenalan C/C++ – GCC, MinGW, DevC++Sistem TerdistribusiSimple ORM di PHPAboutSmiley di PHPXML HTTP Request […]

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: