AJAX XMLHttpRequest Object JavaScript tutorial

AJAX is not a technology in it's own right but rather a approach based on a combnation of existing technologies. The main advantage that AJAX-based applications have over conventional Web applications is that using AJAX a Web pages HTML elements can be populated with out first refreshing the page. Which in theory, if not always in practise, leads to shorter responce times and facilitates the creation of more dynamic user interaction.

AJAX is primarily based around JavaScript or as it is sometimes refererred to ECMAScript.

JavaScript is a powerful, client-side scripting language. That was originally developed by Mozilla's Technical Architect, Brendan Eich. However, unfortunately different implementations of JavaScript are not completely interoperable with each other and writing cross browser JavaScript is oftern a tedious affair.

Asynchronous JavaScript works by using a Web browsers embedded HTTP request object to dynamically manipulate data asynchronously.

The XMLHttpRequest object or XMLHTTP (Microsoft's implementation) are programming interfaces or API's that enables script written in client-side JavaScript to perform HTTP requests.

Web browser support for HTTP request objects has been available since Internet Explorer 5.0 or Mozilla 1.0. However, AJAX is not strictly limited to the use of HTTP request objects and other approaches excist that make use of hidden iframe or frame tags in order to obtain simular results.

AJAX Security

When developing AJAX applications, client-side validation and data type filtering must always be duplicated on the server-side, which requires greater client-server processing. However, this is necessary as AJAX Web applications are susceptible to request parameter manipulation attempts, denial of service attacks and other common Web vulnerabilities.

In order to help prevent cross-site scripting. The latest Web browsers impose security restrictions which limit requests using the XMLHttpRequest object to your own Web server. However, the problem can be easily worked around with Apache by using a combination of mod_proxy and mod_rewrite rules or by developing a application level proxy (front controller) to re-route your applications requests.

AJAX Performance

Web optimisation is largely based around two tenets:

HTTP optimisation: Reducing the number of and ideally the size of HTTP request packets that are made to and from a Web server by using HTTP compression and caching.
Database optimisation: Reducing the number and complexity of queries, and other expensive database operations such as inserts or updates that are made to a database.

AJAX Web applications that are not implemented with Web server performance in mind are in danger of falling into a scalability trap.

The use of AJAX in Web applications, more offtern that not, substantially increases the number of HTTP requests that are made to and by a Web server. At some point this will have a detrimental effect on server performance.

JavaScript usage also increases the clients CPU load which may cause users to experience slow responce times, due a lack of system resources or network bottlenecks. It is therefor important that Web Developers utilise AJAX technologies appropriately.

AJAX Usability

Many AJAX applications are very poorly designed and breach conventions and standards that apply to usability, accessibility, user flow and user interface design.

Such applications should not be emulated. They confuse Web users who on the whole have enough trouble using conventional Web applications, with out the need to complicate matters still further by introducing non-standard controls and processes.

Minimum Systems Requirements

Web developers should always design Web based systems functionality to degrade gracefully.

It is worth keeping in mind that around three percent of Web users either have JavaScript disabled, use slow dial up accounts or have antiquated or unusual browsers, running on old computers.

One should not underestimate the amount of trouble that this group of people can cause and they must be accommodated. Always detect and display messages to such users explaining exactly why they can't access or use a certain feature. Otherwise they will feel obligated to whine about the matter to your support department or worse, tell other people that your Web site "doesn't work".

Making a simple GET Request using AJAX

The JavaScript example below makes a simple GET request that imports and displays the contence of a text file to the user. In order to test out this example for yourself, you will need to first create a text format file named textfile.txt and populate it will some text or HTML. Then save the code below to a HTML file within the same directory.

Alternatively I have compressed both the files in a ZIP archive that is available for you to download ajax_example.zip.

If your intrested in reading more about AJAX, I have added links to some of the best resources to our links directories AJAX links page.


<html>
<head>
<title>XMLHttpRequest Object GET Request</title>
</head>
<body>

<script language="javascript" type="text/javascript">
<!--

  // request variable
  var request_var;

  // Request object method wrapper function
  function request_object()
  {
    try
    {
      return new ActiveXObject('Msxml2.XMLHTTP');
    }
      catch(e)
      {
        try
        {
        return new ActiveXObject('Microsoft.XMLHTTP');
        }
          catch(e)
          {
          return new XMLHttpRequest();
          }
      }
  }

  // Call the request object method wrapper function
  request_var=request_object();

  if(!request_var)
  {
    alert("Your Web browser does not support the XMLHttpRequest object.");
  }

  function load()
  {
    if(request_var.readyState==4)
    {
    document.getElementById('elements_id').innerHTML=request_var.responseText;
    }
  }

  function call()
  {
    if(request_var)
    {
    d=document;

    request_var.open("GET","textfile.txt",true);
    request_var.onreadystatechange=load;
    request_var.send(null);
    }
  }

//-->
</script>

<div id="elements_id"></div> 

<a onclick="call()" href="#">XMLHttpRequest Object GET Request</a>
</body>
</html>

JavaScript topic page

Add link to:

del.icio.us | reddit

reddit |

digg |

technorati