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)
        }
    });
});
Improve this question
4
  • 1
    Does the API support JSONP? It seems like the server is responsing to your JSONP <script> request by serving the data (apparently XML, with a leading <) instead of serving you a script. If the server doesn't serve you a script, you can't use JSONP, since JSONP works by loading a script response into a <script> element. Commented May 12, 2015 at 19:08
  • That url returns XML, so obviously you can't use JSONP. Commented May 12, 2015 at 19:08
  • The API returns XML, not JSON. Commented May 12, 2015 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." Commented May 12, 2015 at 19:10

2 Answers 2

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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."
@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.
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
Improve this answer

4 Comments

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.
Try removing dataType: 'jsonp',?
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.
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.

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.