为啥单个 Ajax 调用工作正常，但连续 Ajax 调用失败？

Posted 2023-03-03

【中文标题】为啥单个 Ajax 调用工作正常，但连续 Ajax 调用失败？

【英文标题】：Why does a single Ajax call work fine, but consecutive Ajax calls fail?为什么单个 Ajax 调用工作正常，但连续 Ajax 调用失败？

【发布时间】：2012-07-15 00:38:55

【问题描述】：

设置：

我有一个数据表，它的每一行都是可点击的。单击一行时，会进行一个 ajax 调用，该调用会返回一些数据。有时，ajax 调用需要一些时间，具体取决于返回的数据量。一切正常。

问题：

当快速单击行时会出现问题，一个接一个。简而言之，在上一个 ajax 调用返回之前，如果单击该行（即进行了新的 ajax 调用），我会收到错误消息。

Uncaught TypeError: Property 'callback' of object [object Window] is not a function 

（ajax调用返回一个JSONP数据）

看起来 ajax 调用以某种方式混合在一起（？），但我不确定这一点。谁能告诉我为什么会这样？

如果需要更多信息来澄清问题，请告诉我。

谢谢

编辑 1：

这里是一些 ajax 代码：

            $.ajax(
                type: "GET",
                url: 'http://' + myserver + ':8080/someurl/' + my_param,
                contentType: "application/json",
                dataType: "jsonp",
                jsonpCallback: 'callback',
                success: function(data) 
                // Inside here, I am doing some Datatables stuff.
                var myTable = $('#my_table').dataTable( 
                        "bJQueryUI" : true,
                        "bSort" : false,
                        "bFilter" : false,
                        "bPaginate": true,
                        "bProcessing": true,
                        "bScrollCollapse": true,
                        "bInfo": false,
                        "bDestroy": true,
                        "aaData": samples,
                        "sEmptyTable": "No sample listings avaiable",
                        "iDisplayLength": number,
                        "bLengthChange": false,
                        "bAutoWidth": false,
                        .
                        .
                        .
                    

编辑 2：

这是为callback 分配其名称的类。如果默认回调为空，则它分配一个默认值“回调”。但看起来默认回调总是为空，因此它总是分配“回调”。

public class MappingJacksonJsonpConverter extends MappingJacksonHttpMessageConverter 

    @Override
    protected void writeInternal(Object object, HttpOutputMessage outputMessage) throws IOException,
            HttpMessageNotWritableException 

        JsonEncoding encoding = getJsonEncoding(outputMessage.getHeaders().getContentType());
        JsonGenerator jsonGenerator = this.getObjectMapper()
                .getJsonFactory()
                .createJsonGenerator(outputMessage.getBody(), encoding);
        try 
            String jsonPadding = "callback";
            if (object instanceof JsonObject) 
                String jsonCallback = ((JsonObject) object).getJsonCallback();
                if (jsonCallback != null) 
                    jsonPadding = jsonCallback;
                
            
            jsonGenerator.writeRaw(jsonPadding);
            jsonGenerator.writeRaw("(");
            this.getObjectMapper().writeValue(jsonGenerator, object);
            jsonGenerator.writeRaw(")");
            jsonGenerator.flush();
         catch (JsonProcessingException ex) 
            throw new HttpMessageNotWritableException("Could not write JSON: " + ex.getMessage(), ex);
        
    

上面的类在mvc-servlet.xml中被引用如下：

    <mvc:message-converters>
        <bean
            class="citygrid.feedmanager.web.converter.MappingJacksonJsonpConverter">
            <property name="supportedMediaTypes">
                <list>
                    <value>application/x-javascript</value>
                </list>
            </property>
        </bean>
    </mvc:message-converters>

【问题讨论】：

使用同步ajax请求Here

@AlexBall：正如我在问题中提到的，我正在返回不支持同步调用的 JSONP 数据（跨域调用）。 api.jquery.com/jQuery.ajax

您使用什么来执行 AJAX 查询？你能粘贴你的ajax代码吗？

如果删除 jsonpCallback: 'callback' 参数会怎样？所有回调都试图使用相同的回调函数名称，那么问题出在哪里？使用生成的名称也许可以避免这种情况？

async:false 不适用于 JSONP。它也与服务器端无关。 Chris 是对的：问题在于所有 JSONP 请求都有相同的回调。 JQuery 删除 JSONP 返回后的回调。这就是为什么如果你快速触发两个 JSONP，第二个会尝试触发 undefined 回调导致异常。

【参考方案1】：

问题在于 jQuery 如何处理带有 JSONP 的回调。想法是这样的：

JSONP 被触发； 回调已设置； JSONP 返回； 回调被触发； 回调被删除；

如果您不定义自定义jsonpCallback，现在一切正常（默认情况下，jQuery 为每个 JSONP 请求分配唯一的回调）。现在如果你这样做并且同时触发两个 JSONP 请求会发生什么？

JSONP1 被触发； 名称为callback 的回调已设置。 JSONP2 被触发； 回调 callback 被 JSONP2 覆盖； JSONP1 返回； 为 JSONP1 触发回调 callback； JSONP1 删除callback； JSONP2 返回； JSONP2 尝试触发 callback，但已被删除； TypeError 被抛出。

简单的解决方案是不要覆盖jsonpCallback 选项。

【讨论】：

+1，这是完美的解决方案 IMO 和 jquery 会自动定义一个 callback 并在完成后将其删除。

怪异：非常感谢您的解释。当您说“不要覆盖 jsonpCallback 选项”时，您到底是什么意思？不是$.ajax 中的定义jsonpCallback: 'callback',？你能解释一下吗？

@Bhushan 是的，我就是这个意思。

@freakish：我试过了，但正如我之前所说，我遇到了同样的错误，Uncaught TypeError: Property 'callback' of object [object Window] is not a function。我也清除了缓存。但没有运气。知道可能出了什么问题吗？

@Bhushan 抱歉，我不是 Java 程序员，我不了解该代码的详细信息。但绝对问题不是在客户端，而是在服务器端。您需要对其进行调试并弄清楚。或者使用Java 标签提出另一个问题。 :)

【参考方案2】：

正如 Alex Ball 所建议的，您需要将 AJAX 请求放入队列中，以便它们被一一执行。如图所示here in a post in *** 非常简单（是的，它也适用于 JSON-P）。

第二件事是错误消息Property 'callback' of object [object Window] is not a function 只是因为您没有名为callback 的全局 函数。只需将其定义为：

window.callback= function(responseText) 
    //alert(responseText);
;

希望这会有所帮助。

【讨论】：

-1：这行：because you dont have a global function named callback 不正确。 JQuery 足够聪明，可以自动分配名称为callback 的回调。