JQuery JSONP request with defined and generated callback in URL

Question

I have a test JSONP server which returns a JSONP object when a HTTP GET request is made. It can return a standard JSONP function or a function requested in the callback variable. Eg

http://my.host:8024

JSONP_CALLBACK([ {"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"} ]);

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"}
]);

This example is used for testing AngularJS $http JSONP methods, and works fine for testing these scripts. Now i am trying to develop a short jQuery script retrieves the same JSON data this demo server. The jQuery script is;

<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>

The expected HTTP request was http://my.host:8024/?callback=msgsJsonCallback , but the resulting http request is similar to http://my.host:8024/?callback=msgsJsonCallback&_39430030203 . So probably the specified callback function and generated callback function are both in the JSONP request.

When (based on other examples) changing "var url= " http://my.host:8024/?callback= ?" ;" to "var url= " http://my.host:8024/?callback= " ;" the HTTP request changes to " http://my.host:8024/?callback=&callback=msgsJsonCallback& 39430030203 ". Or when changing the url to "var url= " http://my.host:8024 " the request url becomes " http://my.host:8024/?callback=msgsJsonCallback& =39430030203 ".

Any help on how to resolve this issue is appreciated !

Answer 1

The _=someRandomNumber bit is being added as a workaround to ensure the ajax request receives fresh data instead of hitting the browser cache.

If you want to remove this, add the cache: true option:

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
 });

}