|
Ajax dapat membuat aplikasi berbasis web menjadi seperti aplikasi desktop. Dengan ajax, interaksi menjadi lebih user friendly, tidak ada lagi loading seluruh halaman untuk perubahan kecil di halaman web. Berikut akan diberikan contoh website yang menggunakan ajax secara sederhana, dengan langsung diberikan penjelasan pada sourcodenya agar lebih jelas.
My First Ajax Untuk contoh pertama ini, siapkan sebuah file, dapat html dapat pula php disuaatu lokasi pada server local. Sebut saja file utama.php Dengan isi code seperti dibawah: <html> <head> <title>Ajax at work</title> <script language = "javascript"> var XMLHttpRequestObject = false; //initialisasi object XMLHttpRequest beda antara IE dengan FireFox, dan lain-lain //jika bukan IE if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } //jika IE else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } //fungsi untuk mengambil data di datasource dimasukkan ke div dengan id divID function getData(dataSource, divID) { //jalankan jika object httprequest telah terbuat if(XMLHttpRequestObject) { //ambil object div var obj = document.getElementById(divID); //buka data di datasource XMLHttpRequestObject.open("GET", dataSource); //jika ada perubahan state XMLHttpRequestObject.onreadystatechange = function() { //jika sudah complete dan sukses if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { //ambil data masukkan dalam div obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } </script> </head> <body> <H1>Fetching data with Ajax</H1> <form> <input type = "button" value = "Klik Aku" onclick = "getData('data.txt','targetDiv')"> Kuliah TK Internet : Ajax Introduction </form> <div id="targetDiv"> <p>Data dari ajax akan berada dibawah ini.</p> </div> </body> </html>
selain file tadi, siapkan juga file txt dengan nama data.txt dengan isi sembarang tulisan.
Jika sudah , panggil halaman web diatas, dan coba klik pada tombol ‘klik aku’, jika dibawah tulisan ‘Data dari ajax akan berada dibawah ini’ muncul text yang ada pada file data.txt, berarti ajax sudah jalan dengan benar.
Ajax menggunakan object XMLHttpRequest. Disitu ada fungsi open yang digunakan untuk mengambil data secara langsung jika berupa textfile, dan hasil output php jika dari file php. Tulisan dari file tadi diambil dan dimasukkan kedalam object div dengan innerHTML. Jadi Ajax mengubah html lewat javascript, tapi dengan data diambil dari server lewat jalan belakang (backdoor). Sehingga tidak diperlukan loading keseluruhan halaman web. Didalam source diatas terdapat property readystate dan status. 4 berarti proses pembacaan telah complete, sedang 200 berarti OK, tidak ada error. Berikut daftar nilai ready state dan status yang mungkin muncul: 0 uninitialized 1 loading 2 loaded 3 interactive 4 complete
200 OK 201 Created 204 No Content 205 Reset Content 206 Partial Content 400 Bad Request 401 Unauthorized 403 Forbidden 404 Not Found 405 Method Not Allowed 406 Not Acceptable 407 Proxy Authentication Required 408 Request Timeout 411 Length Required 413 Requested Entity Too Large 414 Requested URL Too Long 415 Unsupported Media Type 500 Internal Server Error 501Not Implemented 502 Bad Gateway 503 Service Unavailable 504 Gateway Timeout 505 HTTP Version Not Supported
Mengambil data dari proses PHP Contoh diatas sangat sederhana dan jarang dapat diimplementasikan. Bentuk yang sering diimplementasikan adalah mengambil data dari hasil proses php. Caranya adalah sebagai berikut: - Ubah code yang terdapat getData yaitu onclick = "getData('data.txt','targetDiv')"> menjadi onclick = "getData('data.php','targetDiv')"> - buat data.php dengan code yang mengeluarkan sembarang string. Disimpan pada lokasi yang sama dengan file utama.php tadi. contoh <? echo “ini tulisan dari php” ?> browse kembali file tadi. Seharusnya setelah diklik tombol akan muncul string hasil dari proses di data.php. Proses dari PHP yang berparameter File php seringkali membutuhkan parameter untuk menghasilkan hasil yang berbeda-beda menurut suatu input dari user. Disini akan dicontohkan sementara dengan memanggil file php yang langsung diberi parameter nama. Langkahnya : onclick = "getData('data.php','targetDiv')"> diubah menjadi onclick = "getData('data.php?nama=daniel','targetDiv')” sedang pada data.php diubah menjadi <? echo "<br> halo apa kabar ".$_GET['nama']; ?> Jika dijalankan dan klik tombol, maka yang tampil adalah “halo apa kabar daniel”. Proses dari PHP yang berparameter dari input user Jika contoh sebelumnya sudah bisa jalan, kita dapat kembangkan tampilan utama.php dengan memberikan kesempatan pada user untuk memberikan input. Input ini kemudian dikirim sebagai parameter ke file php untuk diproses. Yang perlu dilakukan adalah menambahkan input pada html : <input type="text" id="nama" name="nama"> dan pada bagian getData diganti menjadi : "getData('data.php?nama=' + document.getElementById('nama').value ,'targetDiv');" jalankan dengan cara menginputkan nama pada textbox yang tersedia dan setelah klik tombol akan tampil ‘halo apa kabar ‘ + nama orang yang diinputkan. Contoh lain, outputnya dapat berupa mengeluarkan image. Tentu saja untuk mencobanya, siapkan beberapa file gambar pada folder yang sama dengan file data.php ini. Dan saat memasukkan input, tuliskanlah nama salah satu file gambar tadi. Sebelumnya ubah dahulu echo "<br> halo apa kabar ".$_GET['nama']; diganti menjadi echo "<br><img src='".$_GET['nama'].">"; mem-Filter isi tabel Dengan cara yang hampir sama dengan tadi, input dari user digunakan untuk mem-filter isi tabel yang ditampilkan. Misal pada tabel mahasiswa. Dengan mengisikan contoh kata ‘di’ maka yang tampil adalah mahasiswa-mahasiswa yang nama-nya mengandung kata ‘di’ seperti adi, dian, budiman, dsb.. Misal tabel dibuat dalam mysql pada database test di tabel mhs. Maka data php diubah menjadi seperti berikut: mysql_connect("localhost","root","root"); mysql_select_db("test"); $rs=mysql_query("select * from mhs where nama like '%".$_GET[nama]."%'"); while($r=mysql_fetch_assoc($rs)) { echo $r['nama'].'<br>'; } dan untuk lebih bagusnya, filter ini langsung berlaku saat ada perubahan pada isi textbox. Yang perlu ditambahkan adalah onKeyUp pada textbox. <input type="text" id="nama" name="nama" onKeyUp="getData('data.php?nama=' + document.getElementById('nama').value ,'targetDiv');">
|
)
cheap
Kuliah TKI - Blog da...
mm Apparently, 21,000 boots imported by
Clas-class php yang ...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
The Power of GIS - U...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
JPGraph - membuat gr...
timberland - mm Apparently, 21,000 bo...
Kuliah TKI : Ajax - ...
mm Apparently, 21,000 boots imported by
Banner spesial untuk...
mm Apparently, 21,000 boots imported by