Creating a XMLHttp Object

The first thing you’ll notice when using the aid of a JavaScript framework AJAX library is that you don’t have to bother creating a XMLHttp object. That means right off the bat you’ll save yourself some (often painful) cross-browser scripting. You can also be assured that any future improvements to this object implementation will be delivered to your code as long as you keep the framework updated. Thank you JavaScript frameworks!

Setting Up and Sending the Request

Here’s the code I wrote earlier to perform both get and post requests without the help of a framework:

// Create and send an XMLHttp request
function doRequest(url, postVars) {
	// Get the request object (see previous function)
	req = getReqObject()
	// Make sure we have a XMLHttp object created
	if (req) {
		// If it's a post, we have to create and send the request slightly differently.
		if (postVars) {
			req.open('POST', url, true);
			req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			req.send(postVars);
		} else {
			req.open('GET', url, true);
			req.send(null);
		}
		// Set the function that handles the results
		req.onreadystatechange = function () { displayContents(req) };
	}
}

// Request via GET
doRequest('test.php?var=1', null);

// Request via POST
doRequest('test.php', 'var=1');

With DOMAssistant, you have to decide before your call what you are going to do with the data. For simple calls where you just need to return the text, you can use the library’s get or post methods:

// Request via GET
DOMAssistant.AJAX.get('test.php?var=1', displayContents);

// Request via POST
DOMAssistant.AJAX.post('test.php?var=1', displayContents);

However, if you need an XML result that you can parse (like in our working example), you’ll need to make more complex calls:

// Create and send an XMLHttp request
function doRequest(url, postVars) {
	// If it's a post, we have to create and send the request slightly differently.
	if (postVars) {
		DOMAssistant.AJAX.ajax({
			url: url,
			method: "POST",
			params : postVars,
			callback: displayContents,
			responseType: "xml",
			headers : {
				"Content-type" : "application/x-www-form-urlencoded"
			}
		});
	} else {
		DOMAssistant.AJAX.ajax({
			url: url,
			method: "GET,
			callback: displayContents,
			responseType: "xml"
		});
	}
	// Set the function that handles the results
	req.onreadystatechange = function () { displayContents(req) };
}

// Request via GET
doRequest('test.php?var=1', null);

// Request via POST
doRequest('test.php', 'var=1');

As you can see, if you need an XML document for additional post-processing, you’ll end up with almost as much code with DOMAssistant!

Handling the Result

Here’s the function I wrote to alert specific data from the response content:

// Display resulting content from req
function displayContents(req) {
	// Only do something when the request is done
	if (req.readyState == 4) {
		// Make sure it was a success
		if (req.status == 200) {
			// Traverse the resulting XML, alerting titles of items
			var xml = req.responseXML;
			var items = xml.getElementsByTagName("item");
			for (var i = 0; i < items.length; i++) {
				alert(items[i].getElementsByTagName('title').item(0).firstChild.nodeValue);
			}
		} else {
			alert('Problem with the request.');
		}
	}
}

An odd thing about DOMAssistant is that your specified callback function is hardcoded in the framework to be executed after the request is complete. This means you won’t be able to troubleshoot based on the ready state of the request. I also found that the callback function doesn’t have access to the status of the completed request, meaning you won’t know if your request was successful or not. I’m sure there were logical reasons by the developers for this, but in the meantime all you can do is work with the response text.

If you used the get or post methods, you’ll be provided the text of the response:

// Display resulting content from responseText
function displayContents(rText) {
	alert(rText);
}

For our example, we needed an XML document, and as such we need to loop through and extract the information in much the same manner as we did before:

// Display resulting content from req
function displayContents(rXML) {
	var items = rXML.getElementsByTagName("item");
	for (var i = 0; i < items.length; i++) {
		alert(items[i].getElementsByTagName('title').item(0).firstChild.nodeValue);
	}
}

As you can see there really isn’t any difference here except that DOMAssistant actually limits our troubleshooting capabilities.

Cross-Domain Requests

JavaScript frameworks don’t provide a built-in solution for addressing cross-domain request security issues. In fact, the Prototype documentation makes this extremely prominent at the top of their documentation:

Remember that for security reasons (that is preventing cross-site scripting attacks) Ajax requests can only be made to URLs of the same protocol, host and port of the page containing the Ajax request. Some browsers might allow arbitrary URLs, but you shouldn’t rely on support for this.

Conclusion

All in all I’m rather disappointed with DOMAssistant’s AJAX library. For very simple tasks like grabbing, posting and printing text it works great. But for complicated cases, it offers little to no benefit. It could be effective if used in conjunction with a more complex server-side proxy, so that the proxy could handle parsing and the DOMAssistant would just have to retrieve and display text. Next time I’ll take a look at Prototype, and see if it offers more flexible and comprehensive functionality.

Update (8/22/2008): Evaluated Cross-Domain AJAX with DOMAssistant.

AJAX applications have become commonplace, but many of the tutorials for developing them lean heavily on the help of JavaScript frameworks like DOMAssistant or Prototype. So I figured I would take a look at the standard AJAX-related properties and methods, see how cross-domain calls make the whole process slightly more complicated, and find out how much the frameworks can actually help. Without the help of a framework, you basically have three steps to display content obtained via AJAX:

• Create a XMLHttp object
• Setup and send the request
• Display the resulting content

Creating a XMLHttp Object

XMLHTTP was originally created by Microsoft and is still in use today. Other major browsers have adopted the same functionality, but in their XMLHttpRequest object. Since the functionality of both objects is almost identical, we only need to take the separate initialization into account for our code to work cross-browser:

var req;
// Get the XMLHttp object based on browser support
function getReqObject() {
	// If it supports XMLHttpRequest, use that
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
		// Fix a bug for certain browsers that support this object
		if (req.overrideMimeType) {
			req.overrideMimeType('text/xml');
		}
	}
	// Otherwise (IE)
	else if (window.ActiveXObject) {
		// Try two versions
		try {
			req = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch (e) {
			try {
				req = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {}
		}
	}
	// Make sure we have the object
	if (!req) {
		alert('Could not create an XMLHTTP instance.');
		return false
	} else {
		return req
	}
}

Setting Up and Sending the Request

The next step is to set up the request, send it, and specify a function to handle the result:

// Create and send an XMLHttp request
function doRequest(url, postVars) {
	// Get the request object (see previous function)
	req = getReqObject()
	// Make sure we have a XMLHttp object created
	if (req) {
		// If it's a post, we have to create and send the request slightly differently.
		if (postVars) {
			req.open('POST', url, true);
			req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			req.send(postVars);
		} else {
			req.open('GET', url, true);
			req.send(null);
		}
		// Set the function that handles the results
		req.onreadystatechange = function () { displayContents(req) };
	}
}

// Request via GET
doRequest('test.php?var=1', null);

// Request via POST
doRequest('test.php', 'var=1');

Notice that the code is slightly different depending on whether you submit using GET or POST. You can read more about the merits of using GET vs. POST, but basically use GET unless the submission updates a data source, or if it is very large.

We also specified a function to fire whenever the “ready state,” of the request changes. This is the function that will handle the result.

Handling the Result

We’ve sent the request, now we need to create the function to do something with the result:

// Display resulting content from req
function displayContents(req) {
	// Only do something when the request is done
	if (req.readyState == 4) {
		// Make sure it was a success
		if (req.status == 200) {
			// Traverse the resulting XML, alerting titles of items
			var xml = req.responseXML;
			var items = xml.getElementsByTagName("item");
			for (var i = 0; i < items.length; i++) {
				alert(items[i].getElementsByTagName('title').item(0).firstChild.nodeValue);
			}
		} else {
			alert('Problem with the request.');
		}
	}
}

This function ensures the request is completed and that is successful, then traverses the resulting document, alerting the "titles" of "items." Obviously you'll have to substitute the method of crawling the DOM depending on the resulting document. But that should be it right? Well, not exactly.

Cross-Domain Requests

Due to security concerns, the previous code will only work for requests within your particular domain. So what if you want to grab data from an RSS feed hosted on an outside site? You've got a couple of options:

• Create a server-side proxy to grab content
• Use apache's mod_rewrite or mod_proxy to mask outside requests
• Hope the service you're trying to access can output JSON
• Digitally sign your scripts.

We can't rely on services providing JSON output because it's not widely adopted yet, and we can't digitally sign our scripts, because browser support for that is limited. Using mod_rewrite is definitely an option, but a server-side proxy is more extensible given the additional options for server-side processing before the content gets back to our JavaScript. Here's a basic PHP proxy, which will accept a URL and (optionally) post variables from a JavaScript call, and return the content.

<?php
// Set URL we want to access
$url = ( $_POST['url'] ? $_POST['url'] : $_GET['url'] );

// Open Curl session
$session = curl_init($url);

// Set params if posted
if ($_POST['params']) {
	$postvars = '';
	foreach ($_POST['params'] as $postkey=>$postvalue) {
		$postvars .= $postkey . '=' . $postvalue . '&';
	}
	curl_setopt($session, CURLOPT_POST, true);
	curl_setopt($session, CURLOPT_POSTFIELDS, $postvars);
}

// Don't return HTTP headers, do return contents
curl_setopt($session, CURLOPT_HEADER, false);
curl_setopt($session, CURLOPT_RETURNTRANSFER, true);

// Get the file
$xml = curl_exec($session);

// Display content
if ($xml) {
	header("Content-Type: text/xml");
	echo $xml;
} else {
	echo 'No response';
}

// Clean up
curl_close($session)
?>

Now we can make external requests with our JavaScript:

// External request using proxy via GET
doRequest('proxy.php?url=http://externalsite.com/feed.php', null);

// External request using proxy via POST
doRequest('proxy.php', 'url=http://externalsite.com/feed.php');

That's it! Next time I'll take a look at some JavaScript frameworks and see how they can be used to simplify some of this process.