Pengenalan Ajax

Ajax merupakan teknologi baru dalam dunia pengembangan web yang menyediakan interface yang interaktif di dalam tubuh sebuah halaman web. Banyak orang kurang mengerti bagaimana sebenarnya ajax itu, termasuk saya dulunya. Saya ingin berbagi pemahaman dengan para pembaca sekalian. Mungkin uraian saya dapat bermanfaat bagi para pembaca yang ingin tahu tentang Ajax.

Contoh kerja yang sederhana dapat dilihat pada gambar yang akan ditampilkan melalui web snap berikut. Perhatikan gambar-1.jpg, bagian yang ditandai merupakan bagian yang difokuskan untuk berganti. kemudian pengguna menekan tombol next. Kemudian pada gambar-2.jpg, bagian yang ditandai tersebut berganti ke berita selanjutnya tanpa ada refresh atau pergantian halaman seluruhnya. Otomatis itu akan menghemat bandwidth dan pastinya lebih efisien, tanpa melihat halaman kosong tanpa isi.

Ajax dapat digunakan untuk menampilkan RSS Feed pada Web, laporan, search engine (contoh Google Suggest) dan banyak lainnya.Ajax mempunyai bentuk berupa suatu sistem yang terdiri dari halaman utama dengan memasukkan kode Ajax yang ditulis dengan bahasa pemograman Javascript & pada halaman yang akan di-load dikolaborasikan dengan script (bahasa pemograman) yang dinamic seperti PHP, ASP, dan lain-lain. Sistem Ajax dimana halaman yang akan di-load disertai script PHP disebut dengan SAjax atau PAjax. Anda dapat mencoba sendiri kerjanya. Contoh sederhana ini berasal dari www.degraeve.com, tetapi berhubung karena halaman yang lebih dalam sukar untuk ditemukan maka tidak ada salahnya mencobanya sendiri. Tetapi anda dapat mencarinya di google search. Untuk mencobanya di komputer anda paling tidak terinstallnya Web Server “Apache”, karena kali ini kita akan menggunakan script PHP di halaman yang akan di-load.
Kopi kode berikut, lalu simpan sebagai index.html php di tempat penyimpanan web server, ini akan menjadi halaman utama:
———————————————————————————————

<html><head><title>Simple Ajax Example</title>

<script language=”Javascript”>

function xmlhttpPost(strURL)

{var xmlHttpReq = false;

var self = this;

// Mozilla/Safari

if (window.XMLHttpRequest) {

self.xmlHttpReq = new XMLHttpRequest();

}

// IE

else if (window.ActiveXObject) {

self.xmlHttpReq = new ActiveXObject(“Microsoft.XMLHTTP”);

}

self.xmlHttpReq.open(’POST’, strURL, true);

self.xmlHttpReq.setRequestHeader(’Content-Type’, ’application/x-www-form-urlencoded’);

self.xmlHttpReq.onreadystatechange = function() {

if (self.xmlHttpReq.readyState == 4) {

updatepage(self.xmlHttpReq.responseText);

}

}

self.xmlHttpReq.send(getquerystring());

}

function getquerystring() {

var form = document.forms[’f1’];

var word = form.word.value;qstr = ’w=’ + escape(word); /* NOTE: no ’?’ before querystring, define w as query string*/

return qstr;

}

function updatepage(str){

document.getElementById(“result”).innerHTML = str;

}

</script></head>

<body><form name=”f1″>

<p>word: <input name=”word” type=”text”><input value=”Go” type=”button” onclick=’JavaScript:xmlhttpPostajax.php”)’></p><div id=”result”></div>

</form></body></html>

===================================================

Lalu kopi kode berikut lalu simpan sebagai ajax.php. Ini akan menjadi halaman yang akan di-load :

————————————————————————————–

<?php$secretword = $_GET(‘w’);

 $remotehost = “localhost”;

print “<p>he secret word is <b>$secretword</b> and your IP is <b>$remotehost</b>.</p>”;

?>

=========================================================

Lalu buka di web browser, ketik localhost/ atau localhost/(folder tempat anda menyimpannya. Umumnya seperti itu.

Walaupun Ajax merupakan singkatan dari Asyncronous Javascript and XML, ia tidak harus selalu menggunakan XML seperti bagaimana namanya. Prinsip kerjanya hanyalah ia hanya akan memakai salah satu fitur web browser yang memang menjadi syarat khususnya yaitu XMLHttpRequest(untuk Mozilla/Safari) atau XMLHttp(untuk IE), keduanya dapat dikatakan sebagai HttpRequest. Dapat anda lihat listing script di atas. Javascript mendeklarasikan/membentuk HttpRequest pada halaman utama. HttpRequest akan bekerja secara background. Melalui HttpRequest, dilakukan pengiriman permintaan ke web server, umumnya disertai query(variabel yang dapat dijadikan sebagai sumber olahan data). Halaman yang diminta dapat berupa script PHP, ASP, CGI atau script server-side lainnya. Pengolahan halaman yang diminta di Server menghasilkan halaman web yang sesuai dengan permintaan atas query-nya, lalu di-load di bagian yang diinginkan dari halaman utama, umumnya di-load ke tag ‘<div>’ dengan id tertentu pada listing script html-nya. Sebenarnya untuk membuat Ajax tidak harus melalui HttpRequest, saya pernah melihat bentuk Ajax tanpa menggunakan HttpRequest yaitu di blog http://cha.homeip.net/blog/archives/2006/07/ajax_sample.html  Akan tetapi menurut saya sangat sulit memahami contoh Ajax yang diberikan oleh blog tersebut.

Pengembangan selanjutnya terserah kepada anda. Untuk kritik dan saran, saya tunggu. Selamat Mencoba. (from ICT SMANSa Member : rizkivmaster)

Posted on Saturday, 29 December 2007, in Artikel, Internet, Komputer, Web and tagged , , , , , . Bookmark the permalink. 3 Comments.

  1. No more lies in tha trust
    Semoga bermanfaat bagi anda.

  2. Soon, this article will be translated into English. For the global orders

  3. goood…aku sangat berterikash banget ya………?

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: