Sending Large Data

**TejuS** · April 2nd, 2007 06:01 AM

Hello All,

I am new to AJAX. I want some help in passing large data to the server. Basically I have 100 text boxes in a form, I want to pass all this information to an asp or asp.net page, which will then process the data and respondes whether it was successfull or not.

I was thinking of creating a xml string using javascript and then sending it to the server, I am not sure if this is the right approach.

from my search I found that to pass huge data I need to use POST method, I tried it but looks like I am missing something. So it will be great help if somone could guide me or send me some working examples. In advance Thank you very much.

**PeejAvery** · April 2nd, 2007 07:17 AM

Originally Posted by TejuS

I tried it but looks like I am missing something.

Well, could you post the code that you worked with? Don't forget to use code tags.

[code]
You're code here.
[/code]

As concerning examples, you can search Google. This should be very helpful to you.

**TejuS** · April 2nd, 2007 08:28 AM

Hello PeejAvery,

Thank you for your reply below is the code, can you please tell me where I am doing wrong??

AJAX.htm

<html>
<head>
<script src="Global.js" language="javascript"></script>
<script src="XMLWriter.js" language="javascript"></script>
<script language="javascript" type="text/javascript">
var url = "getdata.asp"; // The server-side script
function WriteTest()
{
try
{
var XML=new XMLWriter();
XML.BeginNode("Example");
XML.Attrib("SomeAttribute", "And Some Value");
XML.Attrib("AnotherAttrib", "...");
XML.WriteString("This is an example of the JS XML WriteString method.");
XML.Node("Name", "Value");
XML.BeginNode("SubNode");
XML.BeginNode("SubNode2");
XML.EndNode();
XML.BeginNode("SubNode3");
XML.WriteString("Blah blah.");
XML.EndNode();
XML.Close(); // Takes care of unended tags.
// The replace in the following line are only for making the XML look prettier in the textarea.
document.getElementById("ExampleOutput").value=XML.ToString().replace(/</g,"\n<");
}
catch(Err)
{
alert("Error: " + Err.description);
}
return false;
}

function handleHttpResponse()
{
if (http.readyState == 4) {
if (http.status == 200) {
// Use the XML DOM to unpack the city and state data
results = http.responseText
alert(results);
isWorking = false;
}
else {
alert("There was a problem retrieving the XML data:\n" + http.statusText);
}

}
}

function WriteForm(e)
{
try
{
var Frm=Settings.SrcElement(e);
var XML=new XMLWriter();
XML.BeginNode(Frm.name);
XML.Attrib("Example", "Attribute & Value");
var Nodes=Frm.elements;
for (var i=0;i<Nodes.length;i++)
XML.Node(Nodes[i].name, Nodes[i].value);
XML.EndNode();
XML.Close();
document.getElementById("ExampleOutput").value=XML.ToString().replace(/</g,"\n<");

var ExampleOutput = document.getElementById("ExampleOutput").value;
//var parameters = "ExampleOutput=" + ExampleOutput;
var parameters = "ExampleOutput=Test";

http.open("POST", url, false);

http.setRequestHeader("Content-type", "text/xml");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = handleHttpResponse;
http.send( parameters);
}
catch(Err)
{
alert("Error: " + Err.description);
}
return false;
}

function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/xml");
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}

var http = getHTTPObject(); // We create the HTTP Object

</script>
</head>
<body>
Try entering values into the following fields, then click the Test button to see the
resulting XML.
<form name="User" method="post" action="post" onsubmit="return WriteForm(event);">
<table cellpadding="0" cellspacing="0">
<tr>
<td>First Name:</td>
<td><input type="text" name="FirstName" /></td>
</tr>
<tr>
<td>Middle Name:</td>
<td><input type="text" name="MiddleName" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="LastName" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="Email" /></td>
</tr>
<tr>
<td>Birth Date:</td>
<td>
<input type="text" name="BirthDate" />
<input type="submit" value="Test" />
</td>
</tr>
</table>
</form>

<a href="#" onclick="WriteTest();">Or click here to see another XML exmaple.</a>

<br /><br />
Output:
<form><textarea id="ExampleOutput" style="width:100%" rows="10"></textarea></form>
</body>
</html>

getdata.asp

<%
Dim val
val = request.Form("ExampleOutput")
response.write(val & "--Success")
%>

the xmlstring generated by JS file is something like this

<User Example="Attribute & Value">
<FirstName>Tej</FirstName>
<MiddleName/>
<LastName/>
<Email/>
<TestData/>
<BirthDate/>
</User>

**wildfrog** · April 2nd, 2007 08:37 AM

Read PeejAverys post again, especially the part about using code-tags.

- petter

**PeejAvery** · April 2nd, 2007 08:42 AM

Can you please edit your post to add code tags as I told you in my first post? It makes the reading much simpler. I will review it when I get the time. Maybe someone else will beat me to it.

**TejuS** · April 2nd, 2007 10:31 AM

Hey PeejAvery, sorry forgot about that I hope this is fine?? If not let me know?? Thank you

[code]
var url = "getdata.asp"

document.getElementById("ExampleOutput").value=XML.ToString().replace(/</g,"\n<");

//ExampleOutput contains xmlstring
var ExampleOutput = document.getElementById("ExampleOutput").value;

var parameters = "ExampleOutput=" + ExampleOutput;

http.open("POST", url, false);

http.setRequestHeader("Content-type", "text/xml");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = handleHttpResponse;
http.send( parameters);
[code]

**TejuS** · April 2nd, 2007 10:32 AM

Hey Or if you want it this way

AJAX.htm

<html>
<head>
<script src="Global.js" language="javascript"></script>
<script src="XMLWriter.js" language="javascript"></script>
<script language="javascript" type="text/javascript">
var url = "getdata.asp"; // The server-side script
function WriteTest()
{
try
{
var XML=new XMLWriter();
XML.BeginNode("Example");
XML.Attrib("SomeAttribute", "And Some Value");
XML.Attrib("AnotherAttrib", "...");
XML.WriteString("This is an example of the JS XML WriteString method.");
XML.Node("Name", "Value");
XML.BeginNode("SubNode");
XML.BeginNode("SubNode2");
XML.EndNode();
XML.BeginNode("SubNode3");
XML.WriteString("Blah blah.");
XML.EndNode();
XML.Close(); // Takes care of unended tags.
// The replace in the following line are only for making the XML look prettier in the textarea.
document.getElementById("ExampleOutput").value=XML.ToString().replace(/</g,"\n<");
}
catch(Err)
{
alert("Error: " + Err.description);
}
return false;
}

function handleHttpResponse()
{
if (http.readyState == 4) {
if (http.status == 200) {
// Use the XML DOM to unpack the city and state data
results = http.responseText
alert(results);
isWorking = false;
}
else {
alert("There was a problem retrieving the XML data:\n" + http.statusText);
}

}
}

function WriteForm(e)
{
try
{
var Frm=Settings.SrcElement(e);
var XML=new XMLWriter();
XML.BeginNode(Frm.name);
XML.Attrib("Example", "Attribute & Value");
var Nodes=Frm.elements;
for (var i=0;i<Nodes.length;i++)
XML.Node(Nodes[i].name, Nodes[i].value);
XML.EndNode();
XML.Close();

[code]

document.getElementById("ExampleOutput").value=XML.ToString().replace(/</g,"\n<");

var ExampleOutput = document.getElementById("ExampleOutput").value;
//var parameters = "ExampleOutput=" + ExampleOutput;
var parameters = "ExampleOutput=Test";

http.open("POST", url, false);

http.setRequestHeader("Content-type", "text/xml");
http.setRequestHeader("Content-length", parameters.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = handleHttpResponse;
http.send( parameters);

[code]

}
catch(Err)
{
alert("Error: " + Err.description);
}
return false;
}

function getHTTPObject() {
var xmlhttp;
/*@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @*/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
xmlhttp.overrideMimeType("text/xml");
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}

var http = getHTTPObject(); // We create the HTTP Object

</script>
</head>
<body>
Try entering values into the following fields, then click the Test button to see the
resulting XML.
<form name="User" method="post" action="post" onsubmit="return WriteForm(event);">
<table cellpadding="0" cellspacing="0">
<tr>
<td>First Name:</td>
<td><input type="text" name="FirstName" /></td>
</tr>
<tr>
<td>Middle Name:</td>
<td><input type="text" name="MiddleName" /></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="LastName" /></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="text" name="Email" /></td>
</tr>
<tr>
<td>Birth Date:</td>
<td>
<input type="text" name="BirthDate" />
<input type="submit" value="Test" />
</td>
</tr>
</table>
</form>

<a href="#" onclick="WriteTest();">Or click here to see another XML exmaple.</a>

<br /><br />
Output:
<form><textarea id="ExampleOutput" style="width:100%" rows="10"></textarea></form>
</body>
</html>

Thread: Sending Large Data

Thread Tools

Display

Hybrid View

Sending Large Data

Re: Sending Large Data

Re: Sending Large Data

Re: Sending Large Data

Re: Sending Large Data

Re: Sending Large Data

Re: Sending Large Data

Bookmarks

Bookmarks

Posting Permissions