Multiple Asynchronous on-demand calls

Question

Hi,
I do have on the example below 2 on-demand processes. Both of them are a set of select statements taking around 0.2 secs to run.
What I am trying to achieve is to display a region after each process has been completed.
The problem I am experiencing is that I only have the second region displayed.
<script language="JavaScript" type="text/javascript">
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=Dashboard_OOS',0);
pstep = 1;
get.GetAsync(f_AsyncReturn);
var get2 = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=Dashboard_Usage',0);
pstep = 10;
get2.GetAsync(f_AsyncReturn);
function f_AsyncReturn(){  
alert(p.readyState+"-"+pstep);
if(p.readyState == 1){  
if (pstep == 1){
show_loading();
}else if(p.readyState == 2){  
}else if(p.readyState == 3){  
}else if(p.readyState == 4){  
if (pstep == 1) {
$x('item').value = p.responseText;
$x_Show('region1');
}else if (pstep == 10) {
$x_Show('region2');
hide_loading();
}else{return false;}
</script>
Note: after adding the alert at the beginning of f_AsyncReturn I can see only one alert for the first call and then 4 alerts for the second.
My first try was with synchronous calls, which were fine in firefox but not in IE. Firefox displays the regions as the calls are completed but IE waits for all calls to be completed and then displays all regions at the same time.
Any ideas/comments are welcome.
Regards

Answer 1

Javier,
You have to duplicated the Asynchronous calls in your script, you are seeing the behavior because by default XMLHttpRequest returns data in a variable called p and generally we use p.responseText, p.readyState to get the information back from request. When we are running multiple calls on the same page, the process which gets executed first will have its values in p variable. Try creating separate call for each of your code block something like this
<script type="text/javascript">
// XMLHTTP for Dashboard_OOS
htmldb_Get.prototype.OOS_GetAsync = function(pVar){
   try{
      OOS= new XMLHttpRequest();
    }catch(e){
      OOS = new ActiveXObject("Msxml2.XMLHTTP");
    try {
         var startTime = new Date();
               OOS.open("POST", this.base, true);
               if(OOS) {
                         OOS.onreadystatechange = pVar;
                         OOS.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                         OOS.send(this.queryString == null ? this.params : this.queryString );
                         return OOS;
          }catch(e){
      return false;
// XMLHTTP for Dashboard_Usage
htmldb_Get.prototype.Usage_GetAsync = function(pVar){
   try{
      Usage= new XMLHttpRequest();
    }catch(e){
      Usage = new ActiveXObject("Msxml2.XMLHTTP");
    try {
         var startTime = new Date();
               Usage.open("POST", this.base, true);
               if(Usage) {
                         Usage.onreadystatechange = pVar;
                         Usage.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                         Usage.send(this.queryString == null ? this.params : this.queryString );
                         return Usage;
          }catch(e){
      return false;
// AsyncReturn for Dashboard_OOS
function OOS_AsyncReturn(){
     var s = OOS.readyState;
     if(s == 1)
          show_loading();
     else if(s == 2)
     else if(s == 3)
     else if(s == 4)
          $x('item').value = p.responseText;
          $x_Show('region1');
          hide_loading();
     else
          return false;
     return true;
// AsyncReturn for Dashboard_Usage
function Usage_AsyncReturn(){
     var s = Usage.readyState;
     if(s == 1)
          show_loading();
     else if(s == 2)
     else if(s == 3)
     else if(s == 4)
          $x_Show('region2');
     else
          return false;
     return true;
var get = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=Dashboard_OOS',0);
pstep = 1;
get.OOS_GetAsync(OOS_AsyncReturn);
var get2 = new htmldb_Get(null,html_GetElement('pFlowId').value,'APPLICATION_PROCESS=Dashboard_Usage',0);
pstep = 10;
get2.Usage_GetAsync(Usage_AsyncReturn);
</script>Thanks,
Manish