Correct way to retrieve JSON from API using jQuery's ajax()

Question

Here's what I'm trying to achieve: I want my site to send a request to an API that retrieves a JSON with a random quote which then gets converted to HTML and appears on the site. ATM I've managed to solve it by three different ways with their Pros and Cons:

1. Using JSONP

$(document).ready(function() {

  newQuote();  
  
  function newQuote() {
    $.ajax({
      dataType: "jsonp",
      crossDomain: true,
      contentType: "application/json; charset=utf-8;",
      jsonpCallback: "parseQuote",
      url: "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=parseQuote"
    })

    .done(function(json) {
        $("<h3>").text(json.quoteText).appendTo(".quote");
        $("<div class=\"content\">").html(json.quoteAuthor).appendTo(".quote");
    })

    .fail(function(xhr, status, errorThrown) {
      alert("Sorry, there was a problem!");
      console.log("Error: " + errorThrown);
    })
  };

  $("#newquote").on("click", function() {
    $(".quote").empty();
    newQuote();
  });
});

Pro: Works in all Browsers.
Con: AFAIK JSONP has some security Issues.

2. Using CORS

$(document).ready(function() {

  newQuote();

  function newQuote() {
    $.ajax({
      dataType: "json",
      crossDomain: true,
      contentType: "application/json; charset=utf-8;",
      url: "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json"
    })

    .done(function(json) {
        $("<h3>").text(json.quoteText).appendTo(".quote");
        $("<div class=\"content\">").html(json.quoteAuthor).appendTo(".quote");
    })

    .fail(function(xhr, status, errorThrown) {
      alert("Sorry, there was a problem!");
      console.log("Error: " + errorThrown);
    })
  }

  $("#newquote").on("click", function() {
    $(".quote").empty();
    newQuote();
  });
});

Pro: Is the correct way to do it
Con: Only works on Safari

3. Using Cross-Origin Proxy

$(document).ready(function() {

  newQuote();

  function newQuote() {
    $.ajax({
      dataType: "json",
      crossDomain: true,
      contentType: "application/json; charset=utf-8;",
      url: "https://crossorigin.me/http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json"
    })

    .done(function(json) {
        $("<h3>").text(json.quoteText).appendTo(".quote");
        $("<div class=\"content\">").html(json.quoteAuthor).appendTo(".quote");
    })

    .fail(function(xhr, status, errorThrown) {
      alert("Sorry, there was a problem!");
      console.log("Error: " + errorThrown);
    })
  }

  $("#newquote").on("click", function() {
    $(".quote").empty();
    newQuote();
  });
});

Pro: Works with all browsers
Con: Is really slow, takes like 2-3 seconds to do the request each time I press the button.

So that's the situation, I want you to help me 'cause I don't know which one is the correct way or if there's a better way to make it work in all browsers but without sacrificing speed or security.

FYI...no need for `contentType` on a GET request ... you aren't sending any content. What happens in chrome with CORS? — charlietfl, Jun 21 '16 at 03:58
Did you see this post http://stackoverflow.com/questions/613962/is-jsonp-safe-to-use? — Danny Fardy Jhonston Bermúdez, Jun 21 '16 at 04:15
*"Doesn't work with Google Chrome"* I think you misunderstand what CORS is. CORS as well as JSONP has to be supported by the *server*. — Felix Kling, Jun 21 '16 at 04:44
@charlietfl tks for the advice! CORS in Chorme returns `XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.` @FelixKling Indeed, I was lost about CORS, I thought it was some kind of standard that works on every server. — miguelopezv, Jun 21 '16 at 05:04
So *"Doesn't work with Google Chrome"* isn't specific to chrome only... shouldn't work in any browser — charlietfl, Jun 21 '16 at 05:07
@charlietfl indeed, it shouldn't, but somehow it works in Safari 100% sure, I've just tested it. I've just edited that part — miguelopezv, Jun 21 '16 at 05:08

Correct way to retrieve JSON from API using jQuery's ajax()

1. Using JSONP

2. Using CORS

3. Using Cross-Origin Proxy

0 Answers0