CameTooFar

A Nerd's False Positive.

Send bulk data using Ajax using POST


This post is related to my previous post - A Forgotten Story – Ajax in ASP.NET using JavaScript. So, In case of any doubt, please refer the post. This post explains how to send bulk data from client-side to server-side via Ajax.

Recently, in one of my application, I’s trying to send some XML data from client-side to server-side through Ajax, using the default GET method. As long as the size of the xml data is minimal, it works fine. But, when I tried to send a lengthy data using the GET method, then the parameter/argument to which the data assigned appears to be empty, in the server-side.

A small digging took me here.

This is because in Internet Explorer, the GET method can only send a limited set of data to the server-side and is restricted to 2083 characters. To overcome this limitation we can use POST method for sending huge data to the server-side, in the form of name-value pairs. For this, the XMLHttpRequest has a method: send(args) which accepts arguments, which will be posted/send to the server.

Another thing to note is, since you are sending the request through POST, you cannot use Request.QueryString to get the argument’s value. Instead you’ve to use Request.Form[argument_name].

Last but not the least, you’ve to set the RequestHeader during Ajax call as below, else the value in the parameters will be empty.

   1: xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
   2: xmlHttp.setRequestHeader("Content-length", args.length);

The entire code looks like

Client-Side

   1: <script type="text/javascript">
   2:     function sendViaAjax() {
   3:  
   4:         // URL to make the Ajax call
   5:         var url = 'Test.aspx';
   6:  
   7:         // Arguments (with BULK DATA) that is to be passed to the server-side
   8:         var args = 'arg1=somedata&arg2=somebulkdata';
   9:  
  10:         // Creates an Ajax call object
  11:         var xmlHttp = new XMLHttpRequest();
  12:  
  13:         // Specify POST method & URL to connect
  14:         xmlHttp.open("POST", url, true);
  15:  
  16:         // Callback function to response from Server
  17:         xmlHttp.onreadystatechange = function () {
  18:             if (xmlHttp.readyState == 4) {
  19:                 if (xmlHttp.status == 200) {
  20:                     alert(xmlHttp.responseText);
  21:                 }
  22:                 else {
  23:                     alert('Status: ' + xmlHttp.status + ' Response:' + xmlHttp.responseText);
  24:                 }
  25:             }
  26:         };
  27:  
  28:         xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  29:         xmlHttp.setRequestHeader("Content-length", args.length);
  30:  
  31:         // Send Ajax request to Server, along with Arguments
  32:         xmlHttp.send(args);
  33:     }
  34: </script>


Server-Side

   1: protected void Page_Load(object sender, EventArgs e)
   2: {
   3:     string arg1 = Request.Form["arg1"];
   4:     string arg2 = Request.Form["args2"];
   5:     
   6:     // Some operations comes here
   7: }


Yup! That’s it.

Now you know how to send bulk data through Ajax. By the way, this article is aimed at Internet Explorer users.

If you get any error-code like 12030/12031, then please do refer to List of Windows Error Messages.

Hope this helped.

Thanks and Happy Ajaxing.

IE Accelerator - Google Define with Preview and Scroll


Listening to Feedbacks are always a good thing.

When I first build the IE Accelerator - Google Define with Preview, I had an excitement of a small child. Because, that was my very first IE add-on built, when I’s badly surrounded with Open-Source and Firefox fan boys.

Well, one of the problem with the previous release was - if there are more definitions, then we can only see the remaining definitions after selecting the text and scrolling through the search result. Simply, This lacks user-experience because to view the trailing results, user has to scroll though the results after selecting the text.

[Previous Version]

ieacc_without_scroll

One of the missing inevitable feature was a scroll bar to scroll through the definitions listed.

Well that puzzle is solved in this version.

A scroll bar have been implemented which allows you to scroll through the definitions, for a better user experience. Also, I’ve set the font-family to Segoe UI, (one of my favorite clear-type font), which makes the search result more readable and appealing.

[Current Version]

ieacc_with_scroll

If you are a new user, click down here to add this accelerator.

    Preview Enabled
Add To Internet Explorer


All the existing users will be automatically updated to this feature silently.

Happy Defining.

Note:

  1. Accelerators by default won’t support scroll bar, so it won’t be having any mouse wheel support. You need to click on the up and down button of the scroll bar, to scroll through the search results.
  2. Don’t know, what an IE Accelerator is? Check here
  3. Want to support this in Firefox ? Check here
  4. For video demo and more details, Check here

Internet Explorer 9 beta Quick-Tabs Extender


Internet Explorer 9 beta comes with a new-feature called – Quick-Tabs which displays your active website visits.

By default, the Quick-Tab displays only 2 Rows of active websites, with 5 websites in each row.

Default view

Ever imagined about, extending the number of Quick-Tab Rows, to a value say – 3 Rows.

Modified view

IE9b Quick-Tabs Extender helps you to extend the number of Quick-Tab Rows.

All you have to do is to download and run the application.

IE9b Q-Tab Extender

Specify the required number of Quick-Tab Rows. Hit Apply and Restart your browser. And, You’re done…!!!

Download IE9b Quick-Tab Extender

Note:

  1. This is applicable to Internet Explorer 9 Beta and above
  2. The Minimum and Default Quick-Tab row count is 2 and Maximum Quick-Tab row is 5. This is by design.
  3. .NET Framework 2.0 is required to run this application.