How to Create AJAX Enabled Suggest Tool

In previous part of AJAX tutorial we developed our first AJAX enabled application and saw it LIVE DEMO and hope you enjoyed alot, it’s not only yours first AJAX application but also our first AJAX LIVE DEMO which I released on the net along with tutorial. So three cheers to all of us :) :) :)

In this part of AJAX tutorial we are going to learn how to AJAX enabled suggest tool, just concentrate on the base because if once you understand the base then most of the concepts will clear to you. It’s not exactly like Google Suggest because now if we go for that then this tutorial will not be for AJAX beginner learners. Believe me soon we will also learn how to create that but for that you have to go through this way on which we are already going, now lets talk about:

 
How to Create AJAX Enabled Suggest Tool

We have already seen that AJAX can be used to create more interactive applications. Now we are going to learn how a web page can communicate with a web server online as a user enters data into a standard HTML form.

First of all we have to create HTML form as we have created in our previous tutorial

1
2
3
4
5
6
7
8
9
10
11
12
13
14

  <head>
  	<title>HeyGB.com - First Ajax Application</title>
  <head>
  <body>
  <form> 
  First Name:
  <input type="text" id="txt1"
  onkeyup="showHint(this.value)">
  </form>
 
  <p>Suggestions: <span id="txtHint"></span></p>
 
  </body>
  </html>

As you can see it is just a simple HTML form with an input field called “txt1″. An event attribute for the input field defines a function to be triggered by the onkeyup event.

The paragraph below the form contains a span called “txtHint”. The span is used as a placeholder for data retrieved from the web server.

When the user inputs data, a function called “showHint()” is executed. The execution of the function is triggered by the “onkeyup” event. In other words: Each time the user moves his finger away from a keyboard key inside the input field, the function showHint is called.

Now lets discuss about showHint() function. The showHint() function is a very simple JavaScript function placed in the section of the HTML page.

The function contains the following code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 function showHint(str)
  {
  if (str.length==0)
    { 
    document.getElementById("txtHint").innerHTML="";
    return;
    }
  xmlHttp=GetXmlHttpObject();
  if (xmlHttp==null)
    {
    alert ("Your browser does not support AJAX!");
    return;
    } 
  var url="suggestfile.php";
  url=url+"?q="+str;
  url=url+"&sid="+Math.random();
  xmlHttp.onreadystatechange=stateChanged;
  xmlHttp.open("GET",url,true);
  xmlHttp.send(null);
  }

The 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:

* Defines the url (filename) to send to the server
* Adds a parameter (q) to the url with the content of the input field
* Adds a random number to prevent the server from using a cached file
* Creates an XMLHTTP object, and tells the object to execute a function called stateChanged when a change is triggered
* Opens the XMLHTTP object with the given url.
* Sends an HTTP request to the server

If the input field is empty, the function simply clears the content of the txtHint placeholder.



Pages : 1 2