Use jQuery to call ASP.NET Web Service the right way!

Be Sociable, Share!

Recently I was revising an application created long time ago which uses AJAX and jQuery extensively, and I found myself doing a common mistake which many articles and forums fall into it. The mistake is Normal Serialization for service methods response then Deserializing the JSON string on the client.

I will describe the mistake using the below example, then we will fix it.

As the code snippet above, the Courses class will contain two simple properties and another complex property which will hold a list of course attendees.

I will simulate sending attendee complex object from JS to a WebMethod function in the web service, currently the method will return a JSON string, but wait! this is the common mistake because I will manually serialize the complex object to JSON string. Let’s take a look on the WebMethod GetCourseAttendees

The method returns data type as a String (JSON String), if you notice I’m using JavaScriptSerializer object which is responsible for serializing objects and converting it to JSON string, and you really DO NOT need to do this step. Why? Because ASP.NET JSON enabled methods will automatically do this for you and will serialize the responses for objects and collection of objects.

In the current situation what I’m doing is double serializing the responses which means that Courses object will end serialized twice before it is sent to the client. The response in this situation will look like the below, note how there is escape chars before each double quote which means the JSON string is double serialized.

1

{"CourseID":1,"CourseName":"jQuery and AJAX","CourseAttendees":[{"FirstName":"Taiseer","LastName":"Joudeh"}]}

The impact of this mistake will touch three areas:

Adding over head on the server side to serialize the objects returned, we might have huge objects and this will impact server performance.

Increasing the size of the response returned over the network due to the escape chars added.

Most importantly the client will be affected too because the JS will be responsible to convert the JSON string again to JSON object using JSON.Parse or eval as the code snippet below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

$.ajax({

type:"POST",

data:JSON.stringify(DTO),

url:"POSTHandler.asmx/GetCourseAttendees",

contentType:"application/json; charset=utf-8",

dataType:"json",

success:function(result){

//Using browser native object JSON to parse (Deserialize) the response and convert it to JSON Object.

varcoursesList=JSON.parse(result.d);

//Using eval to parse (Deserialize) the response and convert it to JSON Object.

varcoursesList=eval('('+result.d+')');

}

});

Fixing this common mistake is pretty easy and straight forward, all you need to do is to depend on the web service to do the serialization step, so the method GetCourseAttendees will look as the below, notice how the return data type now is a list of Courses complex object and I get rid of the unnecessary serialization step using the JavaScriptSerializer.

Notice how I’m able to pass JSON serialized Attendee object from the client side to the WebMethod and .NET was able to convert it back to a complex object.

Summary
Always remember to depend on the Serialization/Deserialization provided by the .NET when you consume ASP.NET JSON enabled methods to avoid double serializing responses and the unnecessary overhead on client and server.

Special thanks goes to Dave Ward; reading his blog always enlighten me to use AJAX in the right way.