在未实现接口 XMLHttpRequest 的对象上调用错误“open”

Error 'open' called on an object that does not implement interface XMLHttpRequest

本文关键字：错误 调用 open 对象 实现 接口 XMLHttpRequest      更新时间：2023-09-26

当我尝试从另一个类函数在类内启动ajax请求时，我收到此错误。您可以从此示例中在 Firefox 控制台中获取错误：

https://jsfiddle.net/d2o1d0eu/

http://codepen.io/anon/pen/dGwwKG

var MyClass = new Class({
    initialize: function(options){
        this.my_request = new Request({
            url: '/echo/html/',
            method: 'post',
            onSuccess: function(resp) {
                alert(resp);
            }
        });
    },
    request: function(param){
        this.my_request.send('html='+param);
    }   
});
var MySecondClass = new Class({
    Implements: [Options],
    options: {
        first_class: {}
    },
    initialize: function(options){
        this.setOptions(options);
        this.options.first_class.request('internal'); // error
    },
    request: function(param){
        this.options.first_class.request(param);
    }
});
var unknown_name = new MyClass();
// unknown_name.request('unknown_name test'); // ok
var test = new MySecondClass({
    'first_class': unknown_name
});
// test.request('second class test'); // error

任何建议不胜感激，谢谢。

在内部，Options mixin 使用 Object.merge ，它执行传递的 options 参数的递归副本。

在代码中，将MyClass实例作为选项传递给 MySecondClass 的实例。以这种方式传递对象时，Object.merge将以递归方式克隆该对象。这意味着在第二个类中，this.options.first_class.my_request实际上是Request实例的克隆，并且还克隆了该实例的所有对象属性。

这会带来一个问题，因为Request类的实际XMLHttpRequest对象是在此过程中克隆的。你最终得到的是一个基本对象(即，它只继承自Object.prototype(，它具有实际XMLHttpRequest实例的所有属性和方法，但不是实际实例。由于XMLHttpRequest的方法认为您正在尝试在非实例上调用这些方法，因此您将获得一个 DOMException。

要点是：不要将Class实例作为选项传递。相反，将它们作为单独的参数传递：new MySecondClass(unknown_name, options) .

相关文章：