“Better late than never”….

AJAX adalah…enough for the bulls***, read this

Untuk membuat program AJAX sederhana, kita butuh 2 file, dengan penjelasan sebagai berikut:

1. File yang menyediakan tempat untuk tampilan data dan trigger (javascript) untuk mengaktifkan AJAX. File ini kita beri nama “index.php”
2. File yang berisikan data yang akan ditampilkan. File ini kita beri nama “getberita.php”

Sebelumnya kita siapkan terlebih dahulu data di MySQL, buat database “berita”, dan ketikkan query dibawah ini:

[mysql]

CREATE TABLE `berita` (
`berita_id` int(11) NOT NULL auto_increment,
`berita_judul` varchar(255) default NULL,
`berita_tgl` datetime default NULL,
`berita_detail` text,
PRIMARY KEY (`berita_id`)
)

INSERT INTO `berita` VALUES (6746, ‘Auxerre Rekrut Tamas’, ‘2007-06-28 00:37:00′, ‘Klub papan tengah Ligue 1 AJ Auxerre kembali kedatangan pemain baru yakni palang pintu Gabriel Tamas yang didatangkan dari klub asal Rusia Spartak Moskow.\r\n Kepindahan pemain berusia 23 tahun ini saat ini belum rampung sepenuhnya dan akan segera diselesaikan setelah Tamas berhasil melewati sesi tes medis.\r\n\r\nAuxerre memang melakukan pembenahan dengan serius karena musim ini gagal meraih tiket ke Piala UEFA dan cuma finis di urutan kedelapan klasemen akhir Ligue 1.\r\n\r\nTamas merupakan pemain kelima yang didatangkan Auxerre setelah Tofilou Maoulida, Marcos Antonio, Kamel Chafni dan Jean-Marc Lesage.\r\n\r\n(Tho/Goal)\r\n’);
INSERT INTO `berita` VALUES (6747, ‘Arab Saudi Permalukan Singapura’, ‘2007-06-28 01:26:00′, ‘Arab Saudi semakin percaya diri menjelang bergulirnya Piala Asia setelah pada laga uji coba, Rabu (27/6), berhasil menang 2-1 atas tuan rumah Singapura, meski di babak kedua mereka harus bermain dengan 10 pemain. Bermain di kandang Singapura, Stadion National, Arab tidak gentar dan langsung bermain menyerang sehingga mampu melahirkan beberapa peluang emas.\r\n\r\nTak perlu menunggu lama, Arab sudah berhasil membuka skor melalui Abdulrahman Al Qahtani pada menit ke-26. Delapan menit kemudian Taiseer Al Jassam menggandakan skor menjadi 2-0.\r\n\r\nDua menit sebelum turun minum, Singapura memperkecil kedudukan melalui Shadin Shref.\r\n\r\nLima menit setelah jeda, Al Jassam mendapat kartu kuning kedua sehingga Arab harus bermain dengan 10 pemain. Untungnya hingga laga usai Singapura tak mampu menyamakan skor.\r\n\r\n”Saya senang dengan kemenangan ini. Kami bermain dengan 10 pemain pada babak kedua. Kami melawan tim yang tangguh,” pelatih Arab Helio Anjos.\r\n\r\nKemenangan ini menjadi modal berharga bagi Arab sebelum turun di Piala Asia. Pasukan Anjos ini tergabung di Grup B bersama Indonesia, Bahrain dan Korea Selatan.\r\n\r\n(Tho/Reuters) \r\n’);
INSERT INTO `berita` VALUES (6748, ‘Fulham Boyong Hughes’, ‘2007-06-28 02:34:00′, ‘Seolah tidak mau kalah dengan klub lain yang sudah memulai perburuan pemain, Fulham mendatangkan palang pintu Aaron Hughes dari Aston Villa. Hughes didatangkan dengan nilai transfer sebesar satu juta pound dan akan meneken kontrak bersama Fulham selama tiga musim. Hughes diharapkan mampu menutup lubang di lini belakang mereka\r\n\r\nMantan pemain Newcastle United ini merupakan pembelian pertama pelatih anyar Fulham Lawrie Sanchez, sejak terpilih melatih Liam Rosenior cs.\r\n\r\nKetertarikan Sanchez terhadap Hughes karena ia telah mengenal gaya bermain pemain berusia 27 tahun ini ketika masih menjadi pelatih Irlandia Utara.\r\n\r\n”Saya senang berhasil membawa Hughes ke Fulham. Saya mengetahui kualitas yang ia miliki. Saya gembira ia menjadi rekrutan pertama saya pada musim panas ini,” ujar Sanchez.\r\n\r\n(Tho/AFP)\r\n’);

[/mysql]

INDEX.php

Di file ini kita pasang javascript seperti berikut ini:

[js]

var url = “getberita.php?sid=”; // The server-side script
var ww = ”;
function handleHttpResponse() {
if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById(‘divInfo’+ww).innerHTML = results;
}
}
}

function requestBerita(evt) {
var sId = evt;
http.open(“GET”, url + escape(sId), true);
http.onreadystatechange = handleHttpResponse;
ww = evt
http.send(null);
}

function getHTTPObject() {
var xmlhttp;

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
if (!xmlhttp){
xmlhttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
}
return xmlhttp;
}

var http = getHTTPObject();

[/js]

pada kode diatas terdapat baris
[js]
if (http.readyState == 4) {
[/js]

Berikut adalah daftar nilai status readyState

* 0 (tidak diinisialisasi)
* 1 (dalam proses memuat)
* 2 (telah dimuat)
* 3 (interaktif)
* 4 (lengkap)

Pada baris Berikutnya
[js]
if(http.status==200) {
[/js]
adalah pemeriksaan kode status dari respon HTTP server. Daftar kode status respon HTTP dapat dilihat di situs W3C. Pada contoh kali ini hanya digunakan status 200 yaitu respon OK.

kemudian dilanjutkan dengan menuliskan kode di file yang sama

[php]

<a name=”" />

1. . <a href=”#” title=”" onclick=”document.getElementById(‘divInfo’).innerHTML = ‘ Loading…’; requestBerita()”>

   , wib

   <div id=”divInfo”>