Is it possible to send an AJAX request on load?

Question

Hello I have two dependants select box, the second one is popularited after onchange event.

The first one is loaded with a selected value (selected=selected), what I'm asking, it is possible to send the requested while the page is loading, ie as I have the the selected option, just send the request.

Javascript

function getXMLHTTP() {
        var xmlhttp=false;  
        try{
            xmlhttp=new XMLHttpRequest();
        }
        catch(e)    {       
            try{            
                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e){
                try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch(e1){
                    xmlhttp=false;
                }
            }
        }

        return xmlhttp;
    }

    function getSubCat(catId,incat) {   
        var strURL="../Includes/subcatAds.php?SubCat="+catId+"&incat="+incat;
        var req = getXMLHTTP();

        if (req) {

            req.onreadystatechange = function() {
                if (req.readyState == 4) {
                    // only if "OK"
                    if (req.status == 200) {                        
                        document.getElementById('subcat').innerHTML=req.responseText;                       
                    } else {
                        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                    }
                }               
            }           
            req.open("GET", strURL, true);
            req.send(null);
        }       
    }

The PHP will be provided if needed

Answer 1

You could use the onload event like this:

window.onload = function(){
  var selectbox = document.getElementById('select box id');

  if (selectbox.value !== ''){
    // your code to send ajax requests...
  }
};

The code runs as soon as page loads. It then checks if the value of the specified select box is not empty meaning something is selected; in that case you put your code for the ajax request which will execute.

Answer 2

You really need to use jQuery and replace all of the above with:

function getSubCat(catId, incat)
  { 
    $('#subcat').load("../Includes/subcatAds.php?SubCat="+catId+"&incat="+incat);
  }


// Run on load:
$( function(){ 
               getSubCat(4, 5);
   });

It will do the same thing. It's set up to run on load, and you don't have to worry about cross browser compatibility.

You will find yourself using jQuery selectors all the time and your code will be very lightweight. If you link the jQuery library to Google servers people will not even have to download it. Most people have it in cache already.

Answer 3

Since you are doing this before getting any input from the user, you could immediately make the call to the server, before the DOM is finished, before the page is fully loaded, and then just wait until the onload event takes place, or you get informed that the DOM tree is finished, and you can then safely change the value of any of the html elements.

This way you don't have the user wait for the browser to finish loading before you even start your request, which will improve the user experience.