1

I am using the following API call in jQuery to retrieve data. I've appended ?callback=? at the end which seems to get around the cross origin domain issue, if I don't include that I get the cross domain error.

In chrome it says, "Resource interpreted as script but transferred with MIME type text/html."

The response returned is Content-Type: text/html; charset=UTF-8.

I can see the response by looking at it in Chrome ConsoleResources. But how can I manipulate the response in JavaScript?

$.getJSON("http://api.visistat.com/stats-api-v2.php?key=skx79q0pyu01.&qt=idd&d=json&sdate=2012-08-26&edate=2012-08-28?callback=?", function(json) {
    console.log(json);
});

I do not have access to change the API.

Update: Trying to work around using YQL e.g. http://jsfiddle.net/4VEHR/5/

Looks like this plugin may also be useful: https://github.com/padolsey/jQuery-Plugins/tree/master/cross-domain-ajax/

5
  • That API link doesn't work for me. I think it has some kind of cookie it checks to verify you're allowed to see it. But try using YQL as a proxy - it can read JSON and return JSONP or CORS. Aug 28, 2012 at 12:17
  • Sorry yeah a direct link to that page doesn't work, to see it go to the website, then click "live demo" then "statcaster API". Thanks for the YQL suggestion I think I am making some progress here goo.gl/6k5Tg Aug 28, 2012 at 13:12
  • I'm having no luck at all finding any documentation for their API. What values besides JSON can the d parameter take? I tried XML or just leaving it out but got various errors. One quirk with YQL is that though it can input and output JSON, internally everything is XML and the converting between formats can make them a little "weird". Perhaps you can use the d parameter to get a more straightforward data format through YQL. Aug 28, 2012 at 19:44
  • Aha I found the docs. Notice you can choose other output formats, all flat text files using various delimiters, comma is the most common as in CSV format: select * from csv where url="http://api.visistat.com/stats-api-v2.php?key=skx79q0pyu01.&qt=idd&d=comma&sdate=2012-08-26&edate=2012-08-28" - notice that one field has a strange value <?=$e?> in some formats and empty string in another format. This might be a bug or some quirk you'll need to work around? Aug 28, 2012 at 20:06
  • 1
    Thanks pulling the data in CSV format helped me get it in a much nicer format to work with. Yeah looks like the data is a bit weird sometimes. Aug 29, 2012 at 8:23

3 Answers 3

1

Unless you have control over api.visistat.com and can modify the stats-api-v2.php script, there is nothing you can do besides contacting the service and asking them to fix the headers they send with the response (it needs Content-Type: text/json, while the PHP default is text/html). On the browser side, the warning you get occurs before Javascript has had any chance to work with the data — jQuery instantiates a <script> element with your API URL as its source, and the browser notices the content type mismatch immediately when the response is received, before passing it back to jQuery.

This warning is harmless, though. The real problem is that the service you're using does not support JSONP — you provide the callback parameter as specified in the jQuery documentation to force JSONP result expectation, but the service does not actually produce valid JSONP (it still produces plain JSON). I've tried changing d=json to d=jsonp in your API request, but apparently it is not supported by the service. You will need to figure out a way to get JSONP result from the service, or implement a server-side proxy on your domain, to the avoid cross-domain issues.

8
  • This makes sense, although I can't understand why it would not be possible to work with a text/html response through some work around given the browser is receiving the data. If I implement something server side won't I still have the same issue trying to manipulate the returned text/html data with javascript? I guess the idea is parse it first to be jsonp like. The link to the api page is visistat.com/tracking/api-manager.php Aug 28, 2012 at 11:07
  • server side proxy is the only option if you can't have access to change the api. In that case you can send whatever you want as response headers...
    – VDP
    Aug 28, 2012 at 11:14
  • Thanks I will give it a try using node. Aug 28, 2012 at 11:38
  • You're getting a valid JSON response, though with a wrong Content-Type: text/html header. The wrong header is not the problem here — the problem is that you're getting a JSON response, which would only work with same-origin content. You're making a cross-domain request, so you need JSONP instead of JSON, which the service you're using apparently does not support. Even if you somehow work around the wrong Content-Type you're receiving, this will not change the situation at all, because you would still be receiving JSON data instead of JSONP.
    – lanzz
    Aug 28, 2012 at 12:47
  • Thanks for clarifying. I am making some progress using YQL. I believe this is now JSONP? and I just need to sort out the callback in my code? see here goo.gl/6k5Tg Aug 28, 2012 at 13:01
0

If you use that callback parameter you tell jquery to use jsonP

This means your response should be wrapped with:

callback( ...your data...);

JSONP means it creates a method callback (that can fetch the data). Than adds a scripttag with src attribute your url. the script gets loaded the callback method executed. You have the data.

If you can't access/change the api to fix this you can't use jsonP.

You speak of CORS. That's a different story... You just have to make sure it's sending the right headers.

http://enable-cors.org/

Basically make sure it sends Access-Control-Allow-Origin: your domain (or * to allow all)

If you can't do that your only option is a proxy. A proxy is a sort of middleware. You make a request to the script the script gets the data, and returns it to you. For example php proxy. You can make the same thing in asp, jsp, flash or even java applet.

4
  • Thanks for your answer, I think I will need to look further into using a proxy. I am getting data back in text/html form so thought there must be some way to manipulate that, but sounds like it's not possible. Aug 28, 2012 at 11:12
  • the text/html is least of your problems :) And you can modify them in your proxy anyway.
    – VDP
    Aug 28, 2012 at 11:24
  • Trying to work around this using YQL see here, I think this is now valid JSONP? goo.gl/6k5Tg Aug 28, 2012 at 13:10
  • yup that can work. you can set the diagnostics to false (won't need that) and you probably can make your output a little nicer (less json json json) if you adapt the query but this will already work.
    – VDP
    Aug 28, 2012 at 13:39
0

Use $.ajax like this

$.ajax({
    url:"http://api.visistat.com/stats-api-v2.php?key=skx79q0pyu01.&qt=idd&d=json&sdate=2012-08-26&edate=2012-08-28",
    dataType:'jsonp',
    crossDomain:true,
    success:function(data){alert(data);}
})​;​
3
  • 1
    Won't work because of cross-domain restrictions. Seems that there is no way to use that API using only Javascript.
    – Dmitry
    Aug 28, 2012 at 10:49
  • 1
    Still does not fix the problem. The server needs to send the right headers. (Access-Control-Allow-Origin) $.getJson is just a short for $.ajax with some configurations but does the same thing.
    – VDP
    Aug 28, 2012 at 11:03
  • here 's a fiddle of it not working (like I said. It can't work because of the missing header)
    – VDP
    Aug 28, 2012 at 11:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.