how to make javascript functions together?

Question

Hi

Below is the JavaScript code I use in my HTML page

<script type="text/javascript">
function loadXMLDoc(HTTP)
{
    var xmlHttp;
    try {  
        xmlHttp=new XMLHttpRequest();
    } catch (e) { 
        try {    
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   
        } catch (e) {   
            try {     
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
            } catch (e) {      
                alert("Your browser does not support AJAX!");      
                return false; 
            }    
        } 
    }

    xmlHttp.onreadystatechange=function() {
        if (xmlHttp.readyState==4) {
            alert(xmlHttp.responseText);
        }
    }  

    var params ="dd=123";
    xmlHttp.open("POST",HTTP,true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(params);
}
</script>

in the below javascript i wand to activate each ajax function

<script type="text/javascript">

// here i wand to send function together
return (loadXMLDoc('Page1.asp') && loadXMLDoc('Page2.asp') && loadXMLDoc('Page3.asp')); 
</script>

But here the problem is that I do not get the "return" (means 2nd & 3rd function not work)

Only the first function works

Hoping for your response

Answer 1

Your function loadXMLDoc() does not return anything, add "return true" to the end of that function.

    xmlHttp.send(params);

    return true;
}

Note that a true return from loadXMLDoc() means you have successfully started an AJAX request. It will finish some time in the future, which will result in the onreadystatechange being called. Thus you are starting multiple AJAX requests in parallel.

If you wanted several AJAX calls in sequence, try something like the following:

function doAjaxRequest( url, onreadystatechange )
{
    var xmlHttp;
    try {  
        xmlHttp=new XMLHttpRequest();
    } catch (e) {
        try {    
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   
        } catch (e) {   
            try {     
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
            } catch (e) {      
                alert("Your browser does not support AJAX!");      
                return false; 
            }    
        } 
    }

    xmlHttp.onreadystatechange = onreadystatechange;

    var params = "dd=123";
    xmlHttp.open("POST", url, true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(params);
}

function loadXMLDocs( HTTP )
{
    var loadNextFile = function() {
        if (HTTP.length != 0) {
            var url = HTTP.unshift();
            doAjaxRequest( url, onreadystatechange );
        }
    }

    var onreadystatechange = function() {
        if (this.readyState==4) {
            alert(xmlHttp.responseText);

            loadNextFile();
        }
    }

    loadNextFile();
}

loadXMLDocs( ['Page1.asp', 'Page2.asp', 'Page3.asp'] );

Answer 2

Wow talk about indentation hell. this should work better;

<script type="text/javascript">
function loadXMLDoc(HTTP){
var xmlHttp;
try{  
    xmlHttp=new XMLHttpRequest();  }
    catch (e){ 
        try{    
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");   
        }catch (e){   
            try{     
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
            }catch (e){      
                alert("Your browser does not support AJAX!");      
                return false; 
            }
        }
    }
    xmlHttp.onreadystatechange=function(){
        if(xmlHttp.readyState==4){
            alert(xmlHttp.responseText);
        }
    }   
    var params ="dd=123";
    xmlHttp.open("POST",HTTP,true);
    xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlHttp.setRequestHeader("Content-length", params.length);
    xmlHttp.setRequestHeader("Connection", "close");
    xmlHttp.send(params);

    return true;
}
</script>

Answer 3

Remeber that in the statement:

return (loadXMLDoc('Page1.asp') && loadXMLDoc('Page2.asp') && loadXMLDoc('Page3.asp'));  

logically translates to:

if (loadXMLDoc('Page1.asp')){
    if (loadXMLDoc('Page2.asp')){
        if (loadXMLDoc('Page3.asp')){
            return true;
        }
    }
}
return false;

So, each of the successive loadXMLDoc() function calls will only be called when if the previous function returns true.