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

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: Doesn't work with Google Chrome

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.