JSONP和AJAX

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

不同点：

AJAX属于同源策略

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

区分同源和非同源

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

1.协议

2.域名或者IP

3.端口号

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

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

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

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

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

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

     我们需要请求数据的地址是: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>

得到的结果图如下所示：

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

     我们需要请求的地址是：?clear=1

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

<script type="text/javascript"> function fn(data) { console.log(data); } </script> <script type="text/javascript" src="?clear=1&callback=fn"></script>原本请求的地址里面包含这些数据

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