Eric's weblog - Sending XML to the Sever with AJAX

<< A Basic Ajax Content Management Framework | Home | Win a copy of Ajax in Action or a T-Shirt >>

Permalink
[PROGRAMMING] Sending XML to the Sever with AJAX

Sending XML to the Sever with AJAX
A question that has come up to lately by people on JavaRanch and emails I received is how do I send an XML to the server using Ajax. It is possible to send an XML document in the request parameter. One thing you need to make sure is that you set the header correctly to text/xml and post the document to the server. This following is a basic example that highlights the fact that we are not limited to just sending query string and form values to the server, which seems to be implanted into certain developer’s minds.

For this example code I am taking two user inputs and creating an XML string. The string is sent via Ajax to the server, which reads the input. The server takes this XML information and creates a new XML document. This XML document is saved in a folder on the server. A confirmation id (GUID) is sent back to the user as shown in the following figure below.
Screen Shot of XML Confirmation

And below is the code that you can play with.

The ClientSide Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>testAj</title>
		<script type="text/javascript">
  
          var reqXML;
      
          function LoadXMLDoc(url){

            if (window.XMLHttpRequest){ 
              reqXML = new XMLHttpRequest(); 
            }
		    else if(window.ActiveXObject){ 
              reqXML = new ActiveXObject("Microsoft.XMLHTTP"); 
            }
            
            if(reqXML){
              document.getElementById("spanOut").innerHTML = "Sending Information...";
              reqXML.open("POST", url, true);
              reqXML.onreadystatechange = BuildXMLResults;
              reqXML.setRequestHeader("Content-Type", "text/xml");
              var strName = encodeURI(document.Form1.txtName.value);
              var strMess = encodeURI(document.Form1.txtMess.value);
              var xmlBody = "<entry>";
              xmlBody += "<name>" + strName + "</name>";
              xmlBody += "<message>" + strMess + "</message>";
              xmlBody += "</entry>";
              reqXML.send("<?xml version='1.0' encoding='UTF-8'?>" + xmlBody);
           }
           else{
             alert("Your browser does not support Ajax");
           }
           
         } 

	     function BuildXMLResults(){
           if(reqXML.readyState == 4){
             if(reqXML.status == 200){

               var strText = reqXML.responseText;
               document.getElementById("spanOut").innerHTML = strText;  
         
  	         } 
	         else{
	         
               alert("There was a problem retrieving the XML data:\n" + reqXML.statusText);
          
             }		
	       }
	     }
		</script>
	</HEAD>
	<body>
		<form id="Form1" method="post" runat="server" onsubmit="LoadXMLDoc('GetXML.aspx'); return false;">
			<span style="width:70px">Name: </span><input type="text" 

name="txtName"><br>
			<span style="width:70px">Message: </span><textarea 

name="txtMess"></textarea><br>
			<input type="submit" name="btnSubmit" value="Submit"><br/>
			<span id="spanOut"></span>
		</form>
	</body>
</HTML>

The Server Side Code: GetXML.aspx

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="GetXML.aspx.vb" Inherits="datagrid.GetXML"%>

GetXML.aspx.vb

Imports System.IO
Imports System.Xml
Imports System.Text

Public Class GetXML
    Inherits System.Web.UI.Page

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
     Private Sub InitializeComponent()

    End Sub

    'NOTE: The following placeholder declaration is required by the Web Form Designer.
    'Do not delete or move it.
    Private designerPlaceholderDeclaration As System.Object

    Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
    ByVal e As System.EventArgs) Handles MyBase.Load

        Response.ContentType = "text/xml"
        Dim x As XmlReader = New XmlTextReader(Request.InputStream)
        Dim strX As String = x.Read.ToString

        Dim xmlDoc As XmlDocument = New XmlDocument
        xmlDoc.Load(x)

        Dim strGUID As String = System.Guid.NewGuid().ToString()
        xmlDoc.Save("C:\Inetpub\wwwroot\datagrid\xml\" & strGUID & ".xml")

        Response.Write("<h3 style='color:green'>Success!" & _
                       "</h3>Confirmation Number: <b>" & strGUID & "</b>")

    End Sub

End Class

Hope this gets you started on something interesting!

Eric Pascarello
Moderator of HTML/JavaScript at www.JavaRanch.com
Author of: JavaScript: Your Visual Blueprint for Dynamic Web Pages
Co-Author of: Ajax in Action

TrackBacks[0] Comments[3] Posted by pascarello on July 20, 2005 11:46:57 AM EST

Reply | Permalink Re: Sending XML to the Sever with AJAX

Can anyone tell me how to send a html as a string in the soap request in the ajax architecture?

Comment from Anonymous on August 19, 2005 8:35:00 AM EST

Reply | Permalink Re: Sending XML to the Sever with AJAX

Hi, You can use Apache Axis package to compose the SOAP message. Regards, Tien-Chih Wang

Comment from Anonymous on October 26, 2005 1:01:55 PM EST

Reply | Permalink Re: Sending XML to the Sever with AJAX

you dope, that's what this code does - just use xhtml (close your tags)

Comment from Mike on March 9, 2007 1:53:51 PM EST

Add a comment

TrackBack to http://radio.javaranch.com/pascarello/addTrackBack.action?entry=1121878017742

July 2005
Sun	Mon	Tue	Wed	Thu	Fri	Sat
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31
Jun \| Today \| Aug

Title
Body	HTML : b, i, blockquote, br, p, pre, a href="", ul, ol, li
Math Quiz 10 + 5 =	(Helps stop blog spam)
Name
E-mail address
Website
Remember me	Yes No
E-mail addresses are not publicly displayed, so please only leave your e-mail address if you would like to be notified when new comments are added to this blog entry (you can opt-out later).