1. Properti atau Atribut
Berikut adalah Properti dari objek XMLHttpRequest :
Property Description
constructor : Menghasilkan referensi ke constructor suatu objek.
readyState : Mengambil state saat ini dari suatu request.
responseBody : Mengambil response body sebagai suatu array.
responseText : Mengambil response body sebagai suatu string.
responseXML : Mengambil response body sebagai suatu XML Document Object Model (DOM) object.
Status : Mengambil kode status HTTP dari suatu request.
StatusText : Mengambil status friendly HTTP dari suatu request.
Timeout : Mendapatkan atau men-set nilai time-out.
Berikut adalah Events dari objek XMLHttpRequest :
Event Description
Onreadystatechange : Men-set atau mengambil event handler untuk suatu request asinkron.
Ontimeout : Akan terpanggil ketika ada eror timeout.
Berikut adalah Metode dari objek XMLHttpRequest :
Method Description
Abort : Meng-cancel HTTP request.
GetAllResponseHeaders : Menghasilkan daftar komplet dari respon headers.
GetResponseHeader : Menghasilkan respon header yang dispesifikkan.
Open : Meng-assign metode, URL tujuan , atribut lainnya dari request yang akan dikirim.
Send : Mengirim HTTP request ke server dan menerima suatu respons.
SetRequestHeader : Menambah HTTP headers yang disesuaikan ke request.
readyState
Syntax
object.readyState == nState
Nilai
nState : Nilai dari readyState berupa integer, yaitu :
0 (Uninitialized) Objek sudah dibuat, tapi belum diThe object has been created, tetapi tidak diinisialisasi (metode open belum dipanggil).
1 (Open) Objek sudah dibuat, tetapi metode send belum dipanggil.
2 (Sent) Metode send sudah dipanggil. responseText dan responseBody belum bisa dipanggil.
3 (Receiving) Beberapa data sudah diterima. responseText dan responseBody belum bisa dipanggil.
4 (Loaded) Semua data sudah diterima. responseText dan responseBody sudah bisa dipanggil.
readyState bersifat read-only, tidak memiliki nilai default.
Catatan
Kamu tidak bisa memanggil properti responseBody dan responseText untuk mendapat hasil dari
suatu request yang kita kirim. Jika memanggil responseBody atau responseText akan
menghasilkan error, karena respons belum diterima secara keseluruhan. Kita harus menunggu
sampai semua data diterima (readyState == 4). readyState diperkenalkan di Internet Explorer 7.
Contoh :
function stateChanged(){
var data;
if (ajaxku.readyState==4){
data=ajaxku.responseText;
}
}
status
Syntax
object.status == nStatus
Nilai
nStatus Kode status HTTP yang diterima berupa Integer.
NI Description
100. Continue
101. Switching protocols
200. OK
201. Created
202. Accepted
203. Non-Authoritative Information
204. No Content
205. Reset Content
206. Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported
status bersifat read-only, tidak memiliki nilai default. status diperkenalkan di Windows Internet
Explorer 7.
Contoh :
if (ajaxku.status == 401)
alert('Access denied.');
else
alert(ajaxku.responseText);
}
timeout
Syntax
object.timeout = v
Nilai
V. Berupa Integer milliseconds berapa lama batas browser menunggu respon dari server.
timeout bersifat read/write, nilai defaultnya adalah 0.
Catatan
Jika periode period time-out sudah habis, responseText akan bernilai null. Kita harus men-set
nilai time-out lebih lama dari dugaan waktu respon dari request kita. Properti timeout hanya di-
set di antara ketika memanggil metode open dan medote send.
Jika anda men-set nilai XMLHttpRequest time-out lebih besar dari pada nilai time-out network
ketika stack, network stack akan muncul pertama kali dan ontimeout event tidak akan pernah
terpanggil.
Contoh
var ajaxku;
ajaxku = new XMLHttpRequest();
ajaxku.open("GET", url, true);
ajaxku.timeout = 10000;
ajaxku.ontimeout = timeoutPeringatan;
ajaxku.send(null);
onreadystatechange Event
Syntax
Object.onreadystatechange onreadystatechange onreadystatechange = fungsi_yang_menangani
Catatan
onreadystatechange event telah diperkenalkan di Windows Internet Explorer 7.
Contoh
var ajaxku = new XMLHttpRequest();
ajaxku.onreadystatechange = reportStatus;
ajaxku.open("GET", "http://localhost/test.xml", true);
ajaxku.send();
function reportStatus()
{
if (ajaxku.readyState == 4 /* complete */) {
if (ajaxku.status == 200 || ajaxku.status == 304) {
alert('Transfer complete.');
}
else {// terjadi error
}
}
}
ontimeout Event
Syntax
Objek.ontimeout = fungsi_yang_menangani
Catatan
ontimeout event terjadi jika periode timeout lewat sebelum onload event terjadi.
Ketika ontimeout event terjadi, properti responseText tidak tersedia dan kalau kita mencoba
meng-aksesnya akan terjadi error.
Contoh
<script type="text/javascript">
function timeo()
{
alert("XDR ontimeout");
}
...
ajaxku.ontimeout = timeo;
abort Method
Cancel HTTP request.
Syntax
XMLHttpRequest.abort()
Catatan
abort telah diperkenalkan di Windows Internet Explorer 7.
Metode abort men-cancel atau meng-interupsi operasi HTTP Request asinkron yang sedang
terjadi. Memanggil metode abort akan mereset objek. onreadystatechange event juga di-cancel,
dan readyState di-ubah ke 0 (uninitialized).
open Method
Meng-assign metode, URL tujuan , atribut lainnya dari request yang akan dikirim.
Syntax
object.open(sMethod, sUrl [, bAsync] [, sUser] [, sPassword])
Parameters
sMethod : Wajib. String yang menentukan metode HTTP digunakan untuk membuka koneksi:
seperti GET, POST, atau HEAD. Tidak case-sensitive.
sUrl : Wajib. String yang menentukan absolut atau relative URL dari server-side web
programming/services atau data XML data.
bAsync : Optional. Variant yang menentukan true untuk operasi asynchronous (hasil segera
diberikan, tidak perlu menunggu respon dari server, sehingga pengguna dapat terus
memasukkan data, bergulir sekitar, dan menggunakan aplikasi), atau false untuk
operasi synchronous. Jika tidak ditentukan maka defaultnya adalah true.
Jika anda memberikan nilai false, Operasi send adalah synchronous, dan Windows
Internet Explorer tidak menerima input atau menghasilkan output ketika operasi send
sedang berjalan.
sUser : Optional. Variant untuk mentukan nama user untuk proses auntentikasi.
sPassword : Optional. Variant untuk menentukan password untuk proses auntentikasi.
Berikut adalah HTTP verbs dan metode World Wide Web Distributed Authoring and Versioning
(WebDAV) yang di-support:
send Method
Mengirim HTTP request ke server dan menerima respon.
Syntax
object.send( [varBody])
Parameters
varBody Optional. Variant yang menentukan body dari message request yang dikirim.
Metode send bisa synchronous atau asynchronous, tergantung dari nilai parameter varAsync di
metode open yang dipanggil.
Parameter varBody bisa berupa String, array of unsigned bytes, atau objek XML Document Object
Model (DOM).
setRequestHeader Method
Menambah HTTP headers yang disesuaikan ke request.
Syntax
object.setRequestHeader(sName, sValue)
Parameters
sName : Wajib. String yang menentukan nama header.
sValue : Wajib. String yang menentukan nilai header.
Contoh
var ajaxku = new XMLHttpRequest();
ajaxku.open("POST", sURL, false);
ajaxku.setRequestHeader("Content-Type", "text/xml");
ajaxku.send(sRequestBody);
Oke sekarang kita akan membuat aplikasi auto complete menggunakan ajax, di mana pada contoh
berikut kita akan membuat auto complete dari suatu database, pada contoh ini datanya berupa
nama negara-negara di dunia. Jika kita mengetik suatu huruf atau kata, maka otomatis akan
ditampilkan Negara yang memungkinkan diawali oleh huruf atau kata tersebut.
Pertama, mari kita buat table Negara, dengan struktur sebagai berikut :
-- Table structure for table `negara`
--
CREATE TABLE `negara` (
`nama` varchar(50) NOT NULL,
PRIMARY KEY (`nama`)
)
Kemudian isi dari table tersebut adalah nama-nama Negara seperti di bawah :
nama
Afghanistan
Amerika Serikat
Arab Saudi
Bahrain
Belanda
Brunei Darusalam
Chili
China
Filipina
Indonesia
Inggris
Jepang
Jerman
Korea Selatan
Korea Utara
Malaysia
Singapura
Thailand
Sekarang, mari kita buat kode HTML dan Ajax
Kode4. autonegara.html
<html>
<head>
<script>
var drz;
function lihat(kata){
if(kata.length==0){
document.getElementById("kotaksugest").style.visibility =
"hidden";
}else{
drz = buatajax();
var url="cari.php";
drz.onreadystatechange=stateChanged;
var params = "q="+kata;
drz.open("POST",url,true);
//beberapa http header harus kita set kalau menggunakan POST
drz.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
drz.setRequestHeader("Content-length", params.length);
drz.setRequestHeader("Connection", "close"); drz.send(params);
}
}
function buatajax(){
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
function stateChanged(){
var data;
if (drz.readyState==4 && drz.status==200){
data=drz.responseText;
if(data.length>0){
document.getElementById("kotaksugest").innerHTML = data;
document.getElementById("kotaksugest").style.visibility = "";
}else{
document.getElementById("kotaksugest").innerHTML = "";
document.getElementById("kotaksugest").style.visibility =
"hidden";
}
}
}
function isi(kata){
document.getElementById("kata").value = kata;
document.getElementById("kotaksugest").style.visibility = "hidden";
document.getElementById("kotaksugest").innerHTML = "";
}
</script>
</head>
<body>
<form>
<div>
<input type=text id=kata name=kata onkeyup=lihat(this.value)>
</div>
<div id=kotaksugest style="position:absolute;top:36;left:15;background-
color:lightblue;width:200;visibility:hidden;z-index:100">
</div>
<!--//sesuaikan posisi kotaksugest terhadap teksbox--->
</center>
</form>
</body>
</html>
Pada contoh di atas kita menggunakan metode POST untuk mengirim parameter-parameter ke
server.
drz.open("POST",url,true);
Beberapa Header harus kita set bila menggunakan metode POST, supaya program bisa berjalan
dengan baik
drz.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
drz.setRequestHeader("Content-length", params.length);
drz.setRequestHeader("Connection", "close");
Logikanya adalah sebagai berikut :
1. Setelah kita mengetik karakter atau setelah menekan keyboard (onkeyup) di input text,
maka langsung jalankan fungsi lihat()
2. Cek, apakah input text ada nilainya, jika kosong maka kita menyembunyikan kotaksugest,
jika ada nilainya, maka kita buat objek ajax dan mengirimkan request ke server.
3. Apabila request yang dikirim telah komplet dan OK, maka kita tampilkan di kotaksugest.
Sekarang mari kita buat kode di sisi server (cari.php), yang berfungsi untuk melakukan query
terhadap table Negara, dan menampilkan hasil query.
Kode 4. cari.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("test");
$kata = $_POST['q'];
$query = mysql_query("select nama from negara where nama like '$kata%'
limit 10");
while($k=mysql_fetch_array($query)){
echo '<li onClick="isi(\''.$k[0].'\');"
style="cursor:pointer">'.$k[0].'</li>';
}
?>
