JSONP

1.同源(同域)/非同源(跨域)

[同源]
当前页面的URL:http://localhost:1234/index.html
获取数据的URL:http://localhost:1234/getUserList.html
-->可以使用AJAX获取数据

[非同源]
当前页面的URL:http://localhost:1234/index.html
获取页面的URL:http://matchweb.sports.qq.com/kbs/hotMatchList
-->不可用AJAX请求

---

[如何看是同源还是非同源?]
从三个维度来看
[页面地址URL地址和获取数据的URL地址进行比较]
协议
域名
端口号
三个都相同就是同源,有一个不一样就是跨域,跨域是不可用使用AJAX的

---

[在真实项目中什么时候会用到跨域请求?]
1) 自己的网站上需要展示别人网站上的数据时,这样我们需要在自己的服务器上获取其他网站服务器的数据,例如:我们需要展示百度,腾讯,微博等第三方平台的数据,这就是[跨域]

2) 如果我们的项目比较大,访问的人也比较多,一般都会用很多服务器去管理,例如:我们的资源文件放在A服务器,数据放在B服务器上,A服务器想从B服务获取数据,也叫跨域(只要不是同一个服务的请求都叫做[跨域])

3) 二级域名sports.qq.com向一级域名www.qq.com获取数据也是跨域

---

[跨域请求的方式]
JSONP/iframe/postMessage/document.domain/crossDomin...
一般我们最常用的是JSONP

---

[什么是JSONP/JSONP的原理是啥?]
script标签是没有同源和非同源之分的,src中引入的JS文件是自己的服务器上的或别人服务器上的都可以(换句话说[script]跨域向其他服务器发送请求,并且其他服务器也可以接受到请求,把你需要的内容返回给客户端)其他的标签有:link Img audio video iframe

[JSONP原理]
利用script不存在跨域限制,我们把需要的请求数据的地址赋值[src属性],这就可以从别人的服务器上获取响应的数据,这样还不够,我们还需要在JS中吧浏览器获取出来的数据得到,来做后续的操作
[注意!JSONP是GET请求]

<script>
function ff(result){
    console.log(result);
}
</script>
<script src="http://matchweb.sports.qq.com/kbs/hotMatchList?callback=ff"></script>
腾讯服务器就会接受到请求,去查找参数callback的值,比如我们这里传的ff,然后进行解析赋值
'ff({"name":"aa","age":"12"})'
然后把字符串返回给客户端