Kursus Membuat Web

iklan

PHP Ajax

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

Script HTML : ajaxphp.html
<!DOCTYPE html>
<html>
	<head>
		<title>Contoh Ajax</title>
		<meta  charset="UTF-8">
			<script>
			function showHint(str){
			var xmlhttp;
			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>
	<h3>Start typing a name in the input field below:</h3>
	<form action=""> 
	<label>First name:</label>
	<input type="text" id="txt1" onKeyUp="showHint(this.value)" />
	</form>
	<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>
Script PHP : gethint.php
<?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;
  ?>
Lihat ...

Penjelasan Fungsi showHint()

Ketika seorang pengguna mengetikkan karakter dalam kolom input di atas, fungsi "showHint ()" dijalankan. Fungsi ini dipicu oleh event "onkeyup" :

Jika field input kosong (str.length == 0), fungsi membersihkan isi placeholder txtHint dan mengeluarkan fungsi.

Jika field input tidak kosong, fungsi  showHint ()mengeksekusi berikut :

  • Membuat objek XMLHttpRequest
  • Membuat fungsi untuk dieksekusi ketika respon server sudah siap
  • Mengirim permintaan ke sebuah file di server

Perhatikan bahwa sebuah parameter (q) ditambahkan ke URL (dengan isi dari field input)

Sebelumnya ...   Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015