Multiple Requests with Ajax

The Ajax programing technique can only be used to make one request at a time: however, it is possible to get more data using the java script split command.

Returning only one piece of information at a time is very limiting, and impractical. Many times you need to return more than one item to a web page. While maintaining and adding to a commercial website, I needed to find a solution.


The solution was not easy to find. It took a while to wrap my head around the concept, but I eventually figured it out.


Here it is. In your statechange function under readystate 4, after,

document.getElementById("data").innerHTML=xmlhttp.responseText;,

add the following line;


//The message is split wherever [BRK] is part of the message and stored in an array.
var result=document.getElementById("portdata").innerHTML.split("[BRK]");.

If you are using PHP for your server side script,  your last line should include the following (this is only an example, but your code should follow the same format);

$variable="George Thomson";
echo "Customer_Name".[BRK].$variable.[BRK];.

In readystate 4, evaluate the data and assign it.


Example:

if (result[0]=="Customer_Name"){
      document.getElementById("msg").innerHTML=result[1];
}


Remember that the index number for an array always starts at zero.


Additional resources;


http://www.w3schools.com/JS/js_obj_array.asp

Ajax Tutorial

Ajax stands for Asynchronous JavaScript And XML. Once you learn how to use it properly, you will never go back to posting data to a PHP or ASP script.

Since I don't have alot of time to go into detail, I will provide the basics, you need to get started. 

Step1

Create a javascript file and make a link to it in your html page after your title tag.  If you have a style sheet, put it after the style sheet reference.


Example: 


Step2

Add the following lines to the top of your javascript file;


var xmlhttp

xmlhttp = new ActiveXObject("Msxml2.XMLHTTP.5.0");

Step3

Add the following functions. These functions are mandatory. They tell the browser what to do when the data is received. 

function stateChanged()
{
   
    if (xmlhttp.readyState==1)  //Do while page is loading.
   {
          document.getElementById("Wait").style.visibility="visible";    Make span id visible.
          document.getElementById("Wait").src="ajax-loader.gif";   
          document.getElementById("lblwait").innerHTML="Processing.....";   
    }


   if (xmlhttp.readyState==4)  //Do when complete.
  {
         document.getElementById("Wait").style.visibility="hidden";  //Set wait status to hidden.
         document.getElementById("lblwait").innerHTML="";  //Clear message
         document.getElementById("portdata").innerHTML=xmlhttp.responseText; //Get data
  }

function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
  {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  return new XMLHttpRequest();
  }
if (window.ActiveXObject)
  {
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

Step4 

Add function to execute server side script, like php or asp.


Example;


function getinfo(parm){


var recordnumber=parm; //get record number passed in
;
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
  {
  alert ("Your browser does not support AJAX!");
  return;
  }
var url="../inc/getinfo.php";

url = url+"?recordnumber=" + recordnumber;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

}


Call your function getinfo from an onclick or load event from the page.


Example:  onclick=javascript:getinfo();


Due to the nature of Ajax, only one piece of data is returned at a time, which makes it very difficult to do anything useful; however, there is a trick to getting more than one piece of data at a time. Stay tuned for additional blogs.



Here are some additional resources you may find useful;


http://www.tizag.com/ajaxTutorial
http://www.w3schools.com/ajax/default.asp