Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery + JSONP + Yahoo Query Language

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

like image 981
Martin at Mennt Avatar asked Dec 29 '22 12:12

Martin at Mennt


2 Answers

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

like image 127
salathe Avatar answered Dec 31 '22 03:12

salathe


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

like image 43
SLaks Avatar answered Dec 31 '22 02:12

SLaks