Jacob Santos

I didn’t find the AJAX frameworks much use while I was working on my current project. I’m sure they are well thought out and designed, but after going through two or three, I was more lost than when I started. I decided then that I should learn how this whole AJAX thing works from the ground up. Turns out XMLHttpRequest isn’t all that difficult, once you get past a few JavaScript cross browser hiccups.

The PHP Back-end

You have three methods for how you can display the information. Each one has its benefits and issues that you’ll need to address in JavaScript.

1. XML

This is perhaps, the most used way. There are debates of the benefits of using XML, but JavaScript can be used to parse the XML. The speed in doing so, is up to how well you write the JavaScript code. I thought it was fun using this.

Benefits:

• Using XML does allow you to send all of the information back to JavaScript on the first request.
• You can also request the same page using PHP or another language, so you aren’t limited to just JavaScript.
2. HTML

You can send HTML to JS, but if you need multiple elements, then you will have to page them. For some reason, when I was sending multiple elements, it couldn’t ‘sense’ the other elements. I think it needed a wrapper, such as a div around all of the elements. If not, then it will recognize the first element ID, but not any other.

It is quicker than XML parsing, so if you only need it to display, then this method works great.

3. JSON

There is a debate over using JSON over XML, but there are pros and cons for both sides. I don’t care about the debate, but for myself, I would rather like to use this method to save from parsing XML, but still receive an array of data. In PHP 5.2, they are adding a function that will make this an simple task, which is much needed. The PHP function should save a lot of time researching and testing.

It is really quite simple using PHP. The XMLHttpRequest object GETs or POSTs to the page just like the browser would, so you just code the page like you would if the browser was going to take a look out it, except you only need the information you are going to use.

XMLHttpRequest Quirks

Or what I like to call, “What you should know before you bash your head in to the wall causing brain damage.”

Don’t Create an Instance of the Same Object For multiple Tasks

Do so and it will throw an exception at you. The way to get around this is to create multiple objects that extend the original XMLHttpRequest Object or the one that you created for cross-browser development, like below.

Don’t:

function myObject { }

myObject.prototype = new xmlTransport();

var object1 = new myObject;
var object2 = new myObject;

Do:

function myObject1 { }

myObject1.prototype = new xmlTransport();

function myObject2 { }

myObject2.prototype = new xmlTransport();

Actually, the better method would be to use the same object and resend the requests getting what you need in the same object instead of creating multiple objects for the task.

Always Call XMLHttpRequest Object First

Once upon a time, before IE 7, you called the ActiveX first and then called the JavaScript object. This is not the case any longer. If you continue to do so for IE 7, you will still use the ActiveX component, which may not work if they disabled or blocked ActiveX. If you look for the object first, the request will still work.

if(window.XMLHttpRequest)
{
	this.xmlhttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
	try {
		this.xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
	}
	catch(e)
	{
		try {
			this.xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
		}
		catch(e2) { }
	}
}

Note, if this code looks familiar like the hundreds of other tutorials out there, then yeah. I did ‘borrow’ it from another site. I don’t know JS enough to write it myself. However, I did modify it so that it looks for the XMLHttpRequest object first and the ActiveX Object last.

Full Code:

function xmlTransport()
{
	this.xmlhttp = null;

	this._GetTransport();
}

xmlTransport.prototype._GetTransport = function()
{
	if(window.XMLHttpRequest)
	{
		this.xmlhttp = new XMLHttpRequest();
	}
	else if(window.ActiveXObject)
	{
		try {
			this.xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
		}
		catch(e)
		{
			try {
				this.xmlhttp = new ActiveXObject("Msxml2.XMLHttp");
			}
			catch(e2) { }
		}
	}

	if(this.xmlhttp == null)
	{
		alert("Constructor called and xmlhttp not Object");
	}
}

xmlTransport.prototype.isLoading = function()
{
	if(this.xmlhttp.readyState == 4)
	{
		return false;
	}

	return true;
}

I have the isLoading method in there, but I don’t ever use it. Which is funny, now that I think about it. I put the method in there so that I wouldn’t have to test readyState all of the time, but I found out that calling it is easier than trying to remember that there is a method that does that job for me. The method was suppose to display a loading message and what not, but I never got around to adding that feature.

Possibly Related Posts:

• Game Engine Development and Open Source
• Plans for Base CMS
• Bullet: E-Book Library Management and Content Server
• Using ZendFramework 2 beta1 For Directory Project
• Project Plans