你所理解的同源和跨域

Ajax:属于同源策略
JSONP:属于跨域策略(但是解决跨域的方案不止JSONP,还有更多的方案,JSONP只是最常用的一种)

同源

• 协议
• 域名
• 端口号
  完全一致才属于同源,否则就是跨域

JSONP原理

• 在script的世界中,没有同源跨域这一说,只要你给我SRC属性中的地址是一个合法地址,SCRIPT都可以把对应的内容请求回来;

JSONP就是利用了SCRIPT这个原理

• 1)我们首先把需求请求的数据,跨域的API数据接口地址,赋值给script的SRC中;
• 2)把当前页面的某一个函数名当做参数值,传递给服务器(url问号传参的方式);
• 3)服务器接收到请求之后,需要进行特殊的处理,把你传递进来的函数名和它需要给你的数据拼接成一个字符串

例如:我们传递进去的函数是fn,服务器准备好的数据是fn([{“name”:“godfery”}]) ->‘我传递的函数名(需要给我们的数据)’

• 4)最后服务器把准备的数据通过HTTP协议返回给我们客户端,客户端发现其实就是让我们的fn执行,而且还给fn传递了一堆数据,那些数据就是我们想要的.

代码示例

<script type="text/javascript" charset="utf-8" >

    function fn(data){
        console.log(data)
     }

</script>

// jsonp方式 callback后面的fn就是我传递给服务器的函数,名字可以自己任意取
<script type="text/javscript" charset="utf-8" src="http://matchweb.sports.qq.com/kbs/calendar?columnId=100000&callback=fn"></script>