使用jQuery的ajax（）

Question

以下是我要实现的目标：我希望我的网站向API发送请求，该API检索带有随机引用的JSON，然后将其转换为HTML并显示在网站上。 ATM我已经设法通过三种不同的方式解决它的优点和缺点：

1。使用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：适用于所有浏览器。
Con： AFAIK JSONP存在一些安全问题。

2。使用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：这是正确的方法 Con：仅适用于Safari

3。使用跨源代理

$(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：适用于所有浏览器
Con：非常慢，每次按下按钮都需要2-3秒才能完成请求。

所以情况就是这样，我希望你帮助我，因为我不知道哪一个是正确的方法，或者是否有更好的方法使它在所有浏览器中都能正常工作，但不会牺牲速度或安全性。