Using Ajax in ASP.NET application -3 (JSON)

As we saw in our previous post

https://nishantrana.wordpress.com/2007/10/25/using-ajax-in-aspnet-application-2/ 

How easy it becomes to parse the response and the values if it is in the XML rather than plain text.

But that is not the only way there is something called JSON as well

What is JSON?

JSON – Javascript object notation is a format for sending and recieving data similar to XML.

It’s a lightweight data fomat that’s easy to work with in JavaScript.

Check this site for more info http://json.org/

Let’s understand it by an example

We’ll here again modify the application created in our previous post to make use of JSON in place of XML

This time we will be returing an Object to our javascript code in JSON as response.

Let’s say we have on class like this which we would like to return as response to our calling ajax scripts

public class Emp

{

public Emp(){}

private string firstName;

public string FirstName{get { return firstName; } set { firstName = value; }}

private string lastName;

public string LastName{ get { return lastName; } set { lastName = value; }} 

private string[] skills = new string[3]; 

public string[] Skills{ get { return skills; }set { skills = value; }

}} 

To convert it to JSON let’s make use of a library.

We’ll make use of LitJSON here.

We can find all the information and the library for LitJSON here http://litjson.sourceforge.net/doc/manual.html 

(add reference to LitJson.dll in the project) 

Now make this change in our Default2.aspx page’s page Load

protected void Page_Load(object sender, EventArgs e)

{

Emp emp = new Emp();

emp.FirstName = “Donald”;

emp.LastName = “Duck”;

emp.Skills[0] = “ASP.NET”;

emp.Skills[1] = “WCF”;

emp.Skills[2] =”WPF”;

string json_Emp = JsonMapper.ToJson(emp);

Response.Write(json_Emp); 

}

Response.Write(json_Emp) will give us this

{“FirstName”:”Donald”,”LastName”:”Duck”,”Skills”:[“ASP.NET”,”WCF”,”WPF”]}

The changes that we need to make in our Default.aspx page are again in doUpdate function 

function doUpdate()

{

if(xmlHttp.readyState==4)

 {

//{“FirstName”:”Donald”,”LastName”:”Duck”,”Skills”:[“ASP.NET”,”WCF”,”WPF”]}

 var jsonData=eval(‘(‘+xmlHttp.responseText+’)’);

var firstName=jsonData.FirstName;

var lastName=jsonData.LastName; 

var skill1=jsonData.Skills[0];

var skill1=jsonData.Skills[1];

}}

This way we can parse the recieved as JSON which seems much easier comapred to XMLDOM. 

Bye