ajax跨域的幾種方式

url:http://localhost/CORS/ajax/index.html

文件目錄：

一，首先，ajax使用：

// 創建對象
var ajax = new XMLHttpRequest();

// 建立連接
ajax.open("GET", "http://192.168.1.3/CORS/ajax/test.json", true);

// 發送請求
ajax.send();

// 接收數據
ajax.onreadystatechange = function() {
  if (ajax.readyState === 4 && ajax.status === 200) {
    var data = JSON.parse(ajax.responseText);
    console.log(data);
  }
};

XMLHttpRequest對象可以實現跨域，但是瀏覽器不允許，這是個僞命題

1，服務器代理：簡單粗暴，向後端發送一個url，然後又後端代理獲取其他域名下的內容，然後再把獲取的內容返回到前端，這種屬於後端跨域，不屬於前端
2，jsonp跨域
json：一種輕量級的數據交換格式
jsonp：是json的一種使用模式，用jsonp抓取的資料並不是json，而是任意javascript

二，js使用jsonp：

<button onclick="jsClick()">js發送請求</button>
    
    function createScript() {
        var eleScript = document.createElement("script");
        eleScript.type = "text/javascript";
        eleScript.src = "http://192.168.1.3/CORS/ajax/test.php?callback=test";
        document.getElementsByTagName("head")[0].appendChild(eleScript);
      }

      // 傳入的回調
      function test(name) {
        console.log("跨域:" + name);
      }

      function jsClick() {
        // 問題，創建之後沒有刪除
        createScript();
      }

jsonp原理：創建script標籤，src指向後端地址，在後端調用前端傳過去的方法，不過這個簡單寫法有個問題：script標籤沒有刪除，需要手動刪除

有點尷尬

三，jquery方法：

<button onclick="jqueryClick()">jquery發送請求</button>
    
    function jqueryClick() {
        $.ajax({
          type: "get",
          url: "http://192.168.1.3/CORS/ajax/test.php?callback=test",
          dataType: "jsonp",
          jsonp: "callback",   // 傳回調的方式有幾種
          success: function(data) {
            alert("jquery:" + data);
          }
        });
      }

前端 -- 瀏覽器創建臨時函數 -- 後端 -- 調用臨時方法 -- 使用success中的回調方法 -- 銷燬臨時函數

script標籤也會被銷燬

其他跨域方式：https://juejin.im/post/5c23993de51d457b8c1f4ee1#heading-12