XMLHttpRequest: responseXML Example

Complete Example demonstrating the use of XML HttpRequest's "responseXML"
(Available for Downloading)
( By Kostas Zotos 8/2008 )

(For full functionallity, the example requires to test it online, or in a local running server)

TIP: If have problems to get the "responseXML" to work [especially regarding the returned "Content-Type" (which must be: "text/xml" for the "responseXML")], then try to link all the "XMLHttpRequest"-related JavaScript externally (as this examples does), (not embed the JavaScript in the html). This may helps to solve some problems..

This page requires JavaScript to be enabled
(Enable it in your Browser's Options-Preferences)

1) EXAMPLE IN ACTION: ( Click the button to see: i) The response Headers. ii) The responseXML )

2) JAVASCRIPT FILE (USED IN EXAMPLE): ( XMLHttpRequest_responseXML.js )


var xmlhttp


function SendData(Arg) { 

    xmlhttp=null;

    var Url="XMLHttpRequest_responseXML.php"           // THE SERVER SCRIPT TO HANDLE THE REQUEST 


  if (window.XMLHttpRequest) {

      xmlhttp=new XMLHttpRequest()                            // For all modern browsers

  } else if (window.ActiveXObject) {

     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")   // For (older) IE

  }


 if (xmlhttp!=null)  {

     xmlhttp.onreadystatechange=onStateChange;
  
     Url=Url+"?Date="+escape(Arg)+"&NoCache="+new Date().getTime()    // "&NoCache"  => Append the timestamp to avoid cashing
						                       // Also escape the input argument  (Arg) to properly url-encode the characters (to be sure)

     xmlhttp.open("GET", Url, true);                                                         //  (httpMethod,  URL,  asynchronous)
 
    // xmlhttp.overrideMimeType('text/xml');

     xmlhttp.send(null);


/* 
   // How to send a POST request
    xmlhttp.open("POST", Url, true);                                                         //  (httpMethod,  URL,  asynchronous)

    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");

     xmlhttp.send( "Date=" + escape(Arg) );
*/


  } else {

     alert("The XMLHttpRequest not supported");

  }

}





function  onStateChange()  {


  if (xmlhttp.readyState==4) {                                                                                      // 4 => loaded complete


       if (xmlhttp.status==200) {                                                                                    // HTTP status code  ( 200 => OK )
  
            var xmlDoc=xmlhttp.responseXML                                                                    // "xmlDoc" the returned xml object

            
            // alert(typeof xmlhttp.responseXML)                                                               // Returns: object   
           // alert ("childNodes: "+xmlDoc.childNodes.length)                                             // Just for test

           var DateNode=xmlDoc.getElementsByTagName('Date')[0].firstChild.nodeValue      // The <Date> element's node value  (the sent date)
                                                                                                   

            var Xml2String                                                                                             // Convert the xml to string just to display it 

            if (xmlDoc.xml) {
                Xml2String=xmlDoc.xml                                                                            // Converts the xml object to string  (  For IE)
            }else{
                Xml2String= new XMLSerializer().serializeToString(xmlDoc);                        // Converts the xml object to string (For rest browsers, mozilla, etc)
            }


           var Message= "--------- RESPONSE HEADERS  (NOTE THE CONTENT-TYPE) --------\n\n"

           Message+=xmlhttp.getAllResponseHeaders()
           Message+="\n\n----------------------------------- XML -----------------------------------\n\n"
           Message+= Xml2String
           Message+="\n\n--------------------- DATE (PARSED FROM XML) ----------------------\n\n"
           Message+=DateNode


            alert( Message ) 
       
             // alert( Xml2String )

             //alert (xmlhttp.responseText)          
     
            document.getElementById("CellData").value=Xml2String

      } else {

                alert("statusText: " + xmlhttp.statusText + "\nHTTP status code: " + xmlhttp.status);

      }  // End of:   if (xmlhttp.status==200)

  }

}

3) PHP FILE (USED IN EXAMPLE): ( XMLHttpRequest_responseXML.php )

<?php
 header('Content-Type: text/xml');
 header ('Cache-Control: no-cache');
 header ('Cache-Control: no-store' , false);     // false => this header not override the previous similar header



//-------------- If want to read an existing .xml file -------------------------

// $XmlFile="Data.xml";

/*// Using the DOM Functions
$doc=new DOMDocument();
$doc->formatOutput=true;

$doc->load($XmlFile);

// echo  $doc->saveXML();     // Returns the xml as string
*/

// OR: Directly open the file:
// readfile($XmlFile);            // Output directly the given file to browser

//-------------- If want to read an existing .xml file (END) -----------------


if (isset($_GET['Date'])){
   $Date=trim($_GET['Date']);    // Reads the GET request "Date" variable  (removes leading/trailing whitespaces)
   $Date=strip_tags($Date);       // Removes possible html and php tags  (to prevent possible malicious code)
} else {
  $Date=@date("l, d F Y  ( H:i:s  A )");
}

// Manually create a string representation of a new xml document
// Inserting also the GET variable 

$xmlStr='<?xml version="1.0" encoding="UTF-8"?>
<data>
   <Date>'.$Date.'</Date>
   <ip>'.$_SERVER['REMOTE_ADDR'].'</ip>
</data>
';


echo $xmlStr;  


?>

4) DOWNLOAD FILES:
>> DOWNLOAD THE COMPLETE EXAMPLE FILES (.zip 10 KB) <<