jQuery ajax request using jsonp error

Question

I'm writing an app and I need to access some json data in the client side from another server. Because of the cross domain issue I plan on using jsonp. jQuery allows me to do this using the $.getJSON() method, however, I have no way to tell if the method has failed (i.e., the server is not responding or something). So I tried the approach to get the JSON data using $.ajax instead. But it's not working and I don't know what to try. Here an example showing my issue:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
 <head>
      <meta http-equiv="Content-type" content="text/html; charset=utf-8">
      <title>TEST</title>
      <script type="text/javascript" src="scripts/jquery-1.5.1.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function() {
        $('#button_detect').click(function(){
            var feedApiAjax = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=';
            var feedApiGetJSON = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=';
            var feedUrl = 'http://www.engadget.com/rss.xml';

            $.ajax({
                url: feedApiAjax + feedUrl,
                datatype: 'jsonp',
                success: function(data) {
                    console.log('$.ajax() success');
                },
                error: function(xhr, testStatus, error) {
                    console.log('$.ajax() error');
                }
            });

            $.getJSON(
                feedApiGetJSON + feedUrl,
                function(data) {
                    console.log('$.getJSON success');
                });
        });
    });
      </script>
 </head>
 <body>
      <div id="button_detect">CLICK ME!!!!</div>
 </body>

If you create a web page with this code and click on the "Click Me" div you'll see that the $.getJSON request is working and the $.Ajax one is not. I've tried putting/removing the "callback=?" tg, used "jsonp" and "json" data types, but non of this worked.

Any idea on what might I be doing wrong?

Cheers!

You should also probably double check to make sure that `feedUrl` doesn't need to be percent-encoded for the request. — Patrick Perini, Feb 09 '12 at 15:59

score 7 · Answer 1 · edited May 23 '17 at 12:08

7

When the dataType is jsonp, jquery won't fire the error function automatically. This is described in the documentation under the "error" option:

Note: This handler is not called for cross-domain script and JSONP requests. see here.

The workaround is to explicitly specify a timeout as an option. If the server doesn't respond in the specified amount of time then the error function will be called. More about this here.

edited May 23 '17 at 12:08

Community

1
1

answered Jun 13 '12 at 22:10

djp3

166
1
8

This doesn't seem to be the case anymore with jQuery 2.0? – andig Sep 26 '13 at 09:04

score 5 · Accepted Answer · edited Jul 12 '14 at 07:25

5

I encountered this error before, and solved after using jquery-JSONP

[Example]

$.getJSON('http://server-url/Handler.ashx/?Callback=DocumentReadStatus',
  {
      userID: vuserID,
      documentID: vdocumentID
  },
  function(result) {
      if (result.readStatus == '1') {
          alert("ACCEPTED");
      }
      else if (result.readStatus == '0') {
          alert("NOT ACCEPTED");
      }
      else {
          alert(result.readStatus);
      }
  });

edited Jul 12 '14 at 07:25

Musa Haidari

2,109
5
30
53

answered Mar 17 '11 at 20:18

Ahmed Atia

17,848
25
91
133

This could be a solution but using this I have no way to tell if the call failed (it only provides a callback if the call succeeds). Any idea on how to detect if the call failed? – brafales Mar 18 '11 at 08:17
1

@Brafales: one of jQuery JSONP feature is error recovery, check the following link http://code.google.com/p/jquery-jsonp/wiki/TipsAndTricks for "Simple usage" section. You can easily provide an error message if any error occurred. – Ahmed Atia Mar 18 '11 at 15:20

score 2 · Answer 3 · answered Feb 09 '12 at 15:54

for parsing external feeds, and catching possible errors, you can use this

 function GetContent(feedUrl)
    {
        var feedApiGetJSON = 'http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&callback=?&q=';
            $.ajax({
                url: feedApiGetJSON + feedUrl,
                dataType: 'jsonp',
                jsonpCallback: 'JsonpCallback'
            });
    }

    function JsonpCallback(data) {
        if (data.responseStatus == "200")
            alert(data.responseData.feed.title);
        else
            alert(data.responseDetails);

score 1 · Answer 4 · edited Jun 10 '12 at 20:04

1

Replace: datatype with dataType

edited Jun 10 '12 at 20:04

mkoryak

57,086
61
201
257

answered Jun 10 '12 at 11:46

Ela Giza

19
1

jQuery ajax request using jsonp error

4 Answers4

Linked