JSONP跨域技术

JSONP和AJAX

相同点：都是客户端向服务器端发送请求文本：给服务器端传递数据，或者，从服务器端获取数据的方式

不同点：

AJAX属于同源策略

JSONP属于非同源策略（跨域请求）  --- >   实现跨域请求的方法有很多种，只不过JSONP（利用script标签的跨域能力）是最常用的

其他几种跨域方式：

websocket（html5的新特性，是一种新协议）跨域

设置代理服务器（由服务器替我们向不同源的服务器请求数据）

CORS（跨源资源共享，cross origin resource sharing）

iframe跨域

postMessage(包含iframe的页面向iframe传递消息)

区分同源和非同源

用当前的页面的地址 && 数据请求的接口地址 之间的比较

1.协议

2.域名或者IP

3.端口号

以上三部分完全相同属于同源策略，我们使用AJAX技术回去数据

只要有一个不一样，就属于非同源策略，我们一般使用JSONP获取数据

-->当前也页面的URL地址（在WebStorm预览页面的时候会默认的创建一个本地虚拟的服务，端口号是63342）

http://localhost:63342/www/exp/09JSONP跨域请求/index.html

-->我们需要在index.html中做一件事情

     [把本地在同一个服务下的data.txt中的内容获取到]

     我们需要请求数据的地址是http://localhost:63342/www/exp/09JSONP跨域请求/data.txt

由于两个地址的协议，域名，端口号都相同，属于同源策略，则使用AJAX请求数据

<script type="text/javascript">  
    var xhr = new XMLHttpRequest;  
    xhr.open("get", "data.txt", true);  
    xhr.onreadystatechange = function () {  
        if (xhr.readyState === 4 && xhr.status == 200) {  
             console.log(xhr.responseText);  
        }  
    };  
    xhr.send(null);  
</script>

得到的结果图如下所示：

-->我们需要获取的是腾讯体育项目中的数据

     我们需要请求的地址是：http://video.qq.com/fcgi-bin/logout?clear=1

由于两个地址的域名，端口号不相同，只要有一处不相同，属于非同源策略，则使用JSONP请求数据

<script type="text/javascript">
    function fn(data) {
        console.log(data);
    }
</script>
<script type="text/javascript" src="http://video.qq.com/fcgi-bin/logout?clear=1&callback=fn"></script>

原本请求的地址里面包含这些数据

请求成功后返回数据用console.log显示得到的结果是

JSONP的原理：

（JSONP请求一定需要对方的服务器做支持才可以）

--> 在script标签的世界中，没有同源跨域这一说，只要给script标签的SRC属性中的地址是一个合法的地址，script标签都可以把对应的内容请求回来

-->JSONP就是利用了script的这个原理

①我们首先把需要请求数据的，那个跨域的API数据接口的地址，赋值给script的SRC

②把当前页面中的某一个函数名当做参数值，传递给腾讯（需要跨域请求的）服务器，URL问号传参

③腾讯（需要跨域请求的）服务器接收到你的请求后，需要进行特殊的处理，把你传递进来的函数名和她需要给你的数据拼接成一个字符串  例如：我们传递进去的函数名是fn，它准备好的数据是[{"name" : "qianduan"}]  -->   拼接后的结果就是'fn([{"name" : "qianduan"}])'

格式为：'我传递的函数名（需要给我们的数据）'

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