JQuery + JSONP + Yahoo Query Language

Question

I want to get direct exchange rates from an external source, so I found this excellent web service:

Currency Converter

This service works like a charm, the only minute is that it does not provide JSONP results, but only XML. Therefore, when trying to use this web service using jQuery $ .ajax (), we encounter a cross browser problem.

So, I found Yahoo Query Language , which returns the results as JSONP, as well as mangae, to consume other web services and return me the results. This also works, 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 returns a JSONP result and works like a charm, but the problem occurs 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 javacript debugger:

 cbfunc is not defined 

cbfunc is the name of the container that surrounds the JSON response, but why is it not specified?

EDIT:

This is my new code, but I still get 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 never starts ...

Answer 1

If available, use the jsonpCallback parameter in the $.ajax call, for example:

  jsonpCallback: "cbfunc", 

---

The description, from the jQuery API docs, reads:

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

The following documents say:

It is preferable that jQuery generate a unique name, as it would simplify query management and provide callbacks and error handling. You can specify a callback if you want to enable better browser caching of GET requests.

However, it is not recommended to use this “preferred” behavior when using YQL. This is why this approach is not ideal, so this answer may be too verbose, so here is a link (from the YQL blog) that details problems with the preferred jQuery approach using jsonpCallback , etc.: Avoid speed limits and prohibition in YQL and Pipes: Caching is Your Friend

Answer 2

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

Answer 3

The reason it doesn't work is because by specifying callback=cbfunc in querystring, a URL like this is created:

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

Removed all uninteresting parts, but the URL contains two callback parameters. One of them is controlled by jQuery, and the other is not. YQL considers only the first callback parameter and returns a response wrapped around it.

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

However, the script does not have a function named cbfunc , so you get an undefined error. In the above example, jQuery created an implicit function called jsonp1277417828303 , and the response from YQL should have been:

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

for jQuery to work on it and return an answer to your success callback, which it never did.

So, as @SLaks suggested, remove &callback=cbfunc from your url or replace it with &callback=? so jQuery handles things.

See a working working example .

Answer 4

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

Simplifies everything :)