Home arrow JavaScript arrow AJAX with JSON


In my previous article I discussed some of the basics of JSON, the JavaScript Object Notation. It is an object literal notation well suited for data exchange. The object and arrays of JSON are very similar to real world data representation in many programming languages and this makes it a natural competitor with the more ubiquitous XML.

Author Info:
By: Jayaram Krishnaswamy
Rating: 4 stars4 stars4 stars4 stars4 stars / 47
March 12, 2007
  1. · AJAX with JSON
  2. · Retrieving JSON Text using AJAX
  3. · The XMLHTTP Request to retrieve JSON
  4. · Output formatting

print this article

(Page 1 of 4 )

Add to this the fact that it carries the same message in a smaller size and you will realize the impact it will have on transporting the data. As far as structure and usage are concerned both have similar characteristics, including the response to XMLHttpRequest which has made AJAX so popular. This article will demonstrate retrieving JSON text using AJAX and retrieving values by evaluating the returned text.

Retrieving XML using AJAX

Here is the summary and results from the article XML Responses and  AJAX. Herein an AJAX call is made to the URL to get the contents of the webstudents.xml which is shown here.

<!--My students who took web programming class with me-->
<student id="1">
<name>Linda Jones</name> 
<legacySkill>Access, VB5.0</legacySkill>
<student id="2">
<name>Adam Davidson</name> 
<legacySkill>Cobol, MainFrame</legacySkill>
<student id="3">
<name>Charles Boyer</name> 
<legacySkill>HTML, Photoshop</legacySkill>

The AJAX call was made using the following code. This is just vanilla AJAX without the use of any other libraries.

<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<SCRIPT LANGUAGE=javascript>
var xhr = false;
function getPage (url) {
xhr = false;
//this is the Microsoft browser compatible instantiation
//of XmlHttpRequest
xhr = new ActiveXObject("Msxml2.XMLHTTP");
if (!xhr) {
alert ('XMLHttp failed to instantiate');
return false;
xhr.onreadystatechange = statusCheck; 
xhr.open ('GET', url, true);
xhr.send (null); } function statusCheck() { if (xhr.readyState == 4) { if (xhr.status == 200) { //alert(xhr.responseText); // document.getElementById("x1").innerHTML=xhr.responseText; document.getElementById("x1").innerHTML= xhr.responseXML. getElementsByTagName('student')[0].firstChild.xml //responseXML document's firstChild and lastChild document.getElementById("x2").innerHTML= xhr.responseXML. documentElement.firstChild.nodeName document.getElementById("x3").innerHTML= xhr.responseXML. documentElement.lastChild.nodeName //responseXML's firstChild and lastChild document.getElementById("x4").innerHTML= xhr.responseXML. firstChild.nodeName document.getElementById("x5").innerHTML=xhr.responseXML. lastChild.nodeName //documentElement's Children property, second child document.getElementById("x6").innerHTML= xhr.responseXML. documentElement.childNodes.item(3).text document.getElementById("x7").innerHTML= xhr.responseXML. documentElement.childNodes.item(3).attributes[0].name document.getElementById("x8").innerHTML= xhr.responseXML. documentElement.childNodes.item(3).attributes[0].value //accessing student nodes as a collection var nodes=xhr.responseXML.getElementsByTagName ("student"); document.getElementById(9).innerHTML=nodes.length; for (i=0; i<nodes.length; i++) { document.getElementById(10+i).innerHTML= nodes.item(i).text; } alert (xhr.responseXML.xml) } else { alert ('The request could not be fulfilled.'); } } } //--> </SCRIPT> </HEAD> <BODY> <INPUT id=button2 onclick= "getPage ('http://xphtek/TestXMLHttp/WebClass.xml')" type=button value="Get the XML Document" name=button2> <P> </P> <div id=x1></div><div id=x2></div> <div id=x3></div><div id=x4></div> <div id=x5></div><div id=x6></div> <div id=x7></div><div id=x8></div> <div id=9></div><div id=10></div> <div id=11></div><div id=12></div> <div id=13></div> </BODY> </HTML>

Once the document is retrieved it is processed using the XMLDOM API and the ECMA script. The ECMA script retrieves the DOM elements and inserts them into the <div/> elements of the HTML page. In the next section we will see how it is done using the JSON subset.

blog comments powered by Disqus

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials