ajax call reloading page and not calling callback function

Question

I searched and seen many asking similar questions, but none of them answer/help my issue.

Below is the js code I am using to do an ajax call. The post works, when I walk thru the code using firebug, I can see the return message in the response. But the call back function is not called. The test line is ran and the page gets reloaded. what am I missing to get the call back function to work and the page not to refresh? also looking in firebug, I can see under this.xmlhttp: onreadystatechange = callback();

Here is the code:

function testajax() {
    params = 'action=testing';
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", "afs_controller", true);
    xmlhttp.onreadystatechange = callBack;
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
    //just test line;
    msg = 'testing;';
}

function callBack() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        handleReturn(xmlhttp.responseText);
    } else {
        failedCallBack(xmlhttp.responseText);
    }
}

function handleReturn(responseText) {
    document.getElementByID(displayDiv).innerHTML = responseText;
    document.getElementByID(displayDiv).style.display = 'block';
}

function failedCallBack(responseText) {
    var msg;
    msg = responseText;
    msg = msg + ' here';
    //handle here;
}

Answer 1

No were in my post do I mention JAVA, all the code shown is javascript.

I did not post the JAVA code, shouldn't be needed. I am getting the response back just fine. Using firebug, I can see were the readystate changes after the send() and can see the returned text in firebug's console.

Not sure why you are confused. Maybe you should re-read the post.

Answer 2

Created a fiddle which works just fine. So not sure what is going wrong at your side.

Another thing: try to define your variable before using then:

function testajax() {
    var params = 'action=testing';
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", "/echo/json", true);
    xmlhttp.onreadystatechange = callBack;
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");
    xmlhttp.send(params);
}

excellent example page for XMLHttpRequest: http://www.openjs.com/articles/ajax_xmlhttp_using_post.php

Just asking: why not use jQuery ?

Example:

$.ajax({
    type: 'POST',
    url: 'afs_controller',
    data: { 
        'action': 'testing'
    },
    success: handleReturn,
    error: failedCallBack
});