Question

I’m curious as to why this isn’t working, here’s the code:

function Ajax(sUrl, fCallback) {

    var url = sUrl || '';
    var callback = fCallback || function () {};
    var xmlhttp = (function () {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            try {
                return new ActiveXObject("Msxml2.XMLHTTP.6.0");
            } catch (e) {
                try {
                    return new ActiveXObject("Msxml2.XMLHTTP.3.0");
                } catch (err) {
                    return new ActiveXObject("Microsoft.XMLHTTP");
                }
            }
        } else {
            return null;
        }
    }());

    this.setUrl = function (newUrl) {
        url = newUrl;
    };

    this.setCallback = function (func) {
        callback = func;
    };

    this.request = function (method, data) {
        if (xmlhttp === null) { return false; }

        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState === 4) {
                callback(xmlhttp.status, xmlhttp.responseXML, xmlhttp.responseText);
            }
        };

        data = data || '';
        data = encodeURIComponent(data);
        if ((/post/i).test(method)) {
            xmlhttp.open('POST', url);
            xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xmlhttp.send(data);
        } else {
            var uri = data === '' ? url : url + '?' + data;
            xmlhttp.open('GET', uri);
            xmlhttp.send();
        }

        return true;
    };

    return this;

}

var ajax = new Ajax(''); // sets the url, not necessary for this demonstration
var changed = false;

function change() {
    changed = true;
}

function foo() {
    ajax.setCallback(change);
    ajax.request();
    alert(changed);
}

foo();

There is a fiddle here: http://jsfiddle.net/dTqKG/

I feel like the change function would create a closure that would indeed change the changed variable. Does anyone know what’s going on?

Answer 1

The ajax.request(); will return before change() is called. That is the async nature of the AJAX calls, and the reason why you need the callback as opposed to just getting return value from send() method.
Other than that there might be some other issues in the code. I question why wouldn’t you use one of the many AJAX frameworks readily available instead of writing your own.