AJAX in plugins

From e107 Wiki
Jump to: navigation, search

e107 Wiki: English | Русский | Deutsch | Français | Magyar | Português | Български | Česky | Nederlands | Ελληνικά | Italiano | Norske | Polska | Slovenščina | Español | Svenska | Translate: Wiki | Page


Current Release 1.0.4 | e107.org | Download | Changelog | Forum | Plugins | Themes | RSS Feed of Latest Changes | Atom Feed of Latest Changes

How to write a plugin
Main page > I : First Aid > II : Development > III : Administration > IV : How To's > V : Plugin Writing > VI : Theming & Shortcodes

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


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.



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

Code: Creating an XMLHttpRequest object in IE 6.0 and earlier
var XMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
Code: Creating an XMLHttpRequest object in Firefox 1.5+, Opera 7.0+, Safari and IE 7.0+
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.

Code: Creating an XMLHttpRequest object for mainstream browsers
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:

Code: Creating an XMLHttpRequest object 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();