In the following AJAX example, we will show how a Web page communicates with an online Web server when a user enters data into a Web form.
Enter a name in the text box below (test instructions: the instance feature is not implemented)
The Name:
Suggestions:
This example includes three pages:
A simple HTML form
A JavaScript
A PHP page
HTML form
This is an HTML form. It contains a simple HTML form and a link to JavaScript:
<script src= "Clienthint.js" ></script>
<body>
<form>
The Name:
<input type= "text" id= "Txt1"
Onkeyup= "Showhint (this.value)" >
</form>
<p>suggestions: <span id= "Txthint" ></span></p>
</body>
Example explanation-HTML form
As you can see, the HTML page above contains a simple HTML form with an input field named "Txt1".
The form works like this:
When a user presses and releases a key in an input field, an event is triggered
When the event is triggered, the function named Showhint () is executed
Below the form is a <span> named "Txthint". It is used as a placeholder for the data returned by the Showhint () function.
Javascript
The JavaScript code is stored in the "clienthint.js" file, which is linked to an HTML document:
var xmlHttp
function Showhint (str)
{
if (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;
}
Example Explanation:
Showhint () function
Whenever you enter a character in an input field, the function is executed once.
If there is content in the text box (Str.length > 0), the function executes this way:
Define the URL (filename) to send to the server
Add the parameter (q) with the input field content to this URL
Add a random number to prevent the server from using cached files
Call the Getxmlhttpobject function to create the XMLHTTP object and tell the object to execute a function named StateChanged when the event is triggered
Opens the XMLHTTP object with the given URL.
Sending HTTP requests to the server
If the input field is empty, the function simply empties the contents of the Txthint placeholder.
StateChanged () function
The function is executed whenever the state of the XMLHTTP object changes.
When the state becomes 4 (or "complete"), the contents of the Txthint placeholder Txthint are populated with response text.
Getxmlhttpobject () function
AJAX applications can only run in a fully XML-supported web browser.
The above code calls a function named Getxmlhttpobject ().
The function is to solve the problem of creating different XMLHTTP objects for different browsers.
This has been explained in the previous section.
PHP page
The server page called by JavaScript code is a simple server page called "gethint.php".
The code in "gethint.php" checks the array of names and then returns the corresponding name to the client:
<?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;
?>
If there is text sent from JavaScript (strlen ($q) > 0), then:
Find the name that matches the characters that JavaScript sends
If multiple names are found, include all names in the response string
If no matching name is found, set the response to "no suggestion"
If you find one or more names, set the response to these names.
Send response to the "Txthint" placeholder
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
