CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 13 of 13
  1. #1
    Join Date
    Oct 2006
    Posts
    11

    Sending Large Data

    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.

  2. #2
    Join Date
    May 2002
    Posts
    10,943

    Re: Sending Large Data

    Quote 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.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  3. #3
    Join Date
    Oct 2006
    Posts
    11

    Re: Sending Large Data

    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 &amp; Value">
    <FirstName>Tej</FirstName>
    <MiddleName/>
    <LastName/>
    <Email/>
    <TestData/>
    <BirthDate/>
    </User>

  4. #4
    Join Date
    Apr 2005
    Location
    Norway
    Posts
    3,934

    Re: Sending Large Data

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

    - petter

  5. #5
    Join Date
    May 2002
    Posts
    10,943

    Re: Sending Large Data

    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.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  6. #6
    Join Date
    Oct 2006
    Posts
    11

    Re: Sending Large Data

    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]

  7. #7
    Join Date
    Oct 2006
    Posts
    11

    Re: Sending Large Data

    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>

  8. #8
    Join Date
    May 2002
    Posts
    10,943

    Re: Sending Large Data

    You need to re-read my post on how to use &#91;code&#93; tags.

    As to your problem, change your content-type to "application/x-www-form-urlencoded."

    Code:
    http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  9. #9
    Join Date
    Oct 2006
    Posts
    11

    Thumbs down Re: Sending Large Data

    Hi,

    I am not sure if this is the way you wanted the code? if not can you just give me an example?? actually this the first time I am using the forum, so not familiar with the terminologies or tags, by mistake I think I skiped [/code] (sorry about that).

    I want to send say like 100 of fields data to the server which will process and return me just one message as successfull or not. I am not sure if the server is getting whatever information I sent. So to cross check I was just trying to display the message I sent.

    ajax.htm code
    Code:
    <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?param="; // 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 passValue;
    		passValue = "Params='"+document.getElementById("ExampleOutput").value+"'";
    
    		http.open("POST", url, true);
    		http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    		http.setRequestHeader("Content-length", passValue.length);
    		http.setRequestHeader("Connection", "close");
    		http.onreadystatechange = handleHttpResponse;
    		http.send(passValue);
                }
                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>TestData:</td>
                    <td><input type="text" name="TestData" /></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 code

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

  10. #10
    Join Date
    May 2002
    Posts
    10,943

    Re: Sending Large Data

    I personally have never worked with XMLWriter() before. If I am not mistaken it is IE only. Am I correct? Why not just use createElement() and appendChild()?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  11. #11
    Join Date
    Oct 2006
    Posts
    11

    Re: Sending Large Data

    Yes thats right I have HTML pages with javascript, I need to capture data from 100s fields values send it to the webservice and the get the result as successfull or not.

    Since the data is huge, I thought I will create a XMLstring and post it to the server. Then get back a text message.

    I thought I will create an xml file or text file and dump all the data. Then pass the file name to the server, which can then go into that file take the data and process. Then I found that from javascript I will not be able to create a new file, I can only make changes to already created file.

    Basically my requirement is I have HTML pages and from which I need to send huge data to webservice and get an answer. I did some re-search on the net and based on other developers comments I assumed AJAX would be the best option. I am not sure if I am thinking right.. can you suggest which is the best way to go about it??

    It will be of great help to me.

    Thanks for all your patience - T

  12. #12
    Join Date
    May 2002
    Posts
    10,943

    Re: Sending Large Data

    Take a look at the following script. You can easily adapt it to what you want. When forming the parameters, just use a for loop to read through the input's values.

    Code:
    <form action="" method="post" enctype="multipart/form-data" target="theFrame">
      <input type="hidden" name="upload">
      <table cellpadding=0 cellspacing=3 border=0 id="theTable">
        <tr><td><input type="text" name="text1"></td></tr>
      </table>
      <input type="submit" value="Submit">
    </form>
    
    <script type="text/javascript">
      var inputs = 2;
      function addCell(){
        var theTable = document.getElementById("theTable");
        var newRow = document.createElement("tr")
        var newTd = document.createElement("td")
        var newInput = document.createElement("input");
        newInput.setAttribute("type", "text");
        newInput.setAttribute("name", "text" + inputs);
        newTd.appendChild(newInput);
        newRow.appendChild(newTd);
        theTable.appendChild(newRow);
        inputs++;
      }
    
      for(i=0;i<=100;i++){
        addCell();
      }
    </script>
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  13. #13
    Join Date
    Oct 2006
    Posts
    11

    Re: Sending Large Data

    Hi PeejAvery,

    Thank you very much for all your guidance, I will try the logice you have sent and once it works I will inform you.

    Thank you once again.

    Teju

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  





Click Here to Expand Forum to Full Width

Featured