Professional Documents
Culture Documents
AJAX adalah tentang memperbarui bagian-bagian dari suatu halaman web, tanpa reload seluruh halaman.
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)
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.
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:
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"
Contoh
Select a person:
} } 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
Select a CD:
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")
AJAX dapat digunakan untuk membuat pencarian lebih user-friendly dan interaktif.
Hasil ditampilkan saat Anda mengetik Hasil sempit seperti Anda terus mengetik Jika hasil menjadi terlalu sempit, menghapus karakter untuk melihat hasil lebih luas
Hasil dalam contoh di atas ditemukan di sebuah file XML ( links.xml ). Untuk membuat contoh ini kecil dan sederhana, hanya enam hasil yang tersedia.
} 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"
<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
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:
</body> </html>
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>
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).