Javascript AJAX class problem

Hi I'm not sure exactly how to describe this problem, so I'm hoping the code will explain my problem. The php script ( phppage.php ) called by the ajax function does nothing more than echo hello world.

When the alert('a') line is left in the recall function withing the ajax function, then the code works as expected,开发者_开发技巧 and the final line pops up the message "hello world". However then the alert('a') line is commented out, then the final line does not give "hello world", but the value 13, as is set in the constructor function.

I'm trying this on firefox 3.6.18

Any help would be gratefully appreciated.

function A() {
    this.b = 13;
    function finish(context,response) {
        context.b = response;
    }
    ajax(finish,this);
}

A.prototype = {
    constructor: A
}

function ajax(callback,context) {
    var http = new XMLHttpRequest();
    var url = "phppage.php";
    http.open("GET", url, true);
    http.onreadystatechange = recall;
    function recall() {
        alert('a');
        if(http.readyState == 4 && http.status == 200) {
            callback(context,http.responseText);
        }
    }
    http.send(null);
}

var d = new A();
alert(d.b);

---

I see a couple of problems with your code. First one is with your finish function, what you are doing with the context variable is very poor style and Javascript has a feature called closures that will clean things up for you. You constructor should look more like this:

function A() {
    this.b = 13;
    //this is how you should be storing contexts
    var that = this;
    function finish(response) {
        that.b = response;
    }
    ajax(finish);
}

finish will have access to that even after the constructor A has returned. Also you don't need that prototype stuff you have under A either. It is literally doing nothing.

Finally we can tidy up your AJAX function a bit so it looks like this:

function ajax(callback) {
    var http = new XMLHttpRequest();
    var url = "phppage.php";
    http.open("GET", url, true);
    http.onreadystatechange = function() {
        alert('a');
        if(http.readyState == 4 && http.status == 200) {
            callback(http.responseText);
        }
    }
    http.send(null);
}

Note, this is all untested code so no guarantees it will work but i think it will point you in the right direction.

EDIT:

Now that I look at your code I realize that it probably is working its just that you are calling ajax asynchronously so it returns right away and you are echoing the value of b before you get it back.

might want to try:

http.open("GET", url, false);

(but all of my comments above should still be considered because they will really clean things up a bit)