AJAX Suggest Example

From http://www.w3schools.com (Copyright Refsnes Data)

# AJAX Suggest Example

We have seen that AJAX can be used to create more interactive applications.

## AJAX Suggest Example

In the AJAX example below we will demonstrate how a web page can communicate with a web server online as a user enters data into a standard HTML form.

## Type a Name in the Box Below

First Name:

Suggestions:

## Example Explained - The HTML Form

The form above has the following HTML code:

    <form>
    First Name:
    <input type="text" id="txt1"
    onkeyup="showHint(this.value)">
    </form>

    <p>Suggestions: <span id="txtHint"></span></p>

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.

## Example Explained - The showHint() Function

The showHint() function is a very simple JavaScript function placed in the <head> section of the HTML page.

The function contains the following code:

    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="gethint.asp";
    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.

## Example Explained - The GetXmlHttpObject() Function

The example above calls a function called GetXmlHttpObject().

The purpose of the function is to solve the problem of creating different XMLHTTP objects for different browsers.

The function is listed below:

    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 stateChanged() Function

The stateChanged() function contains the following code:

    function stateChanged()
    {
    if (xmlHttp.readyState==4)
    {
    document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
    }
    }

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

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

From http://www.w3schools.com (Copyright Refsnes Data)