jQuery widget $.ajax() .abort() "Uncaught TypeError: Cannot read property 'length' of undefined"

Question

我创建了一个小部件，它使用$.ajax（）调用从服务器获取数据。我允许用户在需要时刷新服务器上的数据，因此我需要能够取消现有请求，这样就不会与从服务器返回的多个数据集发生冲突。一次只能执行一个请求。

---

Widget Code
(function ($) {
    $.widget("w.widgetName", {
        options: { { /*set the widget options here*/ }},
        _create: function () { /*do the create stuff here */ },
        _cancelAjaxRequest: function(){//private method to cancel the current ajax request
            var xhr = this.ajaxGetCall;
            if (xhr && xhr.readyState != 4){
                xhr.abort();//line that throws the error, but in the jQuery code
            }
        },
        refresh: function () {
            var self = this;
            self._cancelAjaxRequest();
            self.ajaxGetCall = $.ajax({//I assign the $.ajax() xhr object here
                type: "POST",
                contentType: "Application/json; charset=utf-8",
                dataType: "json",
                url: "url/goes/here",
                data: dataGoesHere,
                success: function (data) { /*Do stuff here*/},
                error: function (xhr, status, error) { /*Do stuff here*/},
                complete: function (r, s) { /*Do stuff here*/}
            });
        },
        destroy: function () {
            var self = this;
            self._cancelAjaxRequest();
            //do other stuff to destroy the object
        }
    });
} (jQuery));

---

使用jQuery 1.8.2和1.9.1，我在执行xhr.abort();时得到以下错误。

 TypeError: Cannot read property 'length' of undefined

我放置了jQuery 1.8.2和1.9.1的完整版本，它们都指向第622行。

each: function( obj, callback, args ) {
        var value,
            i = 0,
            length = obj.length,
            //remaining code removed for brevity
            }

---

非常感谢我对这个问题的任何帮助或见解！

---

更新：我一直在做console.log(xhr)，只是为了再次检查并确保我得到了一个xhr对象。这是从Chrome控制台复制粘贴的。

Object {readyState: 1, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 0
setRequestHeader: function ( name, value ) {
state: function () {
status: 0
statusCode: function ( map ) {
statusText: "abort"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object

Answer 1

根据Kevin B对我的问题的评论，我使用Chrome中的堆栈跟踪来找到问题代码行。

幸运的是，它与我在问题中发布的代码无关。它与我为处理服务器错误而编写的一个函数有关。调用xhr.abort()会强制调用$.ajax()的error方法。我有一个分配给error方法的函数，该方法正在查看xhr.responseText，但我未能检查xhr.responseText是否不是null，也不是undefined。

我希望这能帮助其他人！