The problem of JSON and how to fix it(Update with code sample)

In AJAX world, JSON is one of the most popular implementation, Asp.Net AJAX is using this concept, and it really works great.

But in some very special situation, JSON could cause some unexpected problems.For example, if the user want to submit a huge document on the local to the server side, you will find it takes too much time before the server-side gets requested.Why?

We knew that one task for the so-call AJAX framework is to serialize the data and on the server-side to de-serialize the data. But if the data is huge, then the serialization itself will take a while.

If the server only needs the body of the huge document, why do we need to serialize the client -side data? In this case, we don't need the serialization at all and we can use the XmlHttp post to implement the AJAX call ourselves.

(I read some comments and feedbacks said it I can post some simple example code, that will be helpful, I am sorry for that I did not do that at beginning)

The Javascript AJAX call will be like:

   1:  var xmlpost;
   2:  function OnXmlPostRequestComplete(args){}
   3:  function OnXmlPostRequestTimeout(){alert('Timeout not implemented.');}
   4:  function OnXmlPostRequestError(){alert('Exception not implemented');}
   5:  function AjaxSaveDocument(documentText,OnPostRequestComplete,OnPostRequestError,OnWebRequestTimeout)
   6:  {
   7:      xmlpost=new ActiveXObject("Microsoft.XMLHTTP")
   8:      OnXmlPostWebRequestComplete=OnPostRequestComplete;
   9:      OnXmlPostWebRequestError=OnPostRequestError;
  10:      OnXmlPostWebRequestTimeout=OnWebRequestTimeout;
  11:      
  12:      xmlpost.open("POST", "AjaxSaveDocument.aspx");
  13:      xmlpost.onreadystatechange=OnPostRequestCompleted;
  14:      xmlpost.setRequestHeader("Content-Type", "text/html; charset=utf-8")
  15:      xmlpost.send(documentText)
  16:  }
  17:   
  18:  function OnPostRequestCompleted() 
  19:  { 
  20:      if (xmlhttp.readyState==4) {
  21:      
  22:          if(xmlhttp.statusCode>299)
  23:          {
  24:              OnXmlPostRequestTimeout();
  25:          }
  26:          else
  27:          {
  28:             try
  29:             {
  30:                OnXmlPostRequestComplete(xmlhttp.responseText);               
  31:             }
  32:             catch(error)
  33:             {
  34:                OnXmlPostRequestError();
  35:             }
  36:          }
  37:       }
  38:  }

The Javascript consumer call will be like :

   1:      var documentText = document.getElementById("txtBody").value;
   2:      AjaxSaveDocument(documentText,OnCustomerizedAjaxCallComplete);
   3:      function OnCustomerizedAjaxCallComplete(args)
   4:      {
   5:         alert("Save Result is " + args);
   6:      }
 
On the server side code-behind, the C# code will get the http request stream and parse the stream to the string, then put the business logic
   1:  public partial class AjaxSaveDocument : System.Web.UI.Page
   2:  {
   3:      private string RequestInputStreamToString()
   4:      {
   5:          using (StreamReader reader = new StreamReader(Request.InputStream))
   6:          {
   7:              string contents = reader.ReadToEnd();
   8:              return contents;
   9:          }
  10:      }
  11:      protected void Page_Load(object sender, EventArgs e)
  12:      {
  13:          if (Request.HttpMethod == "POST")
  14:          {
  15:              string strmContents = RequestInputStreamToString();
  16:             
  17:              Response.Clear();
  18:              Response.Write(string.Format("Content length is {0}",strmContents.Length));
  19:              Response.End();
  20:          }
  21:      }
  22:  }
 
I will try Casey Barton's suggestion to see will that work and how it will work. I tried that solution before but I did not try very hard on it since I like to everything from scratch :(
Here is the feedback from Casey Barton:
"

Tuesday, November 18, 2008 10:03 AM by Casey Barton

The *real* fix would be to implement asynchronous (de)serialization for AJAX requests and responses, that operates on the HTTP stream as it transfers data.

"
 
Thanks for you guys great feedback.
Published Monday, November 17, 2008 11:39 PM by RobertNet
Filed under: ,

Comments

# re: The problem of JSON and how to fix it

Tuesday, November 18, 2008 5:32 AM by Delf

It could be appreciated to post a short example.

# re: The problem of JSON and how to fix it

Tuesday, November 18, 2008 7:34 AM by CurlyFro

i hate seeing articles like these in my feeds.

waste of a post -- put some meat behind it.

# re: The problem of JSON and how to fix it

Tuesday, November 18, 2008 9:45 AM by tsantos

I almost see your point. Could you please post a short sample, so we all can fully understand the concept?

# re: The problem of JSON and how to fix it

Tuesday, November 18, 2008 10:03 AM by Casey Barton

The *real* fix would be to implement asynchronous (de)serialization for AJAX requests and responses, that operates on the HTTP stream as it transfers data.

# re: The problem of JSON and how to fix it(Update with code sample)

Wednesday, April 20, 2011 7:16 AM by weblogs.asp.net

The problem of json and how to fix it.. Dandy :)

# re: The problem of JSON and how to fix it(Update with code sample)

Friday, May 6, 2011 5:14 PM by weblogs.asp.net

The problem of json and how to fix it.. Great idea :)

# re: The problem of JSON and how to fix it(Update with code sample)

Monday, June 20, 2011 8:09 AM by weblogs.asp.net

The problem of json and how to fix it.. OMG! :)

# re: The problem of JSON and how to fix it(Update with code sample)

Tuesday, July 5, 2011 2:41 PM by Janaye

With the bases lodead you struck us out with that answer!

# re: The problem of JSON and how to fix it(Update with code sample)

Sunday, September 30, 2012 5:20 AM by Eve

Interesting, I'll give it a try.  It was IE7 s refusal to smibut my call to getJSON that initially brought me here.  I've done more testing and determined that it always works as long as:1. The  data' argument isn't too long.  Somewhere around 2048 is the limit for IE get requests, including the base URL.2. I call $.ajaxSetup({ cache: false }); before I send the getJSON request.All well and good unless you have a lot of data to send, which I do.  So I'm going to give your approach a try, thanks!