Understand GetXmlHttpObject() Function

Now lets understand 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. If you remember below is the same code which we used and understood in depth in previous tutorial

The function is listed below:

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

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

Now it’s a turn for stateChanged() Function

The stateChanged() function contains the following code:

1
2
3
4
5
6
7

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

As we already discussed all these properties of XMLHttpRequest in previous tutorial however again I tell you that 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.

Now here is the complete updated code of our HTML page and save it with a name name AjaxSuggest.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

  <html>
  <head>
    	<title>HeyGB.com - First Ajax Application</title>
 
  <script language="javascript">
 
  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="suggestfile.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)
    { 
      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;
  }
  </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>

Now here is the server side code of suggestfile.php which called by javascript in above example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

<?php
 
    // Instructs browser to doesn't cache this page
    header( "Expires: Mon, 20 Dec 1998 01:00:00 GMT" );
    header( "Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT" );
    header( "Cache-Control: no-cache, must-revalidate" );
    header( "Pragma: no-cache" );  
 
  // Fill up array with names
  $a[]="Admilson";
  $a[]="Amanda";
  $a[]="Benny Greenberg";
  $a[]="Brad";
  $a[]="Christine Spencer";
  $a[]="Cinderella";
  $a[]="Christopher";
  $a[]="David";
  $a[]="Dyna";
  $a[]="Earthlingorgeous";
  $a[]="Elijah";
  $a[]="Evan";
  $a[]="Fay";
  $a[]="Faith";
  $a[]="Andrew";
  $a[]="Anthony";
  $a[]="Brianna";
  $a[]="Bobby";
  $a[]="Grace";
  $a[]="Nestor Valente";
  $a[]="Nathan";
  $a[]="Todd Geary";
  $a[]="Thomas";
  $a[]="Hisa";
  $a[]="Pinay Mommy";
  $a[]="Meg";
  $a[]="Tim Welch";
  $a[]="Joliveira";
  $a[]="UDAY";
  $a[]="ULA";
  $a[]="Victoria";
  $a[]="Vanessa";
  $a[]="Liam";
  $a[]="Emma";
  $a[]="Emily";
  $a[]="William";
 
 
  //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;
 
?>

Now run this AJAX application and tell me your experiences :)



Pages : 1 2