AJAX Source Code to Suggest Example

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

# AJAX Suggest Source Code

## AJAX Source Code to Suggest Example

The source code below belongs to the AJAX example on the previous page.

You can copy and paste it, and try it yourself.

## The AJAX HTML Page

This is the HTML page. It contains a simple HTML form and a link to a JavaScript.

    <html>
    <head>
    <script src="clienthint.js"></script>
    </head>
    <body>

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

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

    </body>
    </html>

The JavaScript code is listed below.

## The AJAX JavaScript

This is the JavaScript code, stored in the file "clienthint.js":

    var xmlHttp

    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);
    }

    function stateChanged()
    {
    if (xmlHttp.readyState==4)
    {
    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;
    }

## The AJAX Server Page - ASP and PHP

There is no such thing as an AJAX server. AJAX pages can be served by any internet server.

The server page called by the JavaScript in the example from the previous chapter is a simple ASP file called "gethint.asp".

Below we have listed two examples of the server page code, one written in ASP and one in PHP.

## AJAX ASP Example

The code in the "gethint.asp" page is written in VBScript for an Internet Information Server (IIS). It just checks an array of names and returns the corresponding names to the client:

    <%
    response.expires=-1
    dim a(30)
    'Fill up array with names
    a(1)="Anna"
    a(2)="Brittany"
    a(3)="Cinderella"
    a(4)="Diana"
    a(5)="Eva"
    a(6)="Fiona"
    a(7)="Gunda"
    a(8)="Hege"
    a(9)="Inga"
    a(10)="Johanna"
    a(11)="Kitty"
    a(12)="Linda"
    a(13)="Nina"
    a(14)="Ophelia"
    a(15)="Petunia"
    a(16)="Amanda"
    a(17)="Raquel"
    a(18)="Cindy"
    a(19)="Doris"
    a(20)="Eve"
    a(21)="Evita"
    a(22)="Sunniva"
    a(23)="Tove"
    a(24)="Unni"
    a(25)="Violet"
    a(26)="Liza"
    a(27)="Elizabeth"
    a(28)="Ellen"
    a(29)="Wenche"
    a(30)="Vicky"

    'get the q parameter from URL
    q=ucase(request.querystring("q"))

    'lookup all hints from array if length of q>0
    if len(q)>0 then
      hint=""
      for i=1 to 30
        if q=ucase(mid(a(i),1,len(q))) then
          if hint="" then
            hint=a(i)
          else
            hint=hint & " , " & a(i)
          end if
        end if
      next
    end if

    'Output "no suggestion" if no hint were found
    'or output the correct values
    if hint="" then
      response.write("no suggestion")
    else
      response.write(hint)
    end if
    %>

## AJAX PHP Example

The code above rewritten in PHP.

Note: To run the entire example in PHP, remember to change the value of the url variable in "clienthint.js" from "gethint.asp" to "gethint.php".

### PHP Example

    <?php
    header("Cache-Control: no-cache, must-revalidate");
     // Date in the past
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

    // 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;
    ?>

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