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.

9 Comments

Comments have been disabled for this content.