Tips for combining JavaScript functions effectively

Question

Tips for combining JavaScript functions effectively

Here is the JavaScript code utilized on 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 this JavaScript, I want to trigger each ajax function

<script type="text/javascript>

// Here I want to run functions together
return (loadXMLDoc('Page1.asp') && loadXMLDoc('Page2.asp') && loadXMLDoc('Page3.asp')); 
</script>

The issue here is that only the first function works and I do not receive the "return" value (meaning 2nd & 3rd functions do not work)

I am looking forward to your feedback

javascript ajax

Answer 1

Answer №1

Keep in mind that the following statement:

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

can be logically interpreted as:

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

Hence, each subsequent call to the loadXMLDoc() function will only occur if the previous one returns true.

Answer 2

Keep in mind that the following statement:

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

can be logically interpreted as:

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

Hence, each subsequent call to the loadXMLDoc() function will only occur if the previous one returns true.

Answer 3

Answer №2

Ensure that your function loadXMLDoc() returns a value by adding "return true" to the end of the function.

    xmlHttp.send(params);

    return true;
}

When loadXMLDoc() returns true, it indicates that an AJAX request has been successfully initiated. The request will be completed at a later time, triggering the onreadystatechange function. Thus, multiple AJAX requests can run concurrently.

If you prefer to have sequential AJAX calls, consider using the following approach:

function doAjaxRequest( url, onreadystatechange )
{
    // code for creating XMLHttpRequest object and setting up parameters

    xmlHttp.onreadystatechange = onreadystatechange;

    // additional code for making the POST request
}

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 4

Ensure that your function loadXMLDoc() returns a value by adding "return true" to the end of the function.

    xmlHttp.send(params);

    return true;
}

When loadXMLDoc() returns true, it indicates that an AJAX request has been successfully initiated. The request will be completed at a later time, triggering the onreadystatechange function. Thus, multiple AJAX requests can run concurrently.

If you prefer to have sequential AJAX calls, consider using the following approach:

function doAjaxRequest( url, onreadystatechange )
{
    // code for creating XMLHttpRequest object and setting up parameters

    xmlHttp.onreadystatechange = onreadystatechange;

    // additional code for making the POST request
}

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 5

Answer №3

Well, isn't this just a mess of indentation. Let's tidy it up;

<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.send(params);

return true;
}
</script>

Answer 6

Well, isn't this just a mess of indentation. Let's tidy it up;

<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.send(params);

return true;
}
</script>

Tips for combining JavaScript functions effectively

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to replicate an Ajax call similar to the way Postman does it?

What is the best way to retrieve the Axios Post response in React?

How to grab selected HTML content with jQuery

Submitting a form without redirecting (using Facebook static and Magento)

What steps can be taken to prevent an event from being triggered once it has already started but has not yet concluded?

Retrieving and storing data using jQuery's AJAX caching feature

Encountering an issue in React: Uncaught ReferenceError - require function not recognized

AngularJS: Error encountered when trying to assign a value to a read-only property in the ng-submit directive

What is the step-by-step process to upload a file along with JSON data using fetch and multer

Properly accessing a JavaScript object acquired from a JSON file

Angular Material 2: Error - Could not be located

Refresh the component data according to the vuex state

Creating Filled DIVs using JavaScript

Differentiate between chrome and chromium with the help of Javascript programming

An Ajax post request will only display output if multiple echo statements are present

I am experiencing a problem where my AJAX responses are being downloaded instead of being loaded into the success data

Load the iframe element only when the specified class becomes visible within the container div, without relying on jQuery

Combining various JavaScript methods allows for the creation of complex

React form submissions result in FormData returning blank data

"Differences between Angular's $http and jQuery's $ajax: What is the equivalent of dataType