AJAX = Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way to use existing standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

MODULE 1

Replacing the current text with the text from an external txt file (info.txt)

Change Content

function loadText() {
   
	     	var xmlhttp = new XMLHttpRequest();
			  xmlhttp.onreadystatechange = function() {
				if (this.readyState == 4 && this.status == 200) {
				 document.getElementById("demo").innerHTML = this.responseText;
				}
			  };
			  xmlhttpreq.open("GET","js-php-xml/info.txt",true); 
			  xmlhttpreq.send();
			// To avoid a cached result, add a unique ID to the URL
			//xmlhttpreq.open("GET","info.txt?t=" + Math.random(),true); 
} 

MODULE 2

Same as Module1 with a callback function (info.txt)

Change Content Click for code

var xmlhttp;
function loadTxtDoc(url,cfunc) {

	xmlhttp=new XMLHttpRequest();

	xmlhttp.onreadystatechange=cfunc;
	xmlhttp.open("GET",url,true);
	xmlhttp.send();
}

function myFunction() {
	loadTxtDoc("js-php-xml/info.txt",function() {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			document.getElementById("loadTxt2").innerHTML=xmlhttp.responseText;
		}
	  });
}

MODULE 3

Get the information from an external XML file (cdCatalog.xml)

Get my CD collection Click for code

function loadXMLDoc() {
	var xmlhttp;
	var txt,x,xx,yy,i;

	xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    xmlDoc=xmlhttp.responseXML;
    x=xmlDoc.getElementsByTagName("cd");   // OR  x=xmlhttp.responseXML.documentElement.getElementsByTagName("cd");
	
	txt="<table border='1'><tr><th>Title</th><th>Artist</th><th> Year </th><th> Price </th></tr>";
    
		for (i=0;i<x.length;i++)
		  {
		  txt=txt + "<tr>";
		  
		  xx=x[i].getElementsByTagName("title");
		  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
		  
		  xx=x[i].getElementsByTagName("artist");
		  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
		  
		  xx=x[i].getElementsByTagName("year");
		  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";

		  xx=x[i].getElementsByTagName("price");
		  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";

		  txt=txt + "</tr>";
		  
		  } // end for loop

		txt=txt + "</table>";  
		document.getElementById("loadXML").innerHTML=txt;
    }  // endif
  }    // end innerFunction
  
	//var urls = "js-php-xml/cdCatalog.xml?t=";
	// To avoid a cached result, add a unique ID to the URL
	xmlhttp.open("GET", "js-php-xml/cdCatalog.xml?t=" + Math.random(),true); 
	xmlhttp.send();
}   // end loadXML function

MODULE 4

Auto Suggestins - Get the information from an external PHP file using GET method(gethint.php)

Start typing a name in the input field below:

First name:

Suggestions:

Click for code

function showHint(str) {
	var xmlhttp;
	if (str.length==0) { 
		  document.getElementById("txtHint").innerHTML="";
		  return;
	  }

  	xmlhttp=new XMLHttpRequest();

	xmlhttp.onreadystatechange=function() {
  	if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    	document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
	xmlhttp.open("GET","js-php-xml/gethint.php?q="+str,true);
	xmlhttp.send();
}

MODULE 5

Load data from XML file onselect changes in forms

Select a Artist: Bee Gees Rod Stewart Bonnie Tyler Dolly Parton Gary Moore Dr.Hook

Click for code

function showCustomer()
{
var xmlhttp;
var x,xx,i;
var txt="";

xmlhttp=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
     x=xmlhttp.responseXML.documentElement.getElementsByTagName("cd");
	 var e = document.getElementById("customers");
	 txt="<table border='1'><tr><th>Title</th><th>Artist</th><th>Country</th><th> Year </th><th> Price </th></tr>";
	 
	 for (i=0;i<x.length;i++)
	   {
		xx=x[i].getElementsByTagName("artist");
		art = xx[0].firstChild.nodeValue;
		
		if (e.options[e.selectedIndex].value == art )
		  {		
		  
			  txt=txt + "<tr>";
			  
			  xx=x[i].getElementsByTagName("title");
			  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
			  
			  xx=x[i].getElementsByTagName("artist");
			  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
			 
			  xx=x[i].getElementsByTagName("country");
			  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
			 
			  xx=x[i].getElementsByTagName("year");
			  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
	
			  xx=x[i].getElementsByTagName("price");
			  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; // OR- txt=txt + "<td>" + xx[0].childNodes[0].nodeValue + "</td>";
	
			  txt=txt + "</tr>";
						
		   } //end if
		 
		}
	  txt=txt + "</table>";  
    document.getElementById("loadXMLonselect").innerHTML=txt;
    }  // endif
  }    // end innerFunction

	// To avoid a cached result, add a unique ID to the URL
	xmlhttp.open("GET","js-php-xml/cdCatalog.xml?t=" + Math.random(),true); 
	xmlhttp.send();

}   // end showCustomer function

MODULE 6

Load data from XML file

Click for code

  	xmlhttp=new XMLHttpRequest();

	xmlhttp.open("GET","js-php-xml/cdCatalog.xml",false);
	xmlhttp.send();
	xmlDoc=xmlhttp.responseXML; 

	x=xmlDoc.getElementsByTagName("cd");
	i=0;

// function start here
function displayCD() {
	artist=(x[i].getElementsByTagName("artist")[0].childNodes[0].nodeValue);
	title=(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
	year=(x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue);

	txt="Artist: " + artist + "<br>Title: " + title + "<br>Year: "+ year;

	document.getElementById("showCD").innerHTML=txt;
}

function next() {
	if (i<x.length-1) {
		  i++;
		  displayCD();
	  }
}

function previous() {
	if (i>0) {
		  i--;
		  displayCD();
	  }
}  // end function displayCD()

window.onload=function(){ displayCD() };

MODULE 7

User name check using Ajax

These are existing users 'mizan', 'setu', 'rezwan', 'admin'

Click for code

function ajaxHelper(functionName, additionalArgs) {
  var xmlHttp;
    xmlHttp=new XMLHttpRequest();

 // onreadystatechange 
  xmlHttp.onreadystatechange=function() {
    //The request is complete == state 4
    if (xmlHttp.readyState==4) {
      var response=xmlHttp.responseText;
      //Send reponse to _ajax hook of passed function name
      eval(functionName + "_ajax" + '(\'' + response + '\')');
    }
  }
  
  //Get request string from _setup hook of passed function name
  if (additionalArgs !== undefined && additionalArgs.length > 0) {
    var requestString = eval(functionName+"_init" + '(' + additionalArgs + ')');
  }
  else {
    var requestString = eval(functionName+"_init" + '()');
  } 
  
  if (requestString) {
    xmlHttp.open("GET", requestString, true);
    xmlHttp.send(null);
  }
}

function check_username_init() {
  var user_field = document.getElementById('user');
  return 'js-php-xml/username_exists.php?username=' + user_field.value;
}

function check_username_ajax(results) {
  var results_div = document.getElementById('results_div');
  results_div.innerHTML = results;
}


function check_username() {
  var user_field = document.getElementById('user');
	  if (user_field.value.length > 0) {
		//call our AJAX function in the PHP AJAX Framework
		ajaxHelper('check_username');
	  }
	  else {
		//clear results field 
		var results_div = document.getElementById('results_div');
		results_div.innerHTML = '';
	  }
}