在 URL 中定义和生成回调的 JQuery JSONP 请求

Posted 2023-03-03

【中文标题】在 URL 中定义和生成回调的 JQuery JSONP 请求

【英文标题】：JQuery JSONP request with defined and generated callback in URL

【发布时间】：2015-01-31 16:33:43

【问题描述】：

我有一个测试 JSONP 服务器，它在发出 HTTP GET 请求时返回一个 JSONP 对象。它可以返回标准 JSONP 函数或回调变量中请求的函数。例如

http://my.host:8024

JSONP_CALLBACK([ "msg":"这是丹尼斯的生日！咖啡角为所有人准备的蛋糕！！！！（持续时间 ;-)）", "msg":"OBIEE_1 域中的部分客户可能会因网络延迟而导致性能下降，详情请联系 Paul", "msg":"Weblogic 域 WL_ENG_1 将因 22:00 至 00:00 之间的维护而关闭" ]);

http://my.host:8024/?callback=demo

demo([
    "msg":"It is Dennis birthday! Cakes for everone at the coffee corner !!!! ( while it lasts ;-) )",
    "msg":"Some customers in domain OBIEE_1 may experience performance degradation due to network latency, contact Paul for details",
    "msg":"Weblogic domain WL_ENG_1 will go down due to maintenance between 22:00 and 00:00"
]);

此示例用于测试 AngularJS $http JSONP 方法，并且可以很好地测试这些脚本。现在我正在尝试开发一个简短的 jQuery 脚本来检索与此演示服务器相同的 JSON 数据。 jQuery 脚本是；

<script type="text/javascript" charset="utf-8">

var htmlData = "<ul><li>Ticker was not successfully initialized</li></ul>" ;

// callback function for JSONP ajax request
function msgsJsonCallback(jsonData) 
    htmlData = "<ul>" ;
    // get all msg values from JSON data
    // JSON format (["msg":"message 1","msg":"message 2,......])
    $.each(jsonData, function() 
        htmlData += "<li>" + this['msg'] + "</li>" ;          
    ) ;
    httmlData = htmlData + "</ul>" ;
    $('#tickerMessage').vTicker('stop');
    $('#tickerMessage ul').replaceWith(htmlData);
    $('#tickerMessage').vTicker('init',speed: 1500, pause: 10000);


function RefreshMessages() 
    var url= "http://my.host:8024/?callback=?" ;
    $.ajax( 
        type: 'GET',
        url: url, 
        jsonpCallback: 'msgsJsonCallback', 
        dataType: 'jsonp',
        timeout: 5000,
        success: function(json) 
            console.log("Success") ;
            console.dir(json) ;
        ,
        complete: function(jqXHR, textStatus)
            console.log("COMPLETE: " + textStatus) ;
        
     );

    // schedule next refresh
    setTimeout(function() 
        RefreshMessages();
    , 60000);



// initialize message ticker on document-ready
$(document).ready(function() 
    RefreshMessages();
) ;


</script>

预期的 HTTP 请求是 http://my.host:8024/?callback=msgsJsonCallback，但生成的 http 请求类似于 http://my.host:8024/?callback=msgsJsonCallback&_39430030203。所以很可能指定的回调函数和生成的回调函数都在JSONP请求中。

何时（基于其他示例）更改 "var url="http://my.host:8024/?callback=?" ;"到“var url=”http://my.host:8024/?callback=“;” HTTP 请求更改为“http://my.host:8024/?callback=&callback=msgsJsonCallback&39430030203”。或者将 url 更改为 "var url="http://my.host:8024" 时，请求 url 变为 "http://my.host:8024/?callback=msgsJsonCallback&=39430030203"。

感谢任何有关如何解决此问题的帮助！

【问题讨论】：

启用CORS 并尽可能删除jsonp (this is why)

【参考方案1】：

_=someRandomNumber 位被添加为一种解决方法，以确保 ajax 请求接收新数据而不是访问浏览器缓存。

如果要删除它，请添加 cache: true 选项：

function RefreshMessages() 
var url= "http://my.host:8024" ;
$.ajax( 
    type: 'GET',
    url: url, 
    jsonpCallback: 'msgsJsonCallback', 
    dataType: 'jsonp',
    timeout: 5000,
    success: function(json) 
        console.log("Success") ;
        console.dir(json) ;
    ,
    complete: function(jqXHR, textStatus)
        console.log("COMPLETE: " + textStatus) ;
    ,
    cache: true
 );

【讨论】：

感谢_randomNumber的解释。这让我有正确的理解来解决我编写的 bash 网络服务器方面的问题。该脚本只需要一个 url 变量，因此将“?callback=callbackname&_randomnumber”解释为一个 url 变量。