js跨域以及解決跨域

前言：這裡說的js跨域是指通過js在不同的域之間進行資料傳輸或通信，比如用ajax向一個不同的域請求資料，或者通過js擷取頁面中不同域的架構中(iframe)的資料。隻要協定、域名、端口有任何一個不同，都被當作是不同的域。

正常操作擷取不同的域的資料：

var get1 = function() {
     $.ajax({
         url: 'http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=深圳',
         type: 'get',
         success: function(dat) {
             console.log(dat);
         }
     })
 }

 get1(); //失敗 出現跨域提示
           

跨域解決方法：

一：jsonp

var get2 = function() {
    $.ajax({
        url: 'http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=深圳',
        type: 'get',
        dataType: "jsonp", //資料類型為jsonp
        success: function(dat) {
            console.log(dat);
        }
    })
}
get2();//成功
           

二：getJSON()方法

var get3 = function() {
   $.getJSON("http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=深圳&callback=?",
        function(dat) {
            console.log(dat)
        });
}

get3();//成功   列印同上圖
           

三：動态添加script标簽進行跨域

var get4 = function() {
    var weaSc = document.createElement("script"); //建立名為weaSc的節點
    weaSc.type = "text/javascript";
    weaSc.src = "http://api.jisuapi.com/weather/query?appkey=21f4782df8c57e19&city=深圳&callback=weaFun";

    document.head.appendChild(weaSc);
}

function weaFun(dat) {
    console.log(dat);
}
get4();// 成功   列印同上圖