Go Back   Wiki NewForum > Career Forum > Tech Forum & Tutorial > IT Forum

Reply
Views: 4404  
Thread Tools Rate Thread Display Modes
  #11  
Old 05-04-2009, 06:08 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 65,529
Default

The JavaScript

The JavaScript code is stored in "clienthint.js" and linked to the 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 Explained

The showHint() Function
This function executes every time a character is entered in the input field.
If there is some input in the text field (str.length > 0) the function executes the following:
  1. Defines the url (filename) to send to the server
  2. Adds a parameter (q) to the url with the content of the input field
  3. Adds a random number to prevent the server from using a cached file
  4. Calls on the GetXmlHttpObject function to create an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
  5. Opens the XMLHTTP object with the given url.
  6. Sends an HTTP request to the server
If the input field is empty, the function simply clears the content of the txtHint placeholder.




The stateChanged() Function
This function executes every time the state of the XMLHTTP object changes.


When the state changes to 4 (or to "complete"), the content of the txtHint placeholder is filled with the response text.





The GetXmlHttpObject() Function
AJAX applications can only run in web browsers with complete XML support.


The code above called a function called GetXmlHttpObject().
The purpose of the function is to solve the problem of creating different XMLHTTP objects for different browsers.
This is explained in the previous chapter.
Reply With Quote
  #12  
Old 05-04-2009, 06:09 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 65,529
Default

The PHP Page

The server page called by the JavaScript code is a simple PHP file called "gethint.php".


The code in the "gethint.php" checks an array of names and returns the corresponding names to the client:






// 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 {
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 any text sent from the JavaScript (strlen($q) > 0) the following happens:
  1. Find a name matching the characters sent from the JavaScript
  2. If more than one name is found, include all names in the response string
  3. If no matching names were found, set response to "no suggestion"
  4. If one or more matching names were found, set response to these names
  5. The response is sent to the "txtHint" placeholder
Reply With Quote
  #13  
Old 05-04-2009, 06:10 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 65,529
Default PHP and AJAX XML Example

AJAX can be used for interactive communication with an XML file.
AJAX XML Example

In the AJAX example below we will demonstrate how a web page can fetch information from an XML file using AJAX technology.
Select a CD in the Box Below

Select a CD: Bob Dylan Bee Gees Cat Stevens CD info will be listed here.
This example consists of four pages:
  • a simple HTML form
  • an XML file
  • a JavaScript
  • a PHP page
Reply With Quote
  #14  
Old 05-04-2009, 06:10 PM
welcomewiki welcomewiki is offline
Member
 
Join Date:
Dec 2008
Location:
India
Posts: 65,529
Default

The HTML Form

The example above contains a simple HTML form and a link to a JavaScript:










Select a CD:


CD info will be listed here.





Example Explained

As you can see it is just a simple HTML form with a simple drop down box called "cds".
The paragraph below the form contains a div called "txtHint". The div is used as a placeholder for info retrieved from the web server.
When the user selects data, a function called "showCD" is executed. The execution of the function is triggered by the "onchange" event.
In other words: Each time the user changes the value in the drop down box, the function showCD is called.
Reply With Quote
  #15  
Old 01-07-2010, 09:15 AM
jonemere jonemere is offline
Junior Member
 
Join Date:
Jan 2010
Posts: 3
Default

Hi,
I would like to thank you guys for all of your post as this has solved my confusion which I was having related to Ajax.As a beginner I was not clear about Ajax but now I got it and everything is cleared now.Keep sharing such more information.
Reply With Quote
Reply

New topics in IT Forum

Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Forum Jump


Powered by vBulletin® Version 3.8.10
Copyright ©2000 - 2019, vBulletin Solutions, Inc.