Introduction

In my first article "Ajax Tutorial for Beginners: Part 1" which you can read here, I discussed Ajax, how it works, and how to create an XMLHttpRequest object. Now let us play some more with Ajax. In this article, I will be explaining XML and JSON (JavaScript Object Notation). The purpose of explaining both XML and JSON technology is not to compare one to the other, but to distribute the knowledge of both, as I feel confident in saying many beginners are aware of XML but not JSON.

If you are hearing this word, "JSON," for the first time, please do not worry about it as it is more simple than XML and also simple to use in JavaScript.

I will not describe: What is JSON? How is it formed? When was it started? bla bla bla... All I will say to you guys is that it is a lightweight data-interchange format, which is easy to read and write. Now let's be more practical.

Now what if we have an array of the same tags. If this is the case, we have to use an array and place all the tags inside []. Like here in the XML file, there are four weatherreport tags, so we have to place all its attributes in an array. Let's see how.

Yes that's it, we have converted an XML file into JSON. Now let's use this XML and JSON file into Ajax together.

How Can we Use Ajax with XML Response and with JSON

In the code, I have explained that the response coming from the web server depends upon user selection, i.e. whether the user will select XML type or JSON. In this example, the user will type any one of the major cities in a textbox which will return the weather report of that city. You can add as many details as you want, right now I have only added weather temperature in degrees Celsius.

Web browser requests the content of just the part of the page that it needs to refresh.

Web server analyzes the received request and builds up an XML message or JSON depend upon the user selection, which is then sent back to the web browser.

After the web browser receives the XML/JSON message, it parses the message in order to update the content of that part of the page.

Ok, let's start building some front end for the user.

<formid="form1"runat="server"><div><h3>Small Ajax Application using XML & JSON to see the Weather
of a particular city </h3><br/><h5>( At present weather details is limited to four major cities
of India i.e. mumbai, delhi, chennai & kolkata )</h5><br/>
Choose Type here :
<asp:DropDownListrunat="server"ID="ddlType"><asp:ListItemValue="XML"Selected="True">XML
</asp:ListItem><asp:ListItemValue="JSON">JSON</asp:ListItem></asp:DropDownList><br/><br/>
Type the city here: <inputtype="text"id="txtCity"onkeyup="FetchWeather(this.value)"/><br/><asp:Labelrunat="server"ID="lblWeather"/></div></form>

User will select the type of the response he/she wants from the web server.

User will type the city he/she wants to see the weather report.

Here in our textbox we have fired an event 'onkeyup' which will call the FetchWeather() function.

Now let's have a look to our Ajax FetchWeather function which we have to write in the JavaScript part.

Next we open our connection to the web server with our newly created XMLHttpRequest object. Here the FetchWeather.aspx page is the page from where we will get the XML/JSON response (pending on the user's selection). I am passing the city name and type in the form of querystring to the FetchWeather.aspx page.

Other than that it's a nice introduction to JSON
I would actually add why we would want to use JSON. You have a line of code for this but do not go into details
var json = eval('('+ xmlHttpRequest.responseText +')');
The reason is because JSON is how objects are declared in JavaScript.

Example JavaScript: var obj = {'Name':'George', 'Age':34};
That is why we can easily parse response from the server by simply calling eval function.
If we were sending XML from the server then we will have to have some kind of XML parser on client end. And do all work ourself.