Plain Text, XML, and JSON Transfer Formats

Today, I will talk about data transfer formats that you see when dealing with AJAX.  The three that are most commonly used are plain text, XML, and JSON.  AJAX stands for Asynchronous JavaScript And XML.  Due to this fact it is commonly misunderstood that XML is the only way to transfer data.  Below I explain the advantages and disadvantages of each and further explain each.

Plain text is by far the simplest of the three.  All it is, you guessed it – plain text.  A PHP file on the server spits out some html or text.  Below is an example:

< ?php
$name = $_GET[‘name'];
echo "<div>Hello $name, and welcome to our website!";
?>

Then using the responseText property of an XMLHttpRequest object we can alter a certain part of our website.

var result = xmlhttp.responseText;
var e = document.getElementById(‘container');
e.innerHTML = result;

The HTML element with an ID of container will now have the above HTML spit out from our PHP.  Another format is to use XML.  XML is unique in that it describes the data it contains within tags similar to HTML.  Its disadvantage is that it takes a little while to get used to navigating around an XML Document.

< ?php
$name = $_GET[‘name'];
echo ‘<name>$name';
?>

For XML we now have to use a different property of the XMLHttpRequest which is the responseXML property.

var result = xmlhttp.responseXML;
var e = document.getElementById(‘container');
e.innerHTML = result.childNodes[0].firstChild;

Lastly another data format is JSON or JavaScript Object Notation.  JSON is more lightweight than XML and is meant specifically for JavaScript.  JSON is a little more complicated to understand and uses more programming syntax than XML.  Below is an example of a person object:

{ "person" :
{

"firstName" : "Brenley",
"lastName" : "Dueck",
"phone" :  [
{ "home" : "444-4444", "work": "555-5555"}
]
}
}

For JSON you use the same property as plain text (reponseText).  The difference is you have to use the eval() function to extract the syntax into an actual JavaScript object.

var result = xmlhttp.responseText;
var person = eval('(' + result + ')');
alert(person.lastName);
alert(person.phone[0].home);

As you can see JSON can be used to transmit complex data objects from PHP to JavaScript and then using JavaScript to change the way the page is shown without a page refresh.  I should make sure to mention that using the eval() function above is a bit of a security risk, as a hacker could potentially run malicious JavaScript.  A better way to deal with this is to use this JSON JS, and JSON PHP Library.

Related posts:

1. AJAX / JSON Guide
2. Default and configuration objects with JavaScript
3. Reading XML Using Flash
4. JQuery JavaScript Framework
5. Client-Side Javascript

Tags: JavaScript, PHP

Written by Brenley Dueck