PHP and AJAX requests

AJAX Requests

In the following AJAX example, we will demonstrate how a Web page communicates with an online Web server when a user enters data into a Web form.

Enter the name in the following text box: First Name:

Suggestions:

This example includes three pages:

A simple HTML table single-segment JavaScript a PHP page

HTML form

This is an HTML form. It contains a simple HTML form and a link to JavaScript:

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 the user presses and releases the key in the input field, an event is triggered when the event is triggered, the following is a function form named Showhint () that is 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 the HTML document:

var xmlhttpfunction 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=" +strurl=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)  { C14/>xmlhttp=new ActiveXObject ("Microsoft.XMLHTTP");  } }return XmlHttp;}

Example explanation: Showhint () function

Each time a character is entered in the input field, the function is executed once.

If the text box has content (Str.length > 0), the function does this:

Define the URL (file name) to be sent to the server add a random number to this URL by adding the parameter (q) with the input field contents to prevent the server from using the cache file to invoke the Getxmlhttpobject function to create the XMLHTTP object and tell the object to execute the name "s" When the event is triggered. The Tatechanged function opens the XMLHTTP object with the given URL to send an HTTP request 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.

Fills the contents of the Txthint placeholder Txthint with the response text when the State becomes 4 (or "complete").

Getxmlhttpobject () function

AJAX applications can only be run in a fully XML-enabled 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 name array and returns the corresponding name to the client:

 
   0if (strlen ($q) > 0) {$hint = ""; for ($i =0; $i
 
   

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

Find a name that matches the characters transmitted by JavaScript if multiple names are found, include all the names in the response string if no matching name is found, set response to "no suggestion" if one or more names are found, the RESPO NSE is set to these names to send response to the "Txthint" placeholder

