What is AJAX?

What can AJAX do?

The technologies have always been there but using AJAX as a foundation, we are getting nearer to the levels of power and interactivity of applications without going down the route of Java or ActiveX. Fantastic!

Think of real-time newsfeeds, Formula 1 lap times, chat and many, many more; the list is endless, all this without the need for third party objects and all based on the web standards which makes it far more accessible to people and devices.

Could the typical business application be consumed by the internet?

The problem with AJAX

AJAX requires a certain level of ability in terms of the users computer and software used. JavaScript is required which isn't always supported, the difference between Internet Explorer [bless it] and all the other browsers adds complexity to the code. As we all know, complexity = inaccessibility/unreliability.

JavaScript has served us well in terms of form validation and other usability enhancements but I've never found the need to really dig deep into client-side script due to most things disagreeing with it such as search engines and assistive devices.

There is also a big usability shift as well. We all know the internet, it's reponse to form inputs, navigation, even tables and frames. Now however, we are having to deal with a new model, the internet is reinventing itself and becoming more powerful which raises the game. I still meet new clients who haven't ever been online. Some use the internet daily but are petrified of being presented with more than two choices when making a decision.

Is it worth me learning about AJAX?

Almost certainly. It's powerful and if you wish to operate at a professional level, even knowing the fundamental underlying technologies is essential. If ever there was a case for dropping the server-side stuff for a few months and learning JavaScript in depth, this has to be it.

What does AJAX look like?

The HTML needed for the example looks like:

<form name="form_select">
  <select name="select_select"
        onChange="getInfo()">
    <option value="" selected="selected">
      Select fruit
    </option>
    <option value="1">
      Apples
    </option>
    <option value="2">
      Pears
    </option>
  </select>
</form>
<div id="dyn_div">
  Please select a fruit.
</div>

The JavaScript needed to call the server and update the page looks like:

function createRequestObject(){
  var request_;
  var browser = navigator.appName;
  if(browser == "Microsoft Internet Explorer"){
    request_ = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else
  {
    request_ = new XMLHttpRequest();
  }
  return request_;
}
var http = createRequestObject();
function getInfo(){
  http.open('get', 'test.php?id='
    + document.form_select.select_select.selectedIndex);
  http.onreadystatechange = handleInfo;
  http.send(null);
}
function handleInfo(){
  if(http.readyState == 1){
    document.getElementById('dyn_div').innerHTML = 'Loading...';
  }
  if(http.readyState == 4){
    var response = http.responseText;
    document.getElementById('dyn_div').innerHTML = response;
  }
}

And the server-side code, using PHP in this example looks like:

<?php
  if( $_GET['id'] == 1 )
  {
    echo 'You chose apples';
  }
  else
  {
    echo 'You chose pears';
  }
?>

Not immediately impressive but no refresh despite a server call! The interactive possibilities :)