d’bug shares tips, tricks, and advice with Web development professionals

The most common approach to passing data to PHP with jQuery’s Ajax implementation is to post query string parameters as key/value pairs. These values are read by your application, and then a response is typically constructed by the server-side, informing the client-side of the results. However, there is another approach that is often overlooked, and that is passing a full-blown XML document object to the server.

There is little mention of this in the official documentation, which makes it difficult to construct a working example. The approach does have several advantages, including the ability to use remote procedure calls via XML-RPC on the client-side. For instance, in Magento Commerce there is already a services API that you could connect to from jQuery to read catalog, customer or product data. All you would need to do is pass across an XML document that adheres to the XML-RPC specification.

The alternative is creating a hook that accepts an XMLHttpRequest, which then calls the API, and then returns a response. You are able to bypass this step by using jQuery’s built-in ability to send an XML document object with the .ajax() function.

Creating an XML document client-side

The first step is to create an XML document on the client-side that can be passed along in the request. I will take direction from the createXMLDocument plugin. This is fairly straightforward.

jQuery.createXMLDocument = function( s ) {
	var browserName = navigator.appName;
	var xmlDoc;
	if ( browserName == "Microsoft Internet Explorer" ) {
		xmlDoc = new ActiveXObject( "Microsoft.XMLDOM" );
		xmlDoc.async = "false";
		xmlDoc.loadXML( s );
	} else {
		xmlDoc = ( new DOMParser() ).parseFromString( s, "text/xml" );
	}
	return xmlDoc;
}

The function takes a string as an argument, which should be a string representation of an XML schema. What will be returned back is an XML document object.

Create your XML and build your Ajax function

$(function() {
	var xmlDoc = jQuery.createXMLDocument( "<items></items>" );
	jQuery( "items", xmlDoc ).append( jQuery( "<item>Hello World!</item>" ) );
	jQuery.ajax({
		url: "your-server-side-script.php",
		type: "POST",
		processData: false,
		contentType: "text/xml",
		data: xmlDoc,
		success: function( data ) {
			alert( data );
		}
	});
});

Here are a few important points to remember with this little snippet:

• After creating your XML document, the way to append nodes is to use jQuery as an object wrapper in the method. If you try to append a string as a node to an XML document it does not appear to work.
• The processData parameter must be set to false. If you do not do this, then any data sent will be interpreted as a string, no matter how you set your contentType.
• Your contentType must be “text/xml”.
• All the success function will do at this point is alert what the PHP sends back in the response. If you were making a remote procedure call, you could set up a wrapper to handle the specially formatted XML response according to the XML-RPC specification.

Process an XML POST request from your PHP script

If you have never tried this before, then the whole process might appear confusing at first glance. Because you’re not sending POST variables, but an actual XML document, then you can’t use the $_POST predefined variable. You will have to use $HTTP_RAW_POST_DATA to get your XML, or the less memory intensive file_get_contents( “php://input” ), which is an input stream.

$xml = file_get_contents( "php://input" );
$simpleXml = simplexml_load_string( $xml );
$simpleXml->xpath( "/items/ITEM" );
foreach ( $simpleXml as $item ) {
	echo $item . "\n";
}

This is self-explanatory, but there is a small glitch that I need to mention. Notice how the ITEM node in the XPath expression is uppercase? The Mozilla Developer Center provides the best explanation:

“In XML (and XML-based languages such as XHTML), tagName preserves case. In HTML, tagName returns the element name in the canonical uppercase form. The value of tagName is the same as that of nodeName.”

The internals of jQuery on a DOM node insertion do not reconcile the uppercase form, and so when you search for a node by expression you need to be aware of this. Now that you know that little tidbit you are one step closer to using XML as your primary data interchange format across the board.

Edit 7/17/09: I was just reading over this again and realized I hadn’t swapped the less than/greater than signs with their html entity counterparts. Sorry about that for those that were confused!