Prototype framework dapat digunaka untuk mempermudah kita dalam menggunakan konsep Ajax. Disamping caranya yang simple, ia juga memudahkan kita menghandle semua event yang diberikan server.
Fungsi ajax pada prototype di wujudkan dalam sebuah kelas yaitu class Ajax. Dengan class ini kita bisa melakukan request secara asingkron ke server (xmlHttpRequest) tampa harus memikirkan perbedaan yang ada di browser. Sebuah request akan terjadi jika kira mengistans objec Ajax.Request .
1 | new Ajax.Request('url_kita', { method:'get' }); |
Ada dua parameter yang diperlukan, pertama URL request dan kedua adalah konfigurasi/option yang dibutuhkan. Jika tidak disebutkan maka akan diset default.
Keuntungan menggunakan prototype ini adalah:
- Kita tidak perlu pusing masalah perbedaan browser dan cara menginstan XHR
- Semua even sudah di handle oleh object ini, kita tinggal mendefinisikan callbacknya saja
Request life-cycle
Adapun urutan event yang terjadi pada object XHR adalah
Created -> Initialized -> Request sent -> Response reciving (menunggu sampe selesai)-> Response received Selesai
Sebuah object XHR akan di create dulu (di instance), setelah itu di inisialisasi(urlnya apa, methodnya gimana dll). Setelah di inisialisai baru request XHR dikirim. Setelah dikirim maka object XHR akan menunggu samapai semua respon terkirim dan selesai
Berikut ini table Opsi2 yang dapat digunakan:
| Option | Default Value | Keterangan |
|---|---|---|
| parameters | - | Parameter yang akan di passingkan ke server |
| method | Post | Metode request yang akan dipakai (Post atau Get) |
| contentType | application/x-www-form-urlencoded | Tipe content yang akan digunakan |
| encoding | UTF-8 | Tipe encoding Text yang aka digunakan |
| postBody | - | Parameter post yang akan dikirimkan jika kita mamakai method POST |
| requestHeaders | text | Disini kita bisa mengeset header header untuk proses request |
Berikut ini table keterangan masing-masing event handler
| Callback | Description |
|---|---|
| onCreate | Fungsi ini akan dipanggil ketika objek Ajax.Request di inisialisasi. |
| onComplete | Fungsi ini akan dipanggil ketika semua proses selesai dan semua event telah dipanggil dan di proses. |
| onFailure | Fungsi ini akan dipanggil jika pada proses request gagal (error code 400/500). Fungsi ini juga sama seperti onSuccess, memiliki parameter sebuah xmlHttpRequest Object yang merupakan output request. |
| onException | Fungsi ini juga akan dipanggil jika pada proses request gagal, tetapi perbedaanya denga onFailure adalah funsgi ini akan dipanggil jika error terjadi di sisi client dedangkan onFailure disisi server. |
| onInteractive | Dipanggil ketika koneksi XHR sudah dibuka, data request sudah dikirim, tetapi respon belum diterima secara lengap. biasanya waktu menunggu. |
| onLoaded | Dipanggil ketika koneksi XHR sudah dibuka dan data request telah dikirim |
| onLoading | Dipanggil ketika koneksi XHR sudah dibuka, tetapi data request belum dikirim |
| onSuccess | Fungsi Ini akan dipanggil ketika request telah direspon dengan OK (maksudnya dapat direspon dengan baik – server merespon dengan kode 200). Fungsi ini memiliki sebuah parameter yang merupakan sebuah xmlHttpRequest Object. Jadi resultnya ada di parameter tersebut. Fungsi ini dipanggil sebelum onComplete. |
| onXYZ | XYZ=kode respon server, jadi kalo nerima kode itu maka akan dipanggil fungsinya ex on200. |
Urutan event handler dapat diurutkan seperti ini
onCreate -> onUninitialized -> onLoading -> onInteractive -> (onXYZ/onSuccess) -> onComplete
Contoh Aplikasi Hello world
Ini adalah contoh aplikasi ajax sederhana menggunakan Prototype . Untuk Demo Klik disini
1. Buat script HTML dan javascriptnya
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html>
<head>
<title>Prototype Ajax</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="prototype.js" language="JavaScript" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
function callServer() {
var url = 'helloword.php';
var params = 'q=' + $F('nama');
var ajax=new Ajax.Request(url,
{
method:'get',parameters: params,
onSuccess: function(transport){
var response = transport.responseText || "no response text";
$('Result').innerHTML=response
},
onFailure: function(){ $('Result').innerHTML='Something went wrong...' }
});
}
</script>
</head>
<body>
<form>
<label for="nama">Nama Anda:</label>
<input type="text" name="nama" id="nama" onkeyup="callServer();" />
<div id="Result"></div>
</form>
</body>
</html> |
2. Script PHP
1 2 3 4 5 6 7 8 | <? $data=$_GET['q']; if ($data=="ibnu"){ echo "Selamat datang ibnu.. "; }else{ echo "hmm sapa ya.. ".$data."... Lupa tuh.."; } ?> |
About ibnoe
