JavaScript ajax, JSONP, Callback function to do something with data

Question

Fellas,

I'm trying to do an ajax call to get some JSON. I can get around the cross origin issues in Chrome very easily but in IE the only way I got it working without throwing an error is using JSONP. My problem is that i don't know how to process the response. I can see that the call executes and it returns JSON in fiddler but how do i catch it and play with it in my code that's below.

$.support.cors = true; function callAjaxIE(){ $.ajax({ type: 'GET', async: true, url: usageUrl, dataType: 'jsonp', crossDomain: true, jsonp: false, jsonpCallback: processDataIE, // cache: false, success: function (data) { alert('success'); //processData(data) }, error: function (e){ console.log(e); } }).done(function (data) { alert('done'); }); function processDataIE(){ alert('processing data ie'); }

It works when i run it, it displays a message box saying 'processing data ie' but so what. How do i play with the results?

UPDATE:

So I've updated the code as per Quentin. It doesn't go into the 'success' block. It errors out with the following.

When i look at fiddler. The JSON is there. How do i get it?

"I can see that the call executes and it returns JSON" — That's a problem, you need it to return JSONP. — Quentin
– Quentin, Commented Nov 2, 2015 at 19:48
You're not using JSONP correctly. jsonpCallback expects a function that should return a string that will be used for the callback name, or a string callback name. Your function returns nothing, so... who knows what it'l do. — user400654
– user400654, Commented Nov 2, 2015 at 19:50

Quentin · Accepted Answer · 2015-11-02 20:16:30Z

Don't force the function name. That's a recipe for race conditions. Remove jsonpCallback: processDataIE. Let jQuery determine the function name.
Don't remove the callback parameter from the URL. Make the server read callback from the query string to determine which function to call. Remove jsonp: false,.
Use the success function as normal. (Get rid of processDataIE, that's what success is for).

Asides:

crossDomain: true is pointless. It tells jQuery that when it is using XHR (which you aren't) and the URL is pointing to the same origin (which it isn't) then it should not add extra headers in case the server does an HTTP redirect to a different origin.

async: true is pointless. That's the default, and JSONP requests can't be anything other than async anyway.

$.support.cors = true; is pointless at best and can be harmful. Remove it.

Don't override jQuery's detection of support for CORS by the browser. You can't make ancient browsers support CORS by lying to jQuery. You're using JSONP anyway, so CORS is irrelevant.

The above is the sensible, standard, robust solution.

If you want the quick hack that maintains all the bad practises you have in play, then just look at the first argument to processDataIE.

I updated my code with your suggestions. They seems to work but i'm still not understanding how i use this call back function.
You need to make the server return JSONP, not JSON. It needs to be a JavaScript program which calls the function specified in the callback of the query string with one argument (your data).

Collectives™ on Stack Overflow

JavaScript ajax, JSONP, Callback function to do something with data

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related