Javascript 基本Ajax库中的Bug

基于Matthew Eernise（请参阅）的《构建自己的Ajax Web应用程序》一书中的教程，我一直在尝试使用JavaScript创建一个基本的Ajax库，因为我想更深入地了解Ajax XML-RPC和REST。根据这本书，我创建了一个JavaScript构造函数来启动AJAX或XMLHttpRequest，但不知何故，我似乎遇到了超出范围的问题，并且AJAX类没有在以下脚本中定义：

function Ajax() {
    // properties 
    this.req = null;
    this.url = null;
    this.method = 'GET';
    this.asynch = true;
    this.status = null;
    this.statusText = '';
    this.postData = null;
    this.readyState = null;
    this.responseText = null;
    this.responseXML = null;
    this.handleResp = null;
    this.responseFormat = 'text',
    // 'text', 'html', 'xml' or 'object'
    this.mimeType = null;

} // End Constructor

//Create XMLHttpRequest method with  XMLHttpRequest object
this.init = function() {
    if (!this.req) {
        try {
            //Try to create objects for Firefox, Safari, IE7, etc.
            this.req = newXMLHttpRequest();
        }

        catch(e) {
            try {
                //Try to create object for later versions of IE.
                this.req = new ActiveXObject('MSXML2.XMLHTTP');
            }

            catch(e) {
                try {
                    //Try to create for early versions of IE.
                    this.req = new ActiveXObject('Microsoft.XMLHTTP');
                }

            catch(e) {
                //Could not create XMLHttpRequest object.
                return false;
            }
        }
    }
}
return this.req;
};


//Sending a Request method
this.doReq = function() {
    if (!this.init()) {
        alert('Could not create XMLHttpRequest object.');
        return;
    }
    //Setting up a request
    //open methods with method, url and asycn yes or no
    this.req.open(this.method, this.url, this.asynch);
    //Make sure mimetype is OK
    if (this.mimeType) {
    try {
        req.overrideMimeType(this.mimeType);
    }
    catch(e) {
        //couldn't override MIME type ... IE6 or Opera?
        }
}

var self = this; // fix loss-of-scope in inner function
this.req.onreadystatechange = function() {
    var resp = null;
    if (self.req.readyState == 4) {
        //do stuff to handle response
            switch (self.reponseFormat) {
            case 'text':
                resp = self.req.responseText;
                break;
            case 'xml':
                resp = self.req.responseXML;
                break;
            case 'object':
                resp = req;
                break;
            }
            if (self.req.status >= 200 && self.req.status <= 299) {
                self.handleResp(resp);
            }
            else {
                self.handleErr(resp);
            }
        }

};
this.req.send(this.postData);
};

this.handleErr = function() {
    var errorWin;
    try {
        errorWin = window.open('', 'errorWin');
        errorWin.document.body.innerHTML = this.responseText;
    }
    catch(e) {
        alert('An error occured, but this error message cannot be '
        + 'displayed. This is probably because of your browser\'s '
        + 'pop-up blocker. \n'
        + 'Please  allow pop-ups from this website if you want to '
        + 'see the full error messages. \n'
        + '\n'
        + 'Status Code: ' + this.req.status + '\n'
        + 'Status description: ' + this.req.statusText);
    }
};

this.abort = function() {
    if (this.req) {
        this.req.onreadystatechange = function() {};
        this.req.abort();
        this.req = null;
    }
};

this.doGet = function (url, hand, format) {
    this.url = url;
    this.handleResp = hand;
    this.responseFormat = format || 'text' ;
    this.doReq();
};

并启动一个新的Ajax实例，获取错误

Ajax未定义

，即使我添加了

var self=this；//修复内部函数中范围的丢失

以解决范围问题。我错过了什么

更新1

多亏了这里的提示，我们为新实例提供了不同的名称，这样它们就不会发生冲突：

var hand = function (str) {
    alert(str);
}
var ajax = new Ajax(); // new instance as can ben done with PHP5 constructor classes
ajax.doGet ('/fakeserverpage.php', hand);

现在我更进一步了。现在我得到一个新错误：

uncaughttypeerror:Object#。我现在看到一个弹出窗口，上面说
无法创建XMLHttpRequest对象。
此错误消息内置于该方法中，因此它可以工作，但它无法以某种方式创建对象。这意味着我的XMLHttpRequest请求中一定有错误，因为我涵盖了所有案例，并在Firefox11 for Mac中使用本地MacPorts MAMP上的代码对此进行了测试。要么是那样，要么还有别的事我不知道

更新4

修正了一个打字错误。然后我得到了一个404加载假服务器页面。修正路径
ajax.doGet（'/ajax/fakeserverpage.php'，hand）现在好了。我只需要让PHP生成代码，这样我就可以得到一个OK。标题响应还可以，但我还没有看到AJAX警报。然后我检查了控制台，发现了这个错误：

self.req is undefined
http://localhost/ajax/ajax.js
Line 78

请参阅最新代码：。我在我认为仍然需要的地方添加了更多的Ajax.prototype。现在我得到：

this.req is null
http://localhost/ajax/ajax.js
Line 100

更新5

使用var
self=this
删除最初用于范围外问题的一些self进行了一些更改。代码仍然是相同的粘贴库，但我已经更新了它。现在我有：

Ajax.prototype.handleResp is not a function
http://localhost/ajax/ajax.js
Line 92

更新6

我清除了我在
req.onreadystatechange=function（）
函数中犯的一些错误，现在我确实运行了。我打开了Firefox弹出窗口拦截器的localhost，重新加载时，它打开了另一个选项卡，显示了文本
未定义
。差不多了。没有错误，只是没有弹出OK。Chrome显示一个弹出窗口，其中主体中有
未定义的
。此处更新的代码：与往常一样，您对实例和类本身使用相同的名称。
另外，您正在声明
Ajax
并使用
Ajax
，Javascript区分大小写。
您对实例和类本身使用相同的名称。
另外，您正在声明
Ajax
并使用
Ajax
，Javascript是区分大小写的。
首先，您有
var Ajax=new Ajax（）
您应该有
var ajax=new ajax（）取而代之

其次，在构造函数之外使用
这个
并不是指Ajax对象。尝试使用其原型：

function Ajax() {
    // Set properties here
}
Ajax.prototype.init = function() {
    // ...
}

有关更多信息，请参阅。
首先，您有
var Ajax=new Ajax（）
您应该有
var ajax=new ajax（）取而代之

其次，在构造函数之外使用
这个
并不是指Ajax对象。尝试使用其原型：

function Ajax() {
    // Set properties here
}
Ajax.prototype.init = function() {
    // ...
}

有关更多信息，请参阅。
谢谢！现在我更进一步了。只需要弄清楚我为什么会出现现在出现的错误-请参阅更新的问题。看看arxanas的答案，我想这就是你新错误的来源是的，我做了，并且尝试了
Ajax.prototype.init=function（）{
，但这仍然给了我同样的错误
uncaughttypeerror:Object#没有方法'doGet'
，所以肯定还有其他原因。仍然在关注这个问题你也需要为
doGet
做这件事，而不仅仅是
init
谢谢！现在我更进一步了。只需要弄清楚为什么我现在会出现错误-请参阅updated问题。看看arxanas的答案，我想这就是你新错误的来源是的，我试过了，我试过
Ajax.prototype.init=function（）{
，但这仍然给了我同样的错误
uncaughttypeerror:Object#没有方法'doGet'
，所以肯定还有其他原因。仍然在考虑问题，您也需要为
doGet
执行此操作，而不仅仅是
init