This page is a stub. You can help e107 by expanding it.

Introduction

Asynchronous Java And XML (AJAX) is a collaboration of various languages to provide a richer end-user experience. It is possible to make use of AJAX in your e107 plugins. To use AJAX it is good if you at least have a basic grasp of JavaScript and understand the objects concept. Hopefully this article will describe the best ways to do this. It will grow as I learn more about AJAX in e107 and hopefully from the input of others.

Note: This page applies to E107 version 0.7/1.0 only - version v2.0 will include support for Ajax using the jquery and/or Prototype frameworks.

IMPORTANT: E_Token - Technical Notes on the e_Token System - How to Avoid Access Denied In Your Plugins & Themes.

Background

XMLHttpRequest

The XMLHttpRequest object is a key player in AJAX. Using this object the user's browser is able to make a page request in the background and show the data. This translates to the user requesting some data and receiving it without having to reload the whole page. This is what makes the web application more like a standard desktop application. There are two flavours of this object, XMLHttpRequest, which is supported in browsers such as Firefox 1.5+, Opera 7.0+, Safari and Internet Explorer 7.0. For earlier versions of Internet Explorer the XMLHttpRequest object takes the guise of the Microsoft.XMLHTTP object.

Creating an XMLHttpRequest Object

var XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");

var XMLHttp = new XMLHttpRequest();

This does leave the problem of how we should allow our end user to look at the page regardless of their web browser. This can be achieved in a number of ways. I will show you the way that I prefer but there are others.

var xmlHttp;

function createXMLHttpRequest() {
  if (window.ActiveXObject) {
    XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
    XMLHttp = new XMLHttpRequest();
  }
}

In fact, it's even easier to do this in e107:

// In PHP, make sure the e107 e_ajax.php file is included.
$footer_js[] = e_FILE_ABS.'e_ajax.js';

// In JavaScript, simply call the XMLHttpRequest() function
var XMLHttp = new XMLHttpRequest();