Ajax之跨域

跨域概念

同源策略是浏览器上为安全性考虑实施的非常重要的安全机制。Ajax默认是能获取同源的数据，对于非同源的数据Ajax默认是不能获取到的。什么叫同源呢，同源就是两个相互交互的地址的协议，端口，域名三者都一样；比如有一个页面，它的地址为http://www.ko.com/dir/page.html这个网址，在这个网址中要去获取服务器的数据，获取数据的地址如下：

#URL                                 结果                    原因
https://www.ko.com/dir/page.html              不同源                   协议不同，一个是http，一个是http
http://www.ko1.com/dir/page.html              不同源                    域名不同，一个是ko，一个是ko1
http://www.ko.com:82/dir/page.html          不同源                   端口不同，一个是80，一个是82
http://www.ko.com/dir1/page.html               同源

如果获取非同源数据，就会报以下异常：

Failed to load https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=%E8%B1%86: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

如果我们想要获取跨域的数据，我们该怎么办呢？
可以通过script的src方式,也可以使用ajax设置数据类型为jsonp

#方式一
<script type='text/javascript'>
  function cb(data){
    console.log(data);
}
</script>
<script type='text/javascript' src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=dd&callback=cb"></script>

#方式二
$.ajax({
        url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
        data:{wd:"豆"},
        success:function(data){
        console.log(data);
        },
        dataType:"jsonp",
        jsonp:"cb"
      })