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.