JSONP跨域技术
来源:互联网 发布:qq在线人数竞猜源码 编辑:程序博客网 时间:2024/06/05 15:46
JSONP和AJAX
相同点:都是客户端向服务器端发送请求文本:给服务器端传递数据,或者,从服务器端获取数据的方式
不同点:
AJAX属于同源策略
JSONP属于非同源策略(跨域请求) --- > 实现跨域请求的方法有很多种,只不过JSONP(利用script标签的跨域能力)是最常用的
其他几种跨域方式:
区分同源和非同源
用当前的页面的地址 && 数据请求的接口地址 之间的比较
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传递了一堆的数据,那些数据就是我们想要的
- 跨域技术JSONP
- JSONP跨域技术
- JSONP跨域技术
- 前端跨域技术----jsonp
- 一种跨域技术:JSONP
- 前端跨域技术之JSONP
- JSONP--实现跨域的ajax技术
- 跨域技术(JSONP与CROS)
- 项目技术总结一之JSONP实现跨域调度
- Ajax跨域请求——jsonp技术
- 技术点-Jsonp跨域请求-概念性总结
- 技术点-Jsonp跨域请求-技术性总结
- jsonp 跨域原理:深入浅出 jsonp
- jsonp 跨域访问
- JSONP跨域访问
- jsonp跨域访问
- jsonp跨域请求
- jsonp跨域劣势
- 工厂模式
- python实现计算字符串中的整数的总和
- sql语句的30中查询
- Scrapy project 运行时出现no module named win32api 错误
- 交叉熵与均方差
- JSONP跨域技术
- strtok函数详解
- 面向对象编程
- 51nod 1103 N的倍数
- app与后台的token、sessionId、RSA加密登录认证与安全解决方案
- Unicode 和 UTF-8 有何区别?
- VS 无法嵌入互操作类型“Microsoft.Office.Interop.xxx.ApplicationClass” 请改用适用的接口
- SVM推导
- 50. Pow(x, n)