AJAX with JQuery

AJAX stands for Asynchronous Javascript and XML, though most people would associate the term with dynamic loading of content without refreshing the browser. I notice that even today a lot of people starting out with AJAX still use the XMLHttpRequest object from scratch that has been around forever.

Traditionally retrieving content with such a method would require no less than something like this:

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for Firefox, Opera, IE7, etc.
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}
 
function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = "OK"
    document.getElementById('T1').innerHTML=xmlhttp.responseText;
    }
  else
    {
    alert("Problem retrieving data:" + xmlhttp.statusText);
    }
  }
}
</script>
...
<body onload="loadXMLDoc('test_xmlhttp.txt')">
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button onclick="loadXMLDoc('test_xmlhttp2.txt')">Click</button>
...

But with the use of many popular frameworks such as Prototype, JQuery, Mootools, Dojo and others AJAX doesn’t have to be a huge mess for a task so simple. Not only would you get simplicity but better cross browser compatibility as the frameworks take a lot of quirks out of the latest browsers. If a new browser comes out, you can usually just update the framework file to keep all your code compatible.

Here is an example of how the above code could be made simpler with JQuery:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

Defining a DOCTYPE is very important when dealing with a javascript framework in order to ensure maximum compatibility with most browsers (especially Internet Explorer). I tend to work in xHTML 1.0 99% of the time because I find the best luck with it in a cross browser market. It’s a much stricter document type than HTML 4.01 Transitional, but it tends to work much better.

 
    <script type="text/javascript" src="jquery.js"></script>
 
    <script type="text/javascript">
     $(document).ready(function() {
          $('#T1').load('test_xmlhttp.txt');
 
          $("button.trigger").bind("click", function(e){
               $('#T1').load('test_xmlhttp2.txt');
         });
    });
    </script>
...
<div id="T1" style="border:1px solid black;height:40;width:300;padding:5"></div><br />
<button class="trigger">Click</button>
...

As you can see, not only does JQuery make AJAX loading easy, the selectors are CSS1-3 based making element selection quite easy as well. For folks needing a bit more control on the return data JQuery also has the get(), post() and ajax() functions. More information regarding these functions can be found here : API/1.3/Ajax

Posted in JS/JQuery

You can follow any responses to this entry through the RSS 2.0 Feed. Both comments and pings are currently closed.

Comments are closed.