How to call ajax request with JSON response using jQuery?

Question

I cannot print success from the below code with the line jQuery.support.cors = true;. Including the line jQuery.support.cors = true; will give a warning message. So how can I avoid that without losing the functionality? My main objective is to call a rest web service that returns JSON data and I have to utilize the JSON data. Please help me with how I can achieve this. Please provide a working sample

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.getJSON demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<script>
    jQuery.support.cors = true;
    $.ajax ({
        url: 'http://json-cricket.appspot.com/score.json',
        datatype: "json",
        success: function (e) {
            // Success callback
            alert("sucess");
        }})
</script>
 
</body>
</html>

I think the option is `dataType` and not all lowercase but not sure how much of a difference that makes, if jquery can handle it or not, can't remember. http://api.jquery.com/jQuery.ajax/ — martincarlin87, Sep 24 '13 at 11:51
"will give a warning message" Which message? Cross domain issue? — A. Wolff, Sep 24 '13 at 11:52
I assume this is a crossdomain ajax request? http://stackoverflow.com/questions/11736431/make-cross-domain-ajax-jsonp-request-with-jquery/11736771#11736771 Try jsonp — cernunnos, Sep 24 '13 at 11:52

score 9 · Accepted Answer · edited May 23 '17 at 11:53

You might missed to add type //GET or POST, which type of REST OPEATION
dataType is mispelled
Missed to add contentType

 $.ajax({
            type: "POST", //rest Type
            dataType: 'jsonp', //mispelled
            url: "http://json-cricket.appspot.com/score.json",
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function (msg) {
                console.log(msg);                
            }
 });

Updates: While trying to figure out the reason, I think this is the best answer to understand the problem.

Say you're on domain abc.com, and you want to make a request to domain xyz.com. To do so, you need to cross domain boundaries, a no-no in most of browserland.

The one item that bypasses this limitation is tags. When you use a script tag, the domain limitation is ignored, but under normal circumstances, you can't really DO anything with the results, the script just gets evaluated.

Enter JSONP. When you make your request to a server that is JSONP enabled, you pass a special parameter that tells the server a little bit about your page. That way, the server is able to nicely wrap up its response in a way that your page can handle.

score 3 · Answer 2 · answered Sep 24 '13 at 12:07

3

The best shot will be using a jsonp request. For this just specify dataType to be jsonp

$.ajax({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: 'jsonp',
    success: function (data) {
        console.log(data);        
    }
});

See example on jsFidle

answered Sep 24 '13 at 12:07

Maxim Manco

1,954
1
12
19

Voted up for fiddle :) – Shankar Narayana Damodaran Jan 28 '15 at 07:27

score 0 · Answer 3 · answered Sep 24 '13 at 12:00

CORS (Cross-Origin Resource Sharing) isn't the same as XSS.

$.support.cors contains the result of a test that tests whether or not the current browser supports cors. changing it doesn't make the browser support cors.

Also, your server has to support CORS by returning the proper headers.

score 0 · Answer 4 · answered Aug 05 '14 at 05:33

Try this , it gives best results. This was used in REST Architecture, the response speed is very high

function CallService(sucessData) {
    $.ajax({
        // Add code for Cross Domain
        headers: getHeaders(),
        type: varType, //GET or POST or PUT or DELETE verb
        url: varUrl, // Location of the service
        data: varData, //Data sent to server
        contentType: varContentType, // content type sent to server
        dataType: varDataType, //Expected data format from server
        processdata: varProcessData, //True or False
        crossDomain: true,
        timeout: 200000,
        success: sucessData,
        error: function (xhr) {// When Service call fails
            alert("Error: " + xhr.responseText);
        }
    });
}

score -1 · Answer 5 · answered Sep 24 '13 at 11:58

If you are requesting Cross-Domain service, then you need to include jQuery.support.cors = true;. And the correct AJAX code would be:

 $.ajax ({
    url: 'http://json-cricket.appspot.com/score.json',
    dataType: "json",
    contentType: "application/json",
    success: function (jsonData) {
        // Success callback
        alert("sucess");
    },
    error: function() {
        //any error to be handled
    }
 });

How to call ajax request with JSON response using jQuery?

5 Answers5

Linked