You are on page 1of 23

AJAX Pendahuluan

Sebelumnya Bab berikutnya

AJAX adalah tentang memperbarui bagian-bagian dari suatu halaman web, tanpa reload seluruh halaman.

Apa itu AJAX?


AJAX Asynchronous JavaScript dan = XML. AJAX adalah teknik untuk membuat halaman web cepat dan dinamis. AJAX memungkinkan halaman web yang akan diperbarui asynchronous dengan bertukar sejumlah kecil data dengan server di belakang layar. Ini berarti bahwa adalah mungkin untuk memperbarui bagian-bagian dari suatu halaman web, tanpa reload seluruh halaman. Halaman web klasik, (yang tidak menggunakan AJAX) harus reload seluruh halaman jika konten harus berubah. Contoh aplikasi menggunakan AJAX: Google Maps, Gmail, Youtube, dan tab Facebook.

Bagaimana Bekerja AJAX

AJAX adalah Berdasarkan Standar Internet


AJAX didasarkan pada standar internet, dan menggunakan kombinasi dari:

XMLHttpRequest objek (untuk pertukaran data asynchronous dengan server) JavaScript / DOM (untuk menampilkan / berinteraksi dengan informasi) CSS (untuk gaya data) XML (sering digunakan sebagai format untuk mentransfer data)

Aplikasi AJAX adalah browser dan platform-independen!

Google Suggest
AJAX dibuat populer pada tahun 2005 oleh Google, dengan Google Suggest. Google Suggest menggunakan AJAX untuk membuat antarmuka web yang sangat dinamis: Ketika Anda mulai mengetik di kotak pencarian Google, sebuah JavaScript mengirimkan surat ke server dan server mengembalikan sebuah daftar saran.

Mulai Menggunakan AJAX Hari ini


Pada PHP tutorial kami, kami akan menunjukkan bagaimana AJAX dapat memperbarui bagian dari suatu halaman web, tanpa reload seluruh halaman. Script server akan ditulis dalam PHP. Jika Anda ingin mempelajari lebih lanjut tentang AJAX, kunjungi tutorial AJAX .

PHP - AJAX dan PHP


Sebelumnya Bab berikutnya

AJAX digunakan untuk membuat aplikasi yang lebih interaktif.

Contoh AJAX PHP

Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat berkomunikasi dengan server web sementara karakter tipe user dalam sebuah field input:

Contoh
Start typing a name in the input field below: First name: Suggestions:

Contoh Dijelaskan - Page HTML


Ketika seorang pengguna jenis karakter dalam kolom input di atas, fungsi "showHint ()" dijalankan. Fungsi ini dipicu oleh peristiwa "onkeyup": <html> <head> <script type="text/javascript"> function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } }

xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <p><b>Start typing a name in the input field below:</b></p> <form> First name: <input type="text" onkeyup="showHint(this.value)" size="20" /> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> Penjelasan kode sumber: Jika field input kosong (str.length == 0), fungsi membersihkan isi placeholder txtHint dan keluar fungsi. Jika kolom input tidak kosong, showHint () fungsi mengeksekusi berikut:

Buat objek XMLHttpRequest Buat fungsi untuk dieksekusi ketika respon server sudah siap Mengirimkan permintaan ke file di server Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi field input)

PHP file
Halaman pada server yang disebut oleh JavaScript atas adalah file PHP yang disebut "gethint.php". Source code di "gethint.php" cek array nama, dan mengembalikan nama yang sesuai (s) ke browser: <?php // Fill up array with names $a[]="Anna"; $a[]="Brittany"; $a[]="Cinderella"; $a[]="Diana"; $a[]="Eva"; $a[]="Fiona";

$a[]="Gunda"; $a[]="Hege"; $a[]="Inga"; $a[]="Johanna"; $a[]="Kitty"; $a[]="Linda"; $a[]="Nina"; $a[]="Ophelia"; $a[]="Petunia"; $a[]="Amanda"; $a[]="Raquel"; $a[]="Cindy"; $a[]="Doris"; $a[]="Eve"; $a[]="Evita"; $a[]="Sunniva"; $a[]="Tove"; $a[]="Unni"; $a[]="Violet"; $a[]="Liza"; $a[]="Elizabeth"; $a[]="Ellen"; $a[]="Wenche"; $a[]="Vicky"; //get the q parameter from URL $q=$_GET["q"]; //lookup all hints from array if length of q>0 if (strlen($q) > 0) { $hint=""; for($i=0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }

} // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint == "") { $response="no suggestion"; } else { $response=$hint; } //output the response echo $response; ?> Penjelasan: Jika ada teks yang dikirim dari JavaScript (strlen ($ q)> 0), berikut ini terjadi: 1. Cari nama yang cocok dengan karakter yang dikirim dari JavaScript 2. Jika tidak cocok ditemukan, mengatur string respon untuk "usulan tidak" 3. Jika satu atau lebih nama yang cocok ditemukan, mengatur string respon terhadap semua nama-nama 4. Respon dikirim ke tempat "txtHint"

PHP - AJAX dan MySQL


Sebelumnya Bab berikutnya

AJAX dapat digunakan untuk komunikasi interaktif dengan database.

AJAX database Contoh


Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat mengambil informasi dari database dengan AJAX:

Contoh
Select a person:

Person info will be listed here...

Contoh Dijelaskan - Database MySQL


Tabel database yang kita gunakan dalam contoh di atas terlihat seperti ini: id FirstName LastName Umur Hometown Pekerjaan 1 Peter Grifon 41 Quahog Tempat pembuatan bir 2 Lois Grifon 40 Newport Guru Piano 3 Joseph Swanson 39 Quahog Polisi 4 Glenn Rawa 41 Quahog Pilot

Contoh Dijelaskan - Page HTML


Bila pengguna memilih pengguna dalam daftar dropdown di atas, fungsi yang disebut "showUser ()" dijalankan. Fungsi ini dipicu oleh peristiwa "onchange": <html> <head> <script type="text/javascript"> function showUser(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

} } xmlhttp.open("GET","getuser.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <select name="users" onchange="showUser(this.value)"> <option value="">Select a person:</option> <option value="1">Peter Griffin</option> <option value="2">Lois Griffin</option> <option value="3">Glenn Quagmire</option> <option value="4">Joseph Swanson</option> </select> </form> <br /> <div id="txtHint"><b>Person info will be listed here.</b></div> </body> </html> Para showUser () fungsi melakukan hal berikut:

Periksa apakah seseorang dipilih Buat objek XMLHttpRequest Buat fungsi untuk dieksekusi ketika respon server sudah siap Mengirimkan permintaan ke file di server Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi dropdown list)

PHP file
Halaman pada server yang disebut oleh JavaScript atas adalah file PHP yang disebut "getuser.php". Source code di "getuser.php" menjalankan query terhadap database MySQL, dan mengembalikan hasil dalam sebuah tabel HTML: <?php $q=$_GET["q"]; $con = mysql_connect('localhost', 'peter', 'abc123');

if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("ajax_demo", $con); $sql="SELECT * FROM user WHERE id = '".$q."'"; $result = mysql_query($sql); echo "<table border='1'> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> <th>Hometown</th> <th>Job</th> </tr>"; while($row = mysql_fetch_array($result)) { echo "<tr>"; echo "<td>" . $row['FirstName'] . "</td>"; echo "<td>" . $row['LastName'] . "</td>"; echo "<td>" . $row['Age'] . "</td>"; echo "<td>" . $row['Hometown'] . "</td>"; echo "<td>" . $row['Job'] . "</td>"; echo "</tr>"; } echo "</table>"; mysql_close($con); ?> Penjelasan: Ketika query dikirim dari JavaScript untuk file PHP, berikut ini terjadi: 1. PHP membuka koneksi ke server MySQL 2. Orang yang benar ditemukan 3. Sebuah tabel HTML dibuat, diisi dengan data, dan dikirim kembali ke tempat "txtHint"

Contoh PHP - AJAX dan XML


Sebelumnya Bab berikutnya

AJAX dapat digunakan untuk komunikasi interaktif dengan file XML.

Contoh XML AJAX


Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat mengambil informasi dari file XML dengan AJAX:

Contoh
Select a CD:

CD info will be listed here...

Contoh Dijelaskan - Page HTML


Bila pengguna memilih CD dalam daftar dropdown di atas, fungsi yang disebut "showCD ()" dijalankan. Fungsi ini dipicu oleh peristiwa "onchange": <html> <head> <script type="text/javascript"> function showCD(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> Select a CD: <select name="cds" onchange="showCD(this.value)"> <option value="">Select a CD:</option> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <div id="txtHint"><b>CD info will be listed here...</b></div> </body> </html> Para showCD () fungsi melakukan hal berikut:

Periksa apakah CD dipilih Buat objek XMLHttpRequest Buat fungsi untuk dieksekusi ketika respon server sudah siap Mengirimkan permintaan ke file di server Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi dropdown list)

PHP file
Halaman pada server yang disebut oleh JavaScript atas adalah file PHP yang disebut "getcd.php". Script PHP beban dokumen XML, " cd_catalog.xml ", menjalankan query terhadap file XML, dan mengembalikan hasilnya sebagai HTML: <?php $q=$_GET["q"];

$xmlDoc = new DOMDocument(); $xmlDoc->load("cd_catalog.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { //Process only element nodes if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i<$cd->length;$i++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b> "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br />"); } } ?> Ketika query CD dikirim dari JavaScript ke halaman PHP, berikut ini terjadi: 1. PHP menciptakan sebuah objek XML DOM 2. Cari semua elemen <artist> yang cocok dengan nama yang dikirim dari JavaScript 3. Album keluaran informasi (kirim ke placeholder "txtHint")

Contoh PHP - AJAX Live Search


Sebelumnya Bab berikutnya

AJAX dapat digunakan untuk membuat pencarian lebih user-friendly dan interaktif.

AJAX Search Hidup


Contoh berikut akan menunjukkan pencarian hidup, di mana Anda mendapatkan hasil pencarian saat Anda mengetik. Live search memiliki banyak manfaat dibandingkan dengan pencarian tradisional:

Hasil ditampilkan saat Anda mengetik Hasil sempit seperti Anda terus mengetik Jika hasil menjadi terlalu sempit, menghapus karakter untuk melihat hasil lebih luas

Pencarian untuk halaman W3Schools dalam kolom input di bawah ini:

Hasil dalam contoh di atas ditemukan di sebuah file XML ( links.xml ). Untuk membuat contoh ini kecil dan sederhana, hanya enam hasil yang tersedia.

Contoh Dijelaskan - Page HTML


Ketika seorang pengguna jenis karakter dalam kolom input di atas, fungsi "showResult ()" dijalankan. Fungsi ini dipicu oleh peristiwa "onkeyup": <html> <head> <script type="text/javascript"> function showResult(str) { if (str.length==0) { document.getElementById("livesearch").innerHTML=""; document.getElementById("livesearch").style.border="0px"; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

} xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("livesearch").innerHTML=xmlhttp.responseText; document.getElementById("livesearch").style.border="1px solid #A5ACB2"; } } xmlhttp.open("GET","livesearch.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <input type="text" size="30" onkeyup="showResult(this.value)" /> <div id="livesearch"></div> </form> </body> </html> Penjelasan kode sumber: Jika field input kosong (str.length == 0), fungsi membersihkan isi placeholder livesearch dan keluar fungsi. Jika kolom input tidak kosong, showResult () fungsi mengeksekusi berikut:

Buat objek XMLHttpRequest Buat fungsi untuk dieksekusi ketika respon server sudah siap Mengirimkan permintaan ke file di server Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi field input)

PHP file
Halaman pada server yang disebut oleh JavaScript atas adalah file PHP yang disebut "livesearch.php". Source code di "livesearch.php" pencarian sebuah file XML untuk judul yang cocok dengan string pencarian dan mengembalikan hasilnya:

<?php $xmlDoc=new DOMDocument(); $xmlDoc->load("links.xml"); $x=$xmlDoc->getElementsByTagName('link'); //get the q parameter from URL $q=$_GET["q"]; //lookup all links from the xml file if length of q>0 if (strlen($q)>0) { $hint=""; for($i=0; $i<($x->length); $i++) { $y=$x->item($i)->getElementsByTagName('title'); $z=$x->item($i)->getElementsByTagName('url'); if ($y->item(0)->nodeType==1) { //find a link matching the search text if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q)) { if ($hint=="") { $hint="<a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } else { $hint=$hint . "<br /><a href='" . $z->item(0)->childNodes->item(0)->nodeValue . "' target='_blank'>" . $y->item(0)->childNodes->item(0)->nodeValue . "</a>"; } } } } } // Set output to "no suggestion" if no hint were found // or to the correct values if ($hint=="") { $response="no suggestion";

} else { $response=$hint; } //output the response echo $response; ?> Jika ada teks yang dikirim dari JavaScript (strlen ($ q)> 0), berikut ini terjadi:

Memuat file XML ke dalam objek DOM XML baru Loop melalui semua elemen <title> untuk menemukan pertandingan dari teks yang dikirim dari JavaScript Mengatur url yang benar dan judul dalam variabel "$ respon". Jika lebih dari satu pertandingan yang ditemukan, semua pertandingan ditambahkan ke variabel Jika tidak cocok ditemukan, variabel respon $ diatur ke "saran tidak"

Contoh PHP - AJAX RSS Reader


Sebelumnya Bab berikutnya

RSS Reader digunakan untuk membaca RSS Feed.

AJAX RSS Reader


Contoh berikut akan menunjukkan sebuah pembaca RSS, di mana RSS-feed dimuat ke dalam halaman web tanpa reload:
Pilih RSS-feed:

RSS-feed akan tercantum di sini ...

Contoh Dijelaskan - Page HTML


Bila pengguna memilih RSS-feed dalam daftar dropdown di atas, fungsi yang disebut "showResult ()" dijalankan. Fungsi ini dipicu oleh peristiwa "onchange":

<html> <head> <script type="text/javascript"> function showRSS(str) { if (str.length==0) { document.getElementById("rssOutput").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("rssOutput").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getrss.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form> <select onchange="showRSS(this.value)"> <option value="">Select an RSS-feed:</option> <option value="Google">Google News</option> <option value="MSNBC">MSNBC News</option> </select> </form> <br /> <div id="rssOutput">RSS-feed will be listed here...</div> </body> </html> Para showResult () fungsi melakukan hal berikut:

Periksa apakah RSS-feed dipilih Buat objek XMLHttpRequest Buat fungsi untuk dieksekusi ketika respon server sudah siap Mengirimkan permintaan ke file di server Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi dropdown list)

PHP file
Halaman pada server yang disebut oleh JavaScript atas adalah file PHP yang disebut "getrss.php": <?php //get the q parameter from URL $q=$_GET["q"]; //find out which feed was selected if($q=="Google") { $xml=("http://news.google.com/news?ned=us&topic=h&output=rss"); } elseif($q=="MSNBC") { $xml=("http://rss.msnbc.msn.com/id/3032091/device/rss/rss.xml"); } $xmlDoc = new DOMDocument(); $xmlDoc->load($xml); //get elements from "<channel>" $channel=$xmlDoc->getElementsByTagName('channel')->item(0); $channel_title = $channel->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $channel_link = $channel->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $channel_desc = $channel->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue; //output elements from "<channel>" echo("<p><a href='" . $channel_link . "'>" . $channel_title . "</a>"); echo("<br />"); echo($channel_desc . "</p>"); //get and output "<item>" elements

$x=$xmlDoc->getElementsByTagName('item'); for ($i=0; $i<=2; $i++) { $item_title=$x->item($i)->getElementsByTagName('title') ->item(0)->childNodes->item(0)->nodeValue; $item_link=$x->item($i)->getElementsByTagName('link') ->item(0)->childNodes->item(0)->nodeValue; $item_desc=$x->item($i)->getElementsByTagName('description') ->item(0)->childNodes->item(0)->nodeValue; echo ("<p><a href='" . $item_link . "'>" . $item_title . "</a>"); echo ("<br />"); echo ($item_desc . "</p>"); } ?> Ketika sebuah RSS-feed yang dikirim dari JavaScript, berikut ini terjadi:

Memeriksa umpan dipilih Buat objek DOM XML baru Muat dokumen RSS dalam variabel xml Ekstrak dan elemen output dari elemen saluran Ekstrak dan elemen output dari elemen item yang

Contoh PHP - AJAX Poll


Sebelumnya Bab berikutnya

AJAX Poll
Contoh berikut akan menunjukkan sebuah jajak pendapat di mana hasilnya ditampilkan tanpa reload.
Apakah Anda seperti PHP dan AJAX sejauh ini? Ya: Tidak ada:

Contoh Dijelaskan - Page HTML


Bila pengguna memilih opsi di atas, fungsi yang disebut "getVote ()" dijalankan. Fungsi ini dipicu oleh peristiwa "onclick":
<html> <head> <script type="text/javascript"> function getVote(int) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("poll").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","poll_vote.php?vote="+int,true); xmlhttp.send(); } </script> </head> <body> <div id="poll"> <h3>Do you like PHP and AJAX so far?</h3> <form> Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)" /> <br />No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)" /> </form> </div>

</body> </html>

Para getVote () fungsi melakukan hal berikut:


Buat objek XMLHttpRequest Buat fungsi untuk dieksekusi ketika respon server sudah siap Mengirimkan permintaan ke file di server Perhatikan bahwa parameter (suara) yang ditambahkan ke URL (dengan nilai ya atau pilihan)

PHP file
Halaman pada server yang disebut oleh JavaScript atas adalah file PHP yang disebut "poll_vote.php":
<?php $vote = $_REQUEST['vote']; //get content of textfile $filename = "poll_result.txt"; $content = file($filename); //put content in array $array = explode("||", $content[0]); $yes = $array[0]; $no = $array[1]; if ($vote == 0) { $yes = $yes + 1; } if ($vote == 1) { $no = $no + 1; } //insert votes to txt file $insertvote = $yes."||".$no; $fp = fopen($filename,"w"); fputs($fp,$insertvote); fclose($fp);

?> <h2>Result:</h2> <table> <tr> <td>Yes:</td> <td> <img src="poll.gif" width='<?php echo(100*round($yes/($no+$yes),2)); ?>' height='20'> <?php echo(100*round($yes/($no+$yes),2)); ?>% </td> </tr> <tr> <td>No:</td> <td> <img src="poll.gif" width='<?php echo(100*round($no/($no+$yes),2)); ?>' height='20'> <?php echo(100*round($no/($no+$yes),2)); ?>% </td> </tr> </table>

Nilai ini dikirim dari JavaScript, dan berikut terjadi:


1. 2. 3. 4. Dapatkan isi dari file "poll_result.txt" Letakkan isi file dalam variabel dan menambahkan satu ke variabel yang dipilih Tulis hasil ke file "poll_result.txt" Output representasi grafis dari hasil jajak pendapat

File Teks
File teks (poll_result.txt) adalah tempat kita menyimpan data dari jajak pendapat. Ia disimpan seperti ini:
0||0

Nomor pertama merupakan "Ya" suara, angka kedua merupakan "Tidak" suara.

Catatan: Ingat untuk memungkinkan server web Anda untuk mengedit file teks. Apakah TIDAK memberikan akses semua orang, hanya web server (PHP).

You might also like