PHP and AJAX Requests

AJAX request

Sa ibaba ay magpakita ng halimbawa ng AJAX kung paano magkakaroon ng komunikasyon ang web pahina sa web server na online kapag nag-type ng datos ng gumagamit sa web porma.

Mag-type ng pangalan sa text box sa ibaba:

Suggestions：

Ang halimbawa na ito ay kasama ng tatlong pahina:

  • Isang simple na HTML porma
  • Isang pahina ng JavaScript
  • Isang PHP pahina

HTML porma

Ito ay HTML porma. Ito ay naglalaman ng isang simple na HTML porma at link sa JavaScript:

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

Halimbawa ng paliwanag - HTML porma

Tulad ng nakikita ninyo, ang HTML pahina ay may isang simple na HTML porma na may isang input field na may pangalan na "txt1".

Ang porma ay gumagana nang ganito:

  1. kapag nagpindot at nagpalaya ng isang pindutan ng gumagamit sa input area, magbubuksan ang isang pangyayari
  2. kapag ang pangyayari ay nabuksan, isasakatuparan ang function na may pangalan na showHint()
  3. Sa ilalim ng porma ay may isang <span> na may pangalan na "txtHint". Ginagamit ito bilang placeholder para sa datos na ibabalik ng showHint() function.

JavaScript

Ang JavaScript kodigo ay naka-imbak sa "clienthint.js" na file, na nakakabit sa HTML dokumento:

var xmlHttp
function showHint(str)
{
kapag (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Browser does not support HTTP Request")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Halimbawa ng paliwanag:

Function na showHint()

Bukas ang function na ito bawat beses na magipon ng isang character sa input field

Kung may nilalaman ang text box (str.length > 0), gagawin ng function na ito tulad nito:

  1. Tukuyin ang URL (filename) na ibibigay sa server
  2. Magdagdag ng argumento na may nilalaman ng input field (q) sa URL na ito
  3. Magdagdag ng isang random number upang maiwasan na gamitin ng server ang cache file
  4. Tumawag sa function na GetXmlHttpObject upang lumikha ng XMLHTTP object at sabihin sa object na gumawa ng function na stateChanged kapag nagaganap ang event
  5. Buksan ang XMLHTTP object gamit ang ibinigay na URL
  6. Magpadala ng HTTP request sa server

Kung ang lapag ng input ay walang laman, simpleng bawasan ang nilalaman ng placeholder na txtHint.

stateChanged() function

Kapag nagbago ang estado ng XMLHTTP object, isasagawa ang function na ito.

Sa panahon na ang estado ay naging 4 (o "complete"), ilagay ang teksto ng sagot sa placeholder na txtHint.

GetXmlHttpObject() function

Ang AJAX application ay maaaring tumakbo lamang sa buong suporta ng XML na web browser.

Ang kodigo ay tinatawag na GetXmlHttpObject() function.

Ang ginagamit ng function ay upang lutasin ang problema ng pagbuo ng iba't ibang XMLHTTP object para sa iba't ibang browser.

Ito ay nababanggit sa nakaraang section.

PHP pahina

Ang pahina ng server na ginamit ng JavaScript kodigo ay isang simpleng pahina ng server na may pangalan na "gethint.php".

"gethint.php" na ang kodigo ay magtselebrasyon ng array ng pangalan at ibabalik ang katugma sa client:

<?php
//pupunan ang array ng pangalan
$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";
//kumuha ng q parameter mula sa URL
$q=$_GET["q"];
//tumong ang lahat ng hint mula sa array kung ang haba ng q ay mahigit sa 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;
?>

If there is text sent from JavaScript (strlen($q) > 0), then:

  1. Find names that match the characters sent by JavaScript
  2. If multiple names are found, include all names in the response string
  3. If no matching names are found, set the response to 'no suggestion'
  4. If one or more names are found, set the response to these names
  5. Send the response to the 'txtHint' placeholder