Ajax Yelp API Call from Javascript

Question

I'm trying to make a call to the Yelp API from JavaScript, but getting an error. Below is my code. I believe I will have to use Oauth, but I don't know where should I put it in the header.

function doAjax(){
    var xhr = new XMLHttpRequest();
    var url = "http://api.yelp.com/v2/searchterm=cream+puffs&location=chicago";
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
        var some = JSON.parse(xhr.responseText);
        }
    }
    xhr.open('GET', url, true);
    xhr.send();
}

Answer 1

The problem is that you are trying to access a resource that is on a different domain from your application. In this case your application resides on http://fiddle.jshell.net and the resource is at http://api.yelp.com .

CORS is one way to get around this, see here: http://en.wikipedia.org/wiki/Cross-origin_resource_sharing