How To Parse An Ajax [object XMLHttpRequest]

This is a quick post to summarize a couple areas of confusion I often see on the web surrounding Ajax and the XMLHttpRequest call. I think for myself, the best source of information that summarizes how this all works is the Javascript Developer Center over at Yahoo. In particular, this article: http://developer.yahoo.com/javascript/howto-ajax.html

So what is all this ajax hype? Let’s break it down based on the great summary from Yahoo:

In a traditional, non-AJAX web world, if your web application needs to get new data to update itself — even if that’s just a tiny bit of data — you write your page so that when new data is required a user action (a button click, for example) triggers the browser to make an HTTP connection (a form submission) back to the web server. The problem is that with each HTTP connection, a new page is reloaded. All the elements of the page are broken down and recreated each time while the user waits for the network and waits for the page to redraw. Its incredibly inefficient, slow, and not much fun for the user.

Great explanation.

Now, we use a lot of Ajax in our applications here at Black Ninja because of it’s efficiency, ease of use and simplicity. What I’d like to point out are the options and gotchas for parsing the XMLHttpRequest object (directly from the Yahoo article credited above, but summarized in bullet form. Anything in green are my comments):

  1. After the XMLHttpRequest call is complete, the response data is contained either in the responseText property, the responseXML property, or both. So if for example, you’re alerting on your response object, and the message box returns “[object XMLHttpRequest]”, the response data is either in response.responseText or response.responseXML.
  2. If the data you get back from the web service is in XML format, both responseXML and responseText are filled.
  3. If the data is in any other format, responseText is filled. However, whether responseXML gets filled is dependent on the browser and the Content-type the server returns (text/xml or application/xml). In practice, responseText seems to be more reliably filled across browsers and web services.
  4. If the responseXML property is filled by the XMLHttpRequest object, that property contains a Document object whose elements you can access in JavaScript using standard DOM methods (getElementsByTagName, etc).
  5. If your response format was XML but all you have is responseText, you will need to use an XML parser to get the information you need out of the XML text. Both Mozilla and Internet Explorer have XML parsers built in; see this tutorial from www.faqts.com for help in getting started.
  6. If your response was in JSON format parsing is perhaps easiest of all. JSON is short for JavaScript Object Notation — JSON is JavaScript. To interpret a JSON response just eval the response, and you’ll get a JavaScript object back:
    var myObj = eval ( xmlhttp.responseText );

    Once you have the data in hand you can update the page with standard JavaScript and DHTML methods. No need to reload or redraw the entire page — just modify the part of the page that needs the new data.

Super great summary, thank you Yahoo Developer Center!

Trackbacks/Pingbacks

  1. Tweets that mention How To Parse An Ajax [object XMLHttpRequest] | SharePoint Fun -- Topsy.com - June 18, 2010

    […] This post was mentioned on Twitter by Planet SharePoint, Erik Neumann. Erik Neumann said: #sharepoint How To Parse An Ajax [object XMLHttpRequest]: This is a quick post to summarize a couple areas of conf… http://bit.ly/cFiYLF […]

Leave a Reply