How to Write AJAX Application

Now be more practical and develop a small and easy AJAX application. This will be your frist coded AJAX application. First of all, we are going to create a standard HTML form with two text fields: username and time. The username field will be filled in by the user and the time field will be filled in using AJAX.

The HTML file will be named “First_Ajax_Application.html”, and it looks like this (notice that the HTML form below has no submit button) :

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

 <html>
  <head>
  	<title>HeyGB.com - First Ajax Application</title>
  <head>
  <body>
 
  <form name="myForm">
  Type you name below:<br />
  Name: <input type="text" onKeyUp="ajaxFunction();" name="username" /><br />
  Time: <input type="text" name="time" />
  </form>
 
  </body>
  </html>

 
AJAX and Browser Compatibility

As I already told you XMLHttpRequest Object is the core of AJAX without it AJAX is heartless. Different browsers use different methods to create the XMLHttpRequest object. Internet Explorer uses an ActiveXObject, while other browsers uses the built-in JavaScript object called XMLHttpRequest.

To create this object, and deal with different browsers, we are going to use a “try and catch” statement.

Let’s update our “First_Ajax_Application.html” file with the JavaScript that creates the XMLHttpRequest object:

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

  <html>
  <head>
	   <title>HeyGB.com - First Ajax Application</title>
  <head>
  <body>
 
  <script type="text/javascript">
  function ajaxFunction()
  {
  var xmlHttp;
  try
    {
    // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    // Internet Explorer
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Your browser does not support AJAX!");
        return false;
        }
      }
    }
    }
  </script>
 
  <form name="myForm">
  Type you name below:<br />
  Name: <input type="text" onKeyUp="ajaxFunction();" name="username" /><br />
  Time: <input type="text" name="time" />
  </form>
 
  </body>
  </html>

Now lets understand the above code: First create a variable xmlHttp to hold the XMLHttpRequest object.

Then try to create the object with

1

  XMLHttp=new XMLHttpRequest()

This is for the Firefox, Opera, and Safari browsers. If that fails,

1

  try xmlHttp=new ActiveXObject("Msxml2.XMLHTTP")

which is for Internet Explorer 6.0+, if that also fails,

1

  try xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")

which is for Internet Explorer 5.5+ If none of the three methods work, the user has a very outdated browser, and he or she will get an alert stating that the browser doesn’t support AJAX.

Note: The browser-specific code above is long and quite complex. However, this is the code you can use every time you need to create an XMLHttpRequest object, so you can just copy and paste it whenever you need it. The code above is compatible with all the popular browsers: Internet Explorer, Opera, Firefox, and Safari.



Pages : 1 2