对同一个 URL 的第二次 AJAX 调用失败 - 但随机且很少工作

Question

我正在尝试从网络服务获得响应，特别是将两个 WFS 图层从地理服务器添加到传单网络地图。每次添加第一层都没有问题，但大多数时候，第二层失败，抱怨未定义回调函数：

ReferenceError: getJson is not defined

但是让我很奇怪的是，第二层会被添加，只是有时。刷新页面再试几乎总是失败。

这是进行 ajax 调用的代码：

$(document).ready(function() {

...

    $("#add-network-button").on("click", function() {setLocation("Moscow")}) 

    function setLocation(locationName) {

        var networkParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: 'netex:' + locationData[locationName].networkWFSName,
            maxFeatures: 99999,
            outputFormat: 'text/javascript',
            format_options: 'callback: getJson'
        };

        addWebService(map, WFSURL, networkParameters)

        var buildingParameters = {
            service: 'WFS',
            version: '1.0.0',
            request: 'GetFeature',
            typeName: 'netex:' + locationData[locationName].buildingWFSName,
            maxFeatures: 99999,
            outputFormat: 'text/javascript',
            format_options: 'callback: getJson'
        };

        addWebService(map, WFSURL, buildingParameters)

    }

这里是 addWebService 函数：

var addWebService = function(map, WFSURL, WFSParameters) {

    var leafletWFSParameters = L.Util.extend(WFSParameters);

    console.log(WFSURL + L.Util.getParamString(leafletWFSParameters));

    $.ajax({
        url: WFSURL + L.Util.getParamString(leafletWFSParameters),
        dataType: 'jsonp',
        jsonpCallback: 'getJson',
        success: handleJson,
        cache: false
    });

    // TODO: add style
    function handleJson(data) {
        L.geoJson(data, {}).addTo(map);
    }
}

Answer 1

您正在使用 jsonp，这意味着您返回的数据不是 JSON，而是 javascript 调用全局定义函数的代码 (哪个名称由 jsonpCallback).

定义

jQuery 自动创建一个具有该名称的函数，执行网络请求，当该函数运行时，它会从全局范围内销毁它自己的引用。

您正在快速连续执行两次对 addWebService() 的调用，这会触发两个 jQuery $.ajax({jsonpCallback: 'getJson'}) 调用。第二次调用覆盖全局定义的 getJson 回调函数。当您的浏览器收到第一个 jsonp 负载时，全局定义的 getJson 回调将被销毁。当收到第二个 jsonp 负载时，它会尝试调用全局定义的 getJson 函数，但失败了。经典的竞争条件。

让我引用 jQuery's documentation for the jsonpCallback parameter on $.ajax()，empasis 我的：

jsonpCallback

Type: String or Function()

Specify the callback function name for a JSONP request. This value will be used instead of the random name automatically generated by jQuery. It is preferable to let jQuery generate a unique name as it'll make it easier to manage the requests and provide callbacks and error handling. You may want to specify the callback when you want to enable better browser caching of GET requests.

我建议您要么使用 JSONP 以外的其他传输格式，要么为每个请求使用不同的回调名称。

对同一个 URL 的第二次 AJAX 调用失败 - 但随机且很少工作

2nd AJAX call to same URL fails - but works randomly and rarely

ajax

leaflet

geoserver

web-feature-service