Ajax call using jsonp not working, “Uncaught SyntaxError: Unexpected token”

Question

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)
        }
    });
});

Answer 1

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.

Answer 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