jQuery.ajax() parsererror

Stack Stack picture Stack Stack · Jul 10, 2011 · Viewed 65.9k times · Source

when i try to get JSON from http://api-v3.deezer.com/1.0/search/album/?q=beethoven&index=2&nb_items=2&output=json with:

(jQuery 1.6.2)

$.ajax({
    type: "GET",
    url: url,
    dataType: "jsonp",
    success: function (result) {
        alert("SUCCESS!!!");
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.statusText);
        alert(xhr.responseText);
        alert(xhr.status);
        alert(thrownError);
    }
});

I get: parsererror; 200; undefined; jquery162******************** was not called

but with the JSON from http://search.twitter.com/search.json?q=beethoven&callback=?&count=5 works fine. Both are valid JSON formats. So what is this error about?

[UPDATE]

@3ngima, i have implemented this in asp.net, it works fine:

$.ajax({
    type: "POST",
    url: "WebService.asmx/GetTestData",
    data: "{}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (result) {
        alert(result.d);
    }
});

WebService.asmx:

[WebMethod]
public string GetTestData()
{
    try
    {
        var req = System.Net.HttpWebRequest.Create("http://api-v3.deezer.com/1.0/search/album/?q=beethoven&index=2&nb_items=2&output=json");
        using (var resp = req.GetResponse())
        using (var stream = resp.GetResponseStream())
        using (var reader = new System.IO.StreamReader(stream))
        return reader.ReadToEnd();
    }
    catch (Exception) { return null; }
}

Answer

T.J. Crowder picture T.J. Crowder · Jul 10, 2011

It's because you're telling jQuery that you're expecting JSON-P, not JSON, back. But the return is JSON. JSON-P is horribly mis-named, named in a way that causes no end of confusion. It's a convention for conveying data to a function via a script tag. In contrast, JSON is a data format.

Example of JSON:

{"foo": "bar"}

Example of JSON-P:

yourCallback({"foo": "bar"});

JSON-P works because JSON is a subset of JavaScript literal notation. JSON-P is nothing more than a promise that if you tell the service you're calling what function name to call back (usually by putting a callback parameter in the request), the response will be in the form of functionname(data), where data will be "JSON" (or more usually, a JavaScript literal, which may not be the quite the same thing). You're meant to use a JSON-P URL in a script tag's src (which jQuery does for you), to get around the Same Origin Policy which prevents ajax requests from requesting data from origins other than the document they originate in (unless the server supports CORS and your browser does as well).