面向对象的JavaScript-AJAX类

面向对象的JavaScript-AJAX类,javascript,ajax,oop,scope,onreadystatechange,Javascript,Ajax,Oop,Scope,Onreadystatechange,正在使用AJAX类。代码如下: function AjaxRequest(params) { if (params) { this.params = params; this.type = "POST"; this.url = "login.ajax.php"; this.contentType = "application/x-www-form-urlencoded"; this.contentLength

正在使用AJAX类。代码如下:

function AjaxRequest(params) {
    if (params) {
        this.params = params;
        this.type = "POST";
        this.url = "login.ajax.php";
        this.contentType = "application/x-www-form-urlencoded";
        this.contentLength = params.length;
    }
}

AjaxRequest.prototype.createXmlHttpObject = function() {
    try {
        this.xmlHttp = new XMLHttpRequest();
    }
    catch (e) {
        try {
            this.xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
        }
        catch (e) {}
    }

    if (!this.xmlHttp) {
        alert("Error creating XMLHttpRequestObject");
    }
}

AjaxRequest.prototype.process = function() {
    try {
        if (this.xmlHttp) {
            this.xmlHttp.onreadystatechange = this.handleRequestStateChange();
            this.xmlHttp.open(this.type, this.url, true);
            this.xmlHttp.setRequestHeader("Content-Type", this.contentType);
            this.xmlHttp.setRequestHeader("Content-Length", this.contentLength);
            this.xmlHttp.send(this.params);
            }
        }
        catch (e) {
            document.getElementById("loading").innerHTML = "";
            alert("Unable to connect to server");
        }
    }

AjaxRequest.prototype.handleRequestStateChange = function() {
    try {
        if (this.xmlHttp.readyState == 4 && this.xmlHttp.status == 200) {
            this.handleServerResponse();
        }
    }
    catch (e) {
        alert(this.xmlHttp.statusText);
    }
}

AjaxRequest.prototype.handleServerResponse = function() {
    try {
        document.getElementById("loading").innerHTML = this.xmlHttp.responseText;
    }
    catch (e) {
        alert("Error reading server response");
    }
}
很明显是这样实例化的:

var ajaxRequest = new AjaxRequest(params);
ajaxRequest.createXmlHttpObject();
ajaxRequest.process();
我对
handleRequestStateChange
方法有一个问题,因为它处理
xmlHttp.onreadystatechange
。通常,当您为onreadystatechange定义函数时,在调用它时不包括括号,例如
xmlHttp.onreadystatechange=HandlerRequestStateChange但由于我试图将
HandlerRequestStateChange()
保留在类的范围内,因此onreadystatechange遇到了问题。函数确实会被调用,但它似乎卡在0的readyState上

任何帮助或见解都将不胜感激。请让我知道,如果更多的细节需要包括,或者如果我不清楚的东西

AjaxRequest.prototype.handleRequestStateChange = function() {
    var self = this;

    return function() {
        try {
            if (self.xmlHttp.readyState == 4 && self.xmlHttp.status == 200) {
                self.handleServerResponse();
            }
        }
        catch (e) {
            alert(self.xmlHttp.statusText);
        } 
    };
}
现在,当您执行
this.xmlHttp.onreadystatechange=this.handleRequestStateChange()时
,它将返回一个绑定函数,该函数捕获了对
self
的正确
引用,该引用在实际
onreadystatechange
函数中使用


现在,当您执行
this.xmlHttp.onreadystatechange=this.handleRequestStateChange()时
,它将返回一个绑定函数,该函数捕获了对
self
的正确
引用,该引用在实际的
onreadystatechange
函数中使用。

是否尝试将其包装在匿名函数中
this.xmlHttp.onreadystatechange=function(){this.handleRequestStateChange();}以防万一你不知道,在@AnthonyGrist我尝试过这个之前就已经做过了,但它对我不起作用。然而,下面的解决方案确实有效。谢谢你的帮助。你试过用匿名函数包装它吗
this.xmlHttp.onreadystatechange=function(){this.handleRequestStateChange();}以防万一你不知道,在@AnthonyGrist我尝试过这个之前就已经做过了,但它对我不起作用。然而,下面的解决方案确实有效。谢谢你的帮助。