深入浅出jsonp(跨域访问机制)
2016-08-23 15:19
225 查看
# Jsonp初始
1.浏览器有安全同源策略(同协议,同域名,同端口),但是ajax请求的资源必须同源,故xhr对象实现不了跨域请求;
2.jsonp是利用html中<script>标签的src属性并不被同源策略所限制,可以获取任何服务器上的js脚本运行;
以下代码是jsonp的一个原形:
本地index.html:
服务器上test.js
# Jsonp服务的实现
1.jsonp的实质是加载不同服务器上的js代码放到本地浏览器运行,但是我们要加载的不是*.js文件怎么办?
可以在src传递一个本地的回掉函数名即可,告知服务器是本地哪个函数去执行response的东西,所以服务器返回的js代码可以写成:接受到的回掉函数名+'( '+请求的数据+' ) '
本地index.html代码:
抛出问题: jsonp能请求媒体资源吗,像images类似的。求大神回复下。
相关博客链接
1.浏览器有安全同源策略(同协议,同域名,同端口),但是ajax请求的资源必须同源,故xhr对象实现不了跨域请求;
2.jsonp是利用html中<script>标签的src属性并不被同源策略所限制,可以获取任何服务器上的js脚本运行;
以下代码是jsonp的一个原形:
本地index.html:
<!DOCTYPE html> <html> <head> <title>jsonp</title> <script type="text/javascript"> function hundler(date){ console.log(date.msg); } </script> </head> <body> <!-- user jsonp to achieve cross origin --> <!-- the file test.js in server wozien.com--> <script type="text/javascript" src="http://wozien.com/js/test.js"></script> <!-- 在服务器中返回要运行的js代码 --> </body> </html>
服务器上test.js
var obj = { msg: 'jsonp to cross origin' }; hundler(obj);运行index.html,在本地的console输出 jsonp to cross origin,证明跨域请求*.js文件成功;<安利:wozien.com是我远程服务器,里面的js文件可以作为测试跨域请求的童鞋测试>。
# Jsonp服务的实现
1.jsonp的实质是加载不同服务器上的js代码放到本地浏览器运行,但是我们要加载的不是*.js文件怎么办?
可以在src传递一个本地的回掉函数名即可,告知服务器是本地哪个函数去执行response的东西,所以服务器返回的js代码可以写成:接受到的回掉函数名+'( '+请求的数据+' ) '
本地index.html代码:
<!DOCTYPE html> <html> <head> <title>jsonp</title> <script type="text/javascript"> // request src function addScriptTag(src){ var script = document.createElement('script'); script.setAttribute('type','text/javascript'); script.src = src; document.body.appendChild(script); } // function callback function hundler(date){ console.log(date); } window.onload = function(){ addScriptTag('http://wozien.com/php/jsonp.php?callback=hundler'); } </script> </head> <body> </body> </html>服务器上jsonp.php代码:
<?php $callback = $_GET['callback']; echo $callback.'(\'hello jsonp\')'; ?>运行后在控制台输出hello jsonp。所以以上就是整个jsonp服务的大概流程,想要请求更加复杂的数据,可以得服务器中把数据封装在json中来交换即可。
抛出问题: jsonp能请求媒体资源吗,像images类似的。求大神回复下。
相关博客链接
相关文章推荐
- Ajax通过jsonp实现跨域访问,访问成功但走error不走success的的问题解决
- jsonp跨域访问实现方法
- php jquery jsonp 跨域访问,jsoncallback无返回?!!!,无解了,为什么没返回,没返回!原来是是这个jsoncallback的问题
- 用jQuery与JSONP轻松解决跨域访问的问题
- 关于jsonp实现跨域访问,以及存在的安全问题
- 在vue中使用jsonp跨域访问数据
- jsonp跨域访问详解
- [Web]jsonp跨域访问小结
- jsonp跨域访问
- JQuery+ajax+jsonp 跨域访问
- 跨域访问 jsonp
- 用jQuery与JSONP轻松解决跨域访问的问题
- jsonp实现跨域访问
- 使用jsonp进行跨域访问
- 使用Jsonp解决跨域数据访问问题
- 跨域访问 之JSONP
- 跨域访问:jquery ajax jsonp的实现方法(jsp和action方式)
- jsonp 跨域访问的一些常见问题
- 【AngularJs】---JSONP跨域访问数据传输
- 用JSONP实现的跨域访问的解决方案