Using success / jsonpCallback with ajax request

Question

I am developing an application for Netflix using their OData APIs. I followed a Steven Walter blog post on how to request the OData API. In it, he uses the following code:

$.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback }); 

In my application, I need to use OData paging links to get complete lists. My code is as follows:

 // create url and handle ajax call to Netflix function getTitles() { query = "http://odata.netflix.com/v2/Catalog" // netflix odata base url + "/Genres('Television')" // select Genre + "/Titles" // top-level resource + "?$select=NetflixApiId,Name,BoxArt,Synopsis,ReleaseYear,AverageRating,Series" // choose fields + "&$orderby=Name" // Sort results by name + "&$filter=Instant/Available eq true" // filter by instant view + " and Type eq 'Season'" // select only seasons + "&$expand=Series" // include series data + "&$callback=callback" // specify name of callback function + "&$format=json"; // json request $.ajax({ dataType: "jsonp", url: query, jsonpCallback: "callback", success: callback, error: function(XHR, textStatus, errorThrown){ alert(textStatus + ":" + errorThrown); } }); } // create seasons array and and repeat ajax call until all results are returned function callback(result) { seasons = seasons.concat(result["d"]["results"]); if (typeof result["d"]["__next"] != 'undefined') { var urlJSONP = result["d"]["__next"] + "&$callback=callback&$format=json"; $.ajax({ dataType: "jsonp", url: urlJSONP, jsonpCallback: "callback", success: callback, error: function(XHR, textStatus, errorThrown){ alert(textStatus + ":" + errorThrown); } }); } else { processResults(); } } 

However, when this is done, I keep getting parserError . It looks like the callback function is called twice. If I delete the success: callback , the application will work fine. My question is: is there a problem with leaving a line of success code from an ajax call? Or why is it necessary to include jsonpCallback and success strings? I basically ask this out of curiosity because the application seems to work just fine without both callback lines.

Answer 1

Depending on what your code is trying to do, I'm not sure why you are specifying both jsonpCallback and success in your $.ajax call. I would suggest you specify success to process your data and process your paging. Let jQuery determine the name of your jsonp callback.

Essentially, what the jsonp callback does is it gets the payload from your WCF data service and then passes it to your success handler. It looks like you could use jsonpCallback if you want to do some caching or some other data preprocessing before processing your success handler. I'm not sure why in this case you should specify the same function as your jsonpCallback and success handlers. (I briefly looked at Stephen’s article that you contacted, and I’m not because he does this.)

The following is an example of calling jsonp in a WCF data service, which I use in demos and conversations (and you use them for a while). I am using JSONPSupportBehaviorAttribute to enable JSONP in my WCF data service (not sure if this is what you are using or not).

But in my code example, I do not specify the name jsonpCallback ; I just specify the jsonp jsonp parameter (should be $callback instead of the standard callback ), but I give jQuery the name of the jsonp callback function.

My success handler is called once, and everything works fine. So I would like to forget about jsonpCallback , keep your success handler in place, and I think things should start working better.

Hope this helps. Let me know if you have further questions. Good luck

 $.ajax({ url: 'http://server:25812/Services/AgileWays.Baseball.Service.svc/Teams?$format=json&$filter=yearID eq 1882', type: 'GET', dataType: 'jsonp', cache: false, jsonp: '$callback', error: function (x, t, r) { alert(x.response.message); }, success: function (data) { $.each(data.d.results, function (i, val) { $("#results").append("<div>" + val.name + "</div>"); }); } }); 

Answer 2

Do not define a callback because jQuery creates this function for you. Here is an example, jsFiddle :

 function getTitles() { query = "http://odata.netflix.com/v2/Catalog" // netflix odata base url + "/Genres('Television')" // select Genre + "/Titles" // top-level resource + "?$select=NetflixApiId,Name,BoxArt,Synopsis,ReleaseYear,AverageRating,Series" // choose fields + "&$orderby=Name" // Sort results by name + "&$filter=Instant/Available eq true" // filter by instant view + " and Type eq 'Season'" // select only seasons + "&$expand=Series" // include series data + "&$callback=?" // specify name of callback function + "&$format=json"; // json request $.ajax({ dataType: "jsonp", url: query, success: callback, error: function(XHR, textStatus, errorThrown){ alert(textStatus + ":" + errorThrown); } }); } 

callback=? basically queries jQuery to handle all JSONP returns.