AJAX vs AHAH Is there a performance advantage?

Question

My concern is performance, is there a reason to to send the client XML instead of valid HTML? Like most things, I am sure it is application dependent. My specific situation is where there is substantial content being inserted into the web page that has been pulled from a database.

What are the advantages of either approach? Is the size of the content even a concern? Or, in the case of using XML, will the time for the Javascript to process the XML into HTML counterbalance the extra time that would have been required to send HTML to start with?

Thanks, Jeff

Answer 1

AJAX hasn't been strictly followed per its acronym for years. It's just a moniker now for "asynchronously loaded content".

Most AJAX these days is done with JSON.

Whether or not you go with HTML as your data over JSON or anything else (even XML) is really up to the specific needs of your application. In that respect, AHAH is really just a subset of AJAX.

If there is no benefit to be gained from having the client-side parse/render the data, then just have the server-side do it and return HTML.

Answer 2

JSON ( Javascript Object Notation ) is more often used than XML because it is lightweight, and native Javascript.

That being said, if what you need is XML, then you would pull back XML.

Here's a good page on when to use HTML, XML or JSON

Here's a good page on the differences between the two.

JSON is used for performance reasons, mostly. To use the example from that page:

XML:

<?xml version=’1.0′ encoding=’UTF-8′?>
<card>
  <fullname>Bala Arjunan</fullname>
  <org>PH</org>
  <emailaddrs>
   <address type=’work’>[email protected]</address>
   <address type=’home’ pref=’1′>[email protected]</address>
  </emailaddrs>
  <telephones>
   <tel type=’work’ pref=’1′>+12345678</tel>
   <tel type=’mobile’>+1234 1234</tel>
  </telephones>
  <addresses>
   <address type=’work’ format=’B'>1234 Oil Mill St Chennai, IND</address>
   <address type=’home’ format=’B'>5678 Oil Mill St Chennai, IND</address>
  </addresses>
  <urls>
   <address type=’work’>http://balaarjunan.wordpress.com/&lt;/address&gt;
   <address type=’home’>http://balaarjunan.wordpress.com/&lt;/address&gt;
  </urls>
</card>

JSON:

{
  “fullname”: “Bala Arjunan”,
  “org”: “PH”,
  “emailaddrs”: [
    {"type": "work", "value": "[email protected]"},
    {"type": "home", "pref": 1, "value": "[email protected]"}
  ],
  “telephones”: [
    {"type": "work", "pref": 1, "value": "+12345678"},
    {"type": "mobile", "value": "+1234 1234"}
  ],
  “addresses”: [
    {"type": "work", "format": "us", "value": "1234 Oil Mill St Chennai, IND"},
    {"type": "home", "format": "us", "5678 Oil Mill St Chennai, IND"}
  ],
  “urls”: [
    {"type": "work", "value": "http://balaarjunan.wordpress.com/"},
    {"type": "home", "value": "http://balaarjunan.wordpress.com/"}
  ]
}

With JSON, there is far less redundancy.

OTOH, sending plain ol' HTML is very effective at times as well. You have to think about your data. If you're just updating a paragraph of text, just send html through. IF you're dealing with items, or a collection of items that you're going to manipulate or use somehow in Javascript, you want JSON. If you want to ASyncronously update your RSS Feed or some other XML, you ask for XML.

Remember, HTML is just a subset of XML. and xHTML follows all the xml rules. Browsers that are javascript aware ( all of them ) can understand JSON ( Javascript ) and HTML (XML). Choose what fits your project based on how you will use the data.

Answer 3

It's important to recognize that even when fetching HTML you shouldn't just stick it straight into the DOM without processing it. If it's not transmitted through a secure protocol it could be subject to MITM attacks. Any time saved parsing XML is spent on sanitizing the HTML to prevent script injections.

XML is more portable too. The data served in XML can be used anywhere on any page. HTML is different in this aspect (although it can be styled with CSS), not all browsers have a readily available parser without inserting the content into the DOM. Some may have DOMDocument(), but you can't rely on it for cross browser purposes. With XML, you can also target and extract the data you need effortlessly using XPath. With HTML (x-browser), you'd need to insert into the DOM first or use the ever-so-unreliable regexp method that really shouldn't ever be used.

JSON is more lightweight, it does away with a lot of the bulk that comes with XML and HTML. Being native markup for JavaScript objects, it's also very easy to parse. Unlike XML and HTML, you can also access JSON data cross domain using JSON with Padding (JSONP).

In summary, you need to choose the method that best suits your needs. Most people tend to go with JSON these days because it's very light weight, can be accessed cross domain and requires very little effort to parse with JavaScript.