AJAX: Intro

***John*** · #1 (**permalink**) 09-23-2007, 11:15 PM

AJAX is one of the newest and post popular technologies. AJAX [Asynchronous JavaScript and XML] allows you to send a request to the server and view the results without having to refresh the page. This enables you to create a more "windows-like" applications. This tutorial will explain the basics of AJAX.

The heart behind AJAX is the JavaScript XMLHttpRequest object. Since all browsers react differently to JavaScript creating a cross browser application can be difficult. The core code I always use is below:

JavaScript Code:

<script type="text/javascript">
function ajax()
  {
  var xmlHttp;
  try
    {
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("AJAX is not supported by your browser.");
        return false;
        }
      }
    }
  }
</script>

This code works with FireFox, Internet Explorer, Opera, and many more. To send information to a server, I use the open() and send() functions. Open accepts three parameters, the "connection" type (either POST or GET), the file location, and a boolean value which determines whether the connection should be asynchronous. The send() function "sends" the request. The code will look like this:

JavaScript Code:

xmlHttp.open("GET", "ajax.php", true);
xmlHttp.send(null);

Now before you actually submit data to a file you should actually make sure data needs to be submitted, and we do that by making sure the "state" was changed.

Which might look like this:

JavaScript Code:

xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.formName.elementName.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET", "ajax.php", true);
    xmlHttp.send(null);
  }

The ready state has five "states": 0, 1, 2, 3, and 4. Ill tell you more about them in future tutorials when they are needed, but for this tutorial all we are concerned with is state four, which means the request is complete. So essentially what the code above does, is - if the request was complete, the web page is going to update the, lets say input box, named elementName inside the form named formName with the response from the server - which is a value echoed plain text. For example if ajax.php had this code:

PHP Code:


			
echo date('l dS \of F Y h:i:s A');

And you had an html file like this:

HTML4Strict Code:

<html>
<head>
<title>Ajax Time</title>
<script type="text/javascript">
function ajax()
  {
  var xmlHttp;
  try
    {
    xmlHttp=new XMLHttpRequest();
    }
  catch (e)
    {
    try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
    catch (e)
      {
      try
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      catch (e)
        {
        alert("Ajax is not supported by your browser.");
        return false;
        }
      }
    }
     xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
        document.formName.elementName.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET", "ajax.php", true);
    xmlHttp.send(null);
  }
</script>
</head>
<body>
<form name="formName">
Anything: <input type="text"
onkeyup="ajax();" name="anything" />
Time: <input type="text" name="elementName" />
</form>
</html>

Assuming you setup everything properly, each time you type something in the "anything" input box the "elementName" input box should update with the current time.

Crane · #2 (**permalink**) 11-07-2007, 09:52 PM

Excellent Tutorial. I always thought that AJAX was a new language (a combination of languages) but it doesn't seem so complicated. If you can create an XML document with one language all you need to do is fetch it with JavaScript.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Considering Ajax, Part 1: Cut through the hype	Ronin	JavaScript and CSS	0	12-13-2006 03:36 PM
Myth-Busting AJAX (In)security	Jordan	AJAX	1	12-03-2006 02:21 PM
AJAX Evolved	Jordan	JavaScript and CSS	0	09-09-2006 02:12 PM
More AJAX Resources	NeedHelp	JavaScript and CSS	2	07-13-2006 01:57 PM
Anybody use Ajax?	Dan	JavaScript and CSS	9	07-05-2006 04:25 PM

WingedPanther	........	2672.3
Xav	........	2581.51
Brandon W	........	1699.26
John	........	1207.73
marwex89	........	1175.24
morefood2001	........	959.05
dcs	........	650.52
Steve.L	........	475.59
orjan	........	409.29
chili5	........	380.6

CodeCall

Contest Stats

CodeCall Goal

Sponsors

Ads

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)