CODEWITHSUNDEEP
jqueryajaxjson
Kashif Khan
Kashif Khan

Reputation: 695

How to call ajax request with JSON response using jQuery?

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>

Upvotes: 6

Views: 76403

Answers (5)

Suganth G
Suganth G

Reputation: 5156

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

Upvotes: 0

Praveen
Praveen

Reputation: 56539

  1. You might missed to add type //GET or POST, which type of REST OPEATION
  2. dataType is mispelled
  3. 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.

Upvotes: 9

Maxim Manco
Maxim Manco

Reputation: 1944

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

Upvotes: 3

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

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.

Upvotes: 0

Gurminder Singh
Gurminder Singh

Reputation: 1755

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

Upvotes: -1

Related Questions