jQuery小部件$ .ajax()。abort()“未捕获的TypeError:无法读取未定义的属性'长度'”

时间:2013-08-20 18:55:51

标签: ajax jquery jquery-1.9 jquery-1.8

我创建了一个使用$ .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

我放了完整版的jQu​​ery 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

1 个答案:

答案 0 :(得分:1)

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

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

我希望这有助于其他人!