DHTML Code, JavaScript Code

How to load XML data with JavaScript (AJAX tutorial)

The latest technology (or grouping of technologies) sweeping the web is AJAX (Asynchronous JavaScript And XML). This technology, using the XMLHttpRequest() object to retrieve a piece of XML in the background, and load its contents into the web page dynamically, thus creating a constantly refreshed Dynamic HTML (DHTML) interface.

You can make very complication AJAX code, but this is the bare-bones code to simply grab a node from the XML (I'll use a total sales revenue number as the target), and dynamically modify the page contents to display it on the page in a DIV with the ID "salesTotal".


function getSalesTotal() 

{
	url = "xml_sales_total.php";
	// AJAX code for Mozilla, Safari, Opera etc.
	if (window.XMLHttpRequest) {
		  xmlhttp = new XMLHttpRequest();
		  xmlhttp.onreadystatechange = xmlhttpChange;
		  xmlhttp.open("GET", url, true);
		  xmlhttp.send(null);
	}
	// AJAX code for IE
	else if (window.ActiveXObject)  {
	          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			if (xmlhttp)
			{
				xmlhttp.onreadystatechange = xmlhttpChange;
				xmlhttp.open("GET", url, true);
				xmlhttp.send();
			}
	  }
}

function xmlhttpChange()
{
	//create XMLDOM object if xmlhttp shows "loaded"

	if (xmlhttp.readyState == 4) {
	  // if "OK"
	  if (xmlhttp.status == 200) {
			var salesTotal = xmlhttp.responseXML.getElementsByTagName("salesTotal");
			if (browser == "Internet Explorer") { 
				salesTotal = salesTotal[0].firstChild.data;
			} else { 
				salesTotal= salesTotal[0].firstChild.data;
			}	
			document.getElementById("salesTotal").innerHTML= salesTotal; 			
	  } else {
		//alert("There was a problem retrieving the XML data");
	  }
      }
}

timeout = setInterval("getSalesTotal()", 1000);
Share

6 Comments

  1. Can you help me to load my xml file buy Opera (I current use Opera 9.10 )
    With IE is ok but I can not load XML by Opera.

    I will copy for you to check

    if (window.ActiveXObject)
    {
    var doc = new ActiveXObject("Microsoft.XMLDOM");
    doc.async = false;
    doc.load("Tin.xml");

    }
    else if (document.implementation && document.implementation.createDocument)
    {

    var doc= document.implementation.createDocument("","",null);
    doc.async = false;
    doc.load("Tin.xml");

    }else{
    alert("Non!");
    }

  2. can anyone help me..

    Am generating an XML as per the request from user and creating it in server(on basis some criteria)and am loading it from server. The problem is to laod the XML it is taking 30 sec. this time my browser in hanging….

    is ther any way to load xml without browser hanging??

    any help will be appreciated!

    thanks in advance

  3. get a faster server?

  4. justin,
    from codes, seems you dont put xmlhttp as global variable/object thus it only accessible within function (getSalesTotal) only. and not accessible from inside other function (xmlhttpChange). Is it ok anyway?

  5. Hi there,

    I'm just diving into this head first(!).

    Was wondering how this site:

    http://letskiosk.com/

    has used XHR or xmlHttpRequest to load in the images. I can't seem to find the xml file or such like storing the info from which it's loading.

    Any help much appreciated.

    Many thanks

    Ben

  6. Hallo,

    could you please help me to load XML file in HTML5.

    Dilip

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Anti-spam image