Not Just a Hat Rack, Efficient Web Development

In a previous post I mentioned that I would revisit cross-domain AJAX calls to measure the helpfulness of JavaScript frameworks like DOMAssistant and Prototype. In this post I’ll use DOMAssistant to perform the same basic tests I did previously, while evaluating the potential increase in efficiency.

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.

Posted August 22nd, 2008 in (X)HTML, AJAX, JavaScript

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: