Tools
Apache web server, PHP, MySQL, text editor, browser
2. Dasar Teori
Ajax (Asynchronous JavaScript and XML) merupakan salah satu teknik berbasis JavaScript untuk membuat “background server calls” dan menerima data dari server sebatas yang diperlukan saja, tanpa harus me-load halaman secara keseluruhan. Sebagai contoh, dalam sebuah form pengisian untuk account email baru misalnya, server bisa memberikan saran email apa yang cocok untuk user dengan nama tertentu berdasarkan kombinasi nama user tersebut tanpa harus me-load keseluruhan halaman. Contoh yang lain adalah Google Suggest, Gmail,Google Maps, dsb.
Secara umum, teknologi yang menjadi dasar Ajax adalah :
? JavaScript
? Document Object Model (DOM) untuk memanipulasi bagian dari halaman
HTML
? XMLHttpRequest (XHR) Object yang memungkinkan JavaScript untuk
mengakses server secara asinkron. XHR diimplementasikan secara berbeda pada browser tertentu. Sebagai contoh untuk IE6 diimplemntasikan dengan :
xhr = new ActiveXObject(“Microsoft.XMLHttp”);
Sedangkan untuk browser lain :
xhr = new XMLHttpRequest();
3. Langkah Praktikum
Review JavaScript, DOM, & CSS
Apache web server, PHP, MySQL, text editor, browser
2. Dasar Teori
Ajax (Asynchronous JavaScript and XML) merupakan salah satu teknik berbasis JavaScript untuk membuat “background server calls” dan menerima data dari server sebatas yang diperlukan saja, tanpa harus me-load halaman secara keseluruhan. Sebagai contoh, dalam sebuah form pengisian untuk account email baru misalnya, server bisa memberikan saran email apa yang cocok untuk user dengan nama tertentu berdasarkan kombinasi nama user tersebut tanpa harus me-load keseluruhan halaman. Contoh yang lain adalah Google Suggest, Gmail,Google Maps, dsb.
Secara umum, teknologi yang menjadi dasar Ajax adalah :
? JavaScript
? Document Object Model (DOM) untuk memanipulasi bagian dari halaman
HTML
? XMLHttpRequest (XHR) Object yang memungkinkan JavaScript untuk
mengakses server secara asinkron. XHR diimplementasikan secara berbeda pada browser tertentu. Sebagai contoh untuk IE6 diimplemntasikan dengan :
xhr = new ActiveXObject(“Microsoft.XMLHttp”);
Sedangkan untuk browser lain :
xhr = new XMLHttpRequest();
3. Langkah Praktikum
Review JavaScript, DOM, & CSS
| <!-- File : csstest.html Desc : Refreshing penggunaan JS, CSS, dan DOM --> <html> <head> <title>css,dom,js</title> <script type="text/JavaScript" src="csstest.js" ></script> <link href="styles.css" type="text/css" rel="stylesheet"/> </head> <body> <table border="1" id="tabel"> <tr> <td>baris satu</td> </tr> <tr> <td>baris dua</td> </tr> </table> <br /> <input type="button" value="set style 1" onclick="setstyle1();" /> <input type="button" value="set style 2" onclick="setstyle2();" /> </body> </html> |
| /** * File : csstest.js * Desc : JS untuk setting style tabel*/ function setstyle1(){ //mendapatkan referensi elemen html tabel = document.getElementById("tabel"); //set style tabel.className = "Tabel1"; } function setstyle2(){ tabel = document.getElementById("tabel"); tabel.className = "Tabel2"; } |
| /** * File : styles.css * Desc : css style tabel */ .Tabel1{ border: green 1px solid; background-color: red; } .Tabel2{ border: blue 1px solid; background-color: maroon; } |
XHR object
| <!-- File : ajax_readfile.html Desc : membaca text file dengan ajax --> <html> <head> <title>Read Text File Ajax</title> <script language="javascript" type="text/javascript"> var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP"); } function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function() { //jika request dan transaksi selesai,maka .... if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } //tidak mengirim apapun jika GET yang digunakan XMLHttpRequestObject.send(null); } } </script> </head> <body> <form><input type="button" value="tampilkan pesan" onclick="getData('data.txt','targetDiv')"></form> <div id="targetDiv"> <p>data akan di sini ....</p> </div> </body> </html> |
Ajax di atas akan membaca file data.txt sebagai berikut, dengan lokasi data.txt sama dengan ajax_readfile.html :
Seharusnya teks ini bisa anda baca karena telah di-fetch Ajax
Jika dicermati, metode yang digunakan untuk membuka URL menggunakan metode GET. Metode POST bisa digunakan ketika data yang akan dikirimkan ke server banyak.
PHP dan AJAX
Pada sesi kali ini, Ajax akan digunakan dengan PHP. Form berikut adalah form isian nama dan umur, dan hasil masukan nama dan umur akan ditampilkan pada form tersebut TANPA berpindah form :
| <!-- File : ajax_form.php Desc : membaca form dengan ajax --> <html> <head> <title>Read Data Ajax</title> <script type="text/JavaScript" src="ajax_dasar.js"></script> <script type="text/JavaScript"> var xmlhttp; function ajaxget(){ xmlhttp = GetXmlHttpObject(); if (xmlhttp==null) { alert ("Your browser does not support AJAX!"); return; } xmlhttp.onreadystatechange=stateChanged; //mendapatkan value masukan user var vname=encodeURIComponent(document.getElementById("name").value) var vage=encodeURIComponent(document.getElementById("age").value) var url = "get_data.php?name="+vname+"&age="+vage; xmlhttp.open("GET",url,true); xmlhttp.send(null); } function stateChanged(){ if (xmlhttp.readyState==4) { document.getElementById("result").innerHTML=xmlhttp.responseText; } } </script> </head> <body> <form method="GET" > Your name: <input type="text" id="name" name="name" size="25" /> <br /> Your age: <input type="text" id="age" name="age" size="25" /> <br /> <input type="button" value="submit" onClick="ajaxget()" /> </form> <div id="result"> </div> </body> </html> |
| <?php /** * File : get_data.php * Desc : dokumen untuk mendapatkan data dengan form dan PHP */ $name = $_GET['name']; $age = $_GET['age']; echo 'your name is '.$name." and your age is ".$age; ?> |
0 komentar:
Posting Komentar