AJAX 101 - Jamie Johnson

Jamie Johnson

September 29, 2016

AJAX - Asynchronous JavaScript And XML - is not a new technology, but it is still regularly used. The beauty of AJAX is that you can update the contents of a page on-load. This is common with event feeds or blog feeds or feeds from other applications. AJAX reads in an XML file produced by the application and parses and updates accordingly. I often use parsing around the XML nodes that are returned in the string containing the contents of the file. From there, I set up a loop and concatenate the output and feed it into an element of the page after iterating through the loop.

Consider this example (Click the button below to make the AJAX call; typically, you would let it run when the page loads, but this allows you to see it in action):

---

---

Here's the code:

<ul>
<div id="itemsoutput"></div>
<script>
function letsAJAX(){ // only needed for this example
var xmlhttp;
xmlFile = "batman.xml";
if (window.XMLHttpRequest){// code for IE, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4)
  {
    if(xmlhttp.status==200)
    {
        var xmlStringFull = xmlhttp.responseText;
        var items=xmlStringFull;
        items=items.toString();
        items=items.split("<villain>");//use double quotes for element references when parsing.
        i=1; // skip first array element as it is prior to the first villain node

        var itemsoutput='';       
		var alias='';
		var name='';
		var appeared='';
		
		while(i!=items.length){//itemsquantity){
            itemsoutput+='<li>';
			
            alias=items[i];
            alias=alias.split("<alias>");
            alias=alias[1];
            alias=alias.split("</alias>");
            alias=alias[0];
            
            name=items[i];
            name=name.split("<name>");
            name=name[1];
            name=name.split("</name>");
            name=name[0];
                        
            appeared=items[i];
            appeared=appeared.split("<appeared>");
            appeared=appeared[1];
            appeared=appeared.split("</appeared>");
            appeared=appeared[0];
            itemsoutput+=alias+", whose real name is "+name;
            itemsoutput+=", first appeared in DC Comics in "+appeared+"."; 
            
            itemsoutput+='</li>';
            
            alias='';
            name='';
            appeared='';
            i++;
        }
        if(i==1){ // since skipping element 0
            itemsoutput="<li>Sorry. No items available.</li>";
        } 
        $('#itemsoutput').html(itemsoutput);
    }
  }
}  
xmlhttp.open("GET",xmlFile,true);
xmlhttp.send();
$('.postajax').hide(); // only needed for this example
} // only needed for this example
</script>
</ul>

Typically, I don't scope the AJAX within the above letsAJAX() function, but I did so here so you could see it in action. Some things to keep in mind: I don't know of any applications that output alias, name and appeared nodes in a standardized fashion. So, this exact code would not be useful elsewhere. Yet it serves to show some basic parsing involved. Further, the XML in question (batman.xml) is not regularly updated. So, refreshing this page will not show any stellar changes. However, if the XML were to be updated, then this page would show the update on-load. That is the beauty of AJAX.

Back to top