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

Question

设置：

我有一个数据表，它的每一行都是可点击的。单击一行时，会进行一个 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>

Answer 1

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

1. JSONP 被触发；
2. 回调已设置；
3. JSONP 返回；
4. 回调被触发；
5. 回调被删除；

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

1. JSONP1 被触发；
2. 名称为callback 的回调已设置。
3. JSONP2 被触发；
4. 回调 callback 被 JSONP2 覆盖；
5. JSONP1 返回；
6. 为 JSONP1 触发回调 callback；
7. JSONP1 删除callback；
8. JSONP2 返回；
9. JSONP2 尝试触发 callback，但已被删除；
10. TypeError 被抛出。

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

Answer 2

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

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

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

希望这会有所帮助。