AJAX is used to create more interactive applications.
AJAX PHP Instance
The following example shows how a Web page communicates with a Web server when the user types characters in the input box:
Example explanation-HTML page
The "Showhint ()" function is executed when the user types a character in the input box above. This function is triggered by the "onkeyup" event:
- <script>
functionShowhint(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>
<body>
<p><b>Enter a name in the input box:</b></p>
<form>
Name:<input type= "text" onkeyup= "showhint< Span class= "pun" > (this. Value ">
</ Form>
<p> return value: <span id= "txthint" ></span ></p>
</BODY>
</HTML>
Copy
Source Code Explanation:
If the input box is empty (str.length==0), the function empties the contents of the Txthint placeholder and exits the function.
If the input box is not empty, then Showhint () performs the following steps:
- Create a XMLHttpRequest Object
- Create a function that executes when the server responds ready
- Send a request to a file on the server
- Note the parameter (q) added to the end of the URL (contains the contents of the input box)
PHP file
The above server page that was called by JavaScript is a php file named "gethint.php".
The source code in "gethint.php" checks the name array and returns the corresponding name to the browser:
- <?Php
Populate a name in an array
$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 the request URL address
$q=$_get["Q"];
Find if the value is matched if 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];
}
}
}
}
If no match value is set output to "no suggestion"
Or to the correct values
if ( $hint == )
{
$response = "no suggestion" }
else
{
$response = $hint }
//output return value
?>
Copy
Explanation: If JavaScript sends any text (that is, strlen ($q) > 0), it will occur:
- Find names that match the characters sent by JavaScript
- If no match is found, the response string is set to "no suggestion"
- If one or more matching names are found, the response string is set with all names
- Send response to "txthint" placeholder
PHP Ajax cross-domain Problem solving solution
If your asynchronous request needs to be cross-domain viewable: PHP Ajax cross-domain problem solving solution.
Php-ajax and PHP
