AJAX, Send XML Request/Response Using ASP.NET ,C# - Part 4

What is Ajax - More detail read Ajax Blog
1)Ajax are HTML, DOM, CSS, XML, JavaScript and XMLHttpRequest.
2)Submit Request and Get Server Response without doing page refresh.
3)Do the Asynchronous call to the server and get response from it.

This blog is going to explain
1)Send a XML request from Ajax to ASP.NET using C#.
2)Receive a XML Response from ASP.NET using C#to Ajax.

View Sequence Diagram for AJAX
View AJAX Flow Diagram

SingleIUD() function executes
1)Collects the form input value.
2)Creats a XML document.
3)Create a XMLHttpRequest object.
4)Create the function to be executed when the server response is ready.
5)Send the XML document request to the ASP.NET file.
6)Receive xml document response from the ASP.NET file.
7)Finally parse the xml document and make use of it.

XML request document which is send to server.

<coin>
  <coinid>0</coinid>
  <dml>i</dml>
  <amount>12.56</amount>
  <desc>xml content which is send to server</desc>
</coin>

XML response document which is receive from server.

<response>
<coinid>0 </coinid>
<error>amount is not matched </error>
</response>

var xmlCoin;
function SingleIUD()
{
  var coinid = document.getElementById('coinid').value;
  var dml = document.getElementById('dml').value;
  var amount = document.getElementById('amount').value;
  var desc = document.getElementById('desc').value;

  var params = {};
  params["coinid"] = coinid;
  params["dml"] = dml;
  params["amount"] = amount;
  params["desc"] = desc;

  xml = createXML("coin",params);

  xmlCoin=GetXmlHttpObject()
  if (xmlCoin==null)
  {
    alert ("Browser does not support HTTP Request");
    return;
  }

  var url = "ajcoindml.aspx?sid="+ Math.random();

  xmlCoin.onreadystatechange=function()
  {
    if (xmlCoin.readyState==4 || xmlCoin.readyState=="complete")
    {
      var xml = xmlCoin.responseXML.documentElement;
      var coinid = (xml.getElementsByTagName("coinid")[0]).childNodes[0].nodeValue;
      var dml = (xml.getElementsByTagName("dml")[0]).childNodes[0].nodeValue;
      var error = (xml.getElementsByTagName("error")[0]).childNodes[0].nodeValue;
      //Your business logic script
    }
  };
  xmlCoin.open("POST",url,true)
  xmlCoin.send(xml);
}

The statment (xml.getElementsByTagName("coinid")[0]).childNodes[0].nodeValue; is used to parse XML response.

When the AJAX is sent request to the C# file,
1)C# receive xml document request using BinaryRead() function.
2)Parse xml document using XmlDocument() DOM object, XmlNodeList and GetElementsByTagName.
3)Create a response xml docment.
4)Send response xml document back to the AJAX XMLHttpRequest object.

The request is processed by the ajcoindml.aspx.cs. Here i used XML DOM, compare to SAX, DOM has an in-memory tree structure, provide to modify an XML document.

private void Page_Load(object sender, System.EventArgs e)
{
  string sRequestXML ="";
  string sResponseXML ="";
  int iCoinID =0;
  string sError="";
  byte [] biData = Request.BinaryRead (Request.TotalBytes);
  sRequestXML = System.Text.Encoding.Default.GetString (biData, 0, biData.Length);
  if (sRequestXML.Length>0)
  {
    XmlDocument xcDoc = new XmlDocument();
    xcDoc.LoadXml(sRequestXML);
    XmlNodeList nlCoinid = xcDoc.GetElementsByTagName("coinid");
    XmlNodeList nlDml = xcDoc.GetElementsByTagName("dml");
    XmlNodeList nlAmount = xcDoc.GetElementsByTagName("amount");
    XmlNodeList nlDesc = xcDoc.GetElementsByTagName("desc");
    iCoinID = Int32.Parse(nlCoinid[0].InnerText);
    string sDML = nlDml[0].InnerText;
    double dAmount = Double.Parse(nlAmount[0].InnerText);
    string sDesc = nlDesc[0].InnerText;

    //Your business logic goes here.
  }
  sResponseXML ="\n";
  sResponseXML+="\n";
  sResponseXML+="\t" + iCoinID + "\n";
  sResponseXML+="\t" + sError + "\n";
  sResponseXML+="\n";
  Response.ContentType = "text/xml";
  Response.Write(sResponseXML);
}

GetXmlHttpObject() function used to created and configured a XMLHttpRequest object.

function GetXmlHttpObject()
{
  var objXMLHttp=null;
  if (window.XMLHttpRequest) objXMLHttp=new XMLHttpRequest();
  else if (window.ActiveXObject) objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP");
  return objXMLHttp;
}

createXML() function is used to create a XML document, just stringing together the text. value pairs turn into XML elements, where the element <name> is the name of the pair, and the content of the element is the value, like <coinid>123</coinid>.

function createXML( root, nodes )
{
  var xml = "";
  if( root )
    xml += "<" + root + ">";
  for( theNode in nodes )
    xml += "<" + theNode + ">" + nodes[theNode] + "";
  if( root )
    xml += "";
  return xml;
}

Ajax (Asynchronous JavaScript and XML) - Part 1
AJAX, Send/Receive XML Request/Response using JAVA - Part 2