0

Problem

I'm working with a open data, city API for river levels, but when I make my ajax call using jsonp I receive an error for Uncaught SyntaxError: Unexpected token < which doesn't appear to be coming from my scripts.js

It is also my understanding that my ajax call might not be working because this API only spits out XML or json. I've tried to switch my dataType: json, but when I do that I receive the error below. Not particular sure if using jQuery's .getJSON is the best method to grab this data?

Data: http://opengov.brandon.ca/OpenDataService/opendata.html

Documentation: http://opengov.brandon.ca/api.aspx

Error (when switching dataType: json)

XMLHttpRequest cannot load http://opengov.brandon.ca/opendataservice/Default.aspx?date=riverlevel&columns=date&dataset=riverlevel. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

scripts.js

$(function(){
    $.ajax({
        url: 'http://opengov.brandon.ca/opendataservice/Default.aspx?date=riverlevel&columns=date&dataset=riverlevel',
        type: 'GET',
        dataType: 'jsonp',
        success: function(response){
            console.log(response)
        }
    });
});
Andrew Nguyen
  • 1,416
  • 4
  • 21
  • 43
  • 1
    Does the API support JSONP? It seems like the server is responsing to your JSONP ` – apsillers May 12 '15 at 19:08
  • That url returns XML, so obviously you can't use JSONP. – Marc B May 12 '15 at 19:08
  • The API returns XML, not JSON. – Tomalak May 12 '15 at 19:08
  • According to their documentation, "The default data format is XML, but can be changed by setting the format query variable to "json" to return JSON formatted data." – Andrew Nguyen May 12 '15 at 19:10

2 Answers2

3

You may be interested in reading What are the differences between JSON and JSONP?

A "JSONP response" from a server is actually an executable script. The client runs the executable script, and the script happens to contain the data you want, supplied as an argument to a function. If the server doesn't serve an executable script, that server does not support JSONP.

For your next error, see "No 'Access-Control-Allow-Origin' header is present on the requested resource". Ajax requests to other domains are not permitted, unless explicitly allowed by CORS headers (like the Access-Control-Allow-Origin response header) from the server. Due to the same-origin policy, scripts on one origin are not allowed to access the contents of another origin. Cross-Origin Resource Sharing (CORS) is a way for the server to relax the same-origin policy.

I would suggest contacting the providers of the API and requesting CORS support. In this case, it really is as simple as serving an Access-Control-Allow-Origin: * header in the response. Per the W3C's own security recommendations for CORS:

A resource that is publicly accessible, with no access control checks, can always safely return an Access-Control-Allow-Origin header whose value is "*".

Alternatively, you can set up a reverse proxy server that fetches the API resources for you and serves them on your own origin, as noted in an answer on Ways to circumvent the same-origin policy. Since the same-origin policy is a browser restriction, you can have any server you control fetch the API resource and then serve the response to your browser.

Community
  • 1
  • 1
apsillers
  • 112,806
  • 17
  • 235
  • 239
  • How would I do the last thing you suggested to "set up a proxy server that fetches the API resources for you and serves them on your own origin." – Andrew Nguyen May 12 '15 at 19:21
  • 1
    @AndrewNguyen I added a little more about this, and linked to a simple `mod_proxy` Apache implementation, but the actual implementation will depend on what server-side technology you are using. At an abstract level, the browser needs to make a request to your *own server* (not to `opengov.brandon.ca`), and then that server performs a fetch of the `opengov.brandon.ca` resource, and finally it serves the contents of that fetch as the response to the browser's request. – apsillers May 12 '15 at 19:29
2

The default data format is XML, but can be changed by setting the format query variable to "json" to return JSON formatted data.

You need to add &format=json to the end of the URL:

http://opengov.brandon.ca/opendataservice/Default.aspx?date=riverlevel&columns=date&dataset=riverlevel&format=json
Cory
  • 325
  • 1
  • 5
  • So changing the URL in my AJAX call to add `&format=json`, does get rid of the first "Uncaught syntax error: unexpected token" but no object actually appears in the console. – Andrew Nguyen May 12 '15 at 19:14
  • Try removing `dataType: 'jsonp',`? – Cory May 12 '15 at 19:15
  • Removing **dataType: 'jsonp** gives this error: `XMLHttpRequest cannot load http://opengov.brandon.ca/opendataservice/Default.aspx?date=riverlevel&columns=date&dataset=riverlevel&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` – Andrew Nguyen May 12 '15 at 19:16
  • 2
    It seems that the author of the API hasn't properly set up their service to allow other websites to request data. They would need to add the `Access-Control-Allow-Origin: *` header to allow CORS like @apsillers mentioned. – Cory May 12 '15 at 19:30