issue with XMLHttpRequest - returning status of 0 on local machine and live server

i am having trouble getting this XMLHttpRequest to work properly, this is my first time using ajax so i'm not sure if i'm formatting everything correctly. i have looked all over the web and i keep finding basically the same info and example开发者_高级运维s but certain elements are in different orders so i'm not sure which is correct and i've tried them all and nothing seems to work. here is my code:

function ajaxRequest(){
    var activexmodes=["Msxml2.XMLHTTP", "Microsoft.XMLHTTP"]
    if (window.XMLHttpRequest)
        return new XMLHttpRequest()
    else if (window.ActiveXObject){ 
        for (var i=0; i<activexmodes.length; i++){
            try{
                return new ActiveXObject(activexmodes[i])
            }
            catch(e){
                //suppress error
            }
        }
    }
    else
        return false
}
function getData(fileName){
    var fileLoc =encodeURI("assets/"+fileName+".html")
    alert(fileLoc)
    var request = new ajaxRequest()
    request.open("GET",fileLoc,true)
    var response = request.responseText
    alert(request.status)
    alert(response)
    request.send(null)
    return response
}
function home() {
    var data = getData("home")
    var contentDiv = document.getElementByClassName(content)
    contentDiv.innerHTML = data;
}

home is triggered when the user clicks on a div in the page. i know that getData is being accessed because the alerts pop up, however i get a status code of 0, this happened on both my local machine and on a live server. i read that localhosts can throw a 0 status regardless of the actual status but its happening on a live server as well. if someone could help me fix this issue and/or clarify the correct order of events in the function i would greatly appreciate it.

EDIT: new code:

function getData(fileName){
    fileLoc = encodeURI("assets/"+fileName+".html")
    alert(fileLoc);
    request.onreadystatechange = processData;
    request.open("GET",fileLoc, false);
    request.send();
    alert(request.readyState);
    alert(response);
}
function processData(){
    if (request.readyState==4){
        if (request.status==200){
            document.getElementsByClassName('content').innerHTML = request.responseText;
        }
        else{
            alert("An error has occured making the request");
        }
    }
}

---

You are telling XMLHTTPRequest to send the request asynchronous, which means the rest of your script gets executed while you wait for the response. You will get a reponse code 0 (uninitialized) and an empty response, because at the time you return from the function that is the current status and response.

Instead you want to define a function to call when the state changes, or let XMLHTTPRequest work synchronous.

Please refer to this tutorial for a simple example that should help you out.