jQuery + JSONP + Yahoo Query Language

Question

I want to get live currency rates from an external source, so I found this great webservice:

Currency Convertor

This service is working like a charm, the only downside is that it does not provide JSONP results, only XML. Therefore we have a cross browser problem while trying to consume this webservice using jQuery $.ajax().

So I found Yahoo Query Language which returns results as JSONP and also mangae to consume other webservices and return me the results. This is also working, here is an example URL:

http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fwww.webservicex.net%2FCurrencyConvertor.asmx%2FConversionRate%3FFromCurrency%3DNOK%26ToCurrency%3DEUR'&format=json&diagnostics=true&callback=cbfunc

This URL return JSONP result and is working like a charm, but the problem appears when I use this in my code:

       $.ajax({
            type: "GET",
            url: urlToWebservice,
            contentType: "application/json; charset=utf-8",
            dataType: "jsonp",
            success: function(data) {
                $("#status").html("OK: " + data.text);
            },
            error: function(xhr, textStatus, errorThrown) {
                $("#status").html("Unavailable: " + textStatus);
            }
        });

When I try to run this code nothing happens, and I can see this error message in my Firebug javascript debugger:

cbfunc is not defined

cbfunc is the name of the container which surrounds the JSON response, but why does it say not defined?

EDIT:

This is my new code, but I still get the cbfunc is not defined

        $.ajax({
            url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Fwww.webservicex.net%2FCurrencyConvertor.asmx%2FConversionRate%3FFromCurrency%3DNOK%26ToCurrency%3DEUR'&format=json&callback=cbfunc",
            dataType: 'jsonp',
            jsonp: 'callback',
            jsonpCallback: 'cbfunc'
        });
        function cbfunc(data) {
            alert("OK");
        }

And the "OK" message is never fired...

Answer 1

You should let jQuery handle the callback by changing urlToWebservice to end in callback=?

Answer 2

If available, use the jsonpCallback parameter in the call to $.ajax like:

 jsonpCallback: "cbfunc",

---

Its description, from the jQuery API docs reads:

Specify the callback function name for a jsonp request. This value will be used instead of the random name automatically generated by jQuery.

The docs later go on to say:

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.

However it is not advised to make use of this "preferable" behaviour when making use of YQL. Precisely why that approach is not ideal might make this answer far too verbose, so here is a link (from the YQL blog) detailing the problems with jQuery's preferred approach, making use of jsonpCallback and so on: Avoiding rate limits and getting banned in YQL and Pipes: Caching is your friend

Answer 3

The reason it's not working is because by specifying callback=cbfunc in the querystring generates a URL of the type:

http://query.yahooapis.com/...&callback=cbfunc&callback=jsonp1277417828303

Stripped out all uninteresting parts, but the URL contains two callback parameters. One of them is managed by jQuery, and the other one not. YQL only looks at the first callback parameter and returns a response wrapped around that.

cbfunc({"query":{...}});

However, there is no function named cbfunc in your script, so that's why you are getting the undefined error. jQuery created an implicit function named jsonp1277417828303 in the above example, and the response from YQL should instead have been:

jsonp1277417828303({"query":{...}});

for jQuery to act upon it, and return the response to your success callback which it never got to do.

So, as @SLaks suggested, remove the &callback=cbfuncfrom your URL, or replace it with &callback=? to let jQuery handle things.

See a working example.

Answer 4

You definitely should give jQuery-JSONP a try: http://code.google.com/p/jquery-jsonp/

Simplifies everything :)