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();// 成功   打印同上图