深入浅出jsonp(跨域访问机制)

前端之家收集整理的这篇文章主要介绍了深入浅出jsonp(跨域访问机制)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

# Jsonp初始

1.浏览器有安全同源策略(同协议,同域名,同端口),但是ajax请求的资源必须同源,故xhr对象实现不了跨域请求;

2.jsonp是利用html中<script>标签的src属性并不被同源策略所限制,可以获取任何服务器上的js脚本运行;

以下代码是jsonp的一个原形:

本地index.html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jsonp</title>
  5. <script type="text/javascript">
  6. function hundler(date){
  7. console.log(date.msg);
  8. }
  9. </script>
  10. </head>
  11. <body>
  12. <!-- user jsonp to achieve cross origin -->
  13. <!-- the file test.js in server wozien.com-->
  14. <script type="text/javascript" src="http://wozien.com/js/test.js"></script>
  15. <!--
  16. 在服务器中返回要运行的js代码
  17. -->
  18. </body>
  19. </html>

服务器上test.js

  1. var obj = {
  2. msg: 'jsonp to cross origin'
  3. };
  4.  
  5. hundler(obj);
运行index.html,在本地的console输出jsonp to cross origin,证明跨域请求*.js文件成功; <安利:wozien.com是我远程服务器,里面的js文件可以作为测试跨域请求的童鞋测试>。

# Jsonp服务的实现

1.jsonp的实质是加载不同服务器上的js代码放到本地浏览器运行,但是我们要加载的不是*.js文件怎么办?

可以在src传递一个本地的回掉函数名即可,告知服务器是本地哪个函数去执行response的东西,所以服务器返回的js代码可以写成:接受到的回掉函数名+'( '+请求的数据+' ) '

本地index.HTML代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jsonp</title>
  5. <script type="text/javascript">
  6. // request src
  7. function addScriptTag(src){
  8. var script = document.createElement('script');
  9. script.setAttribute('type','text/javascript');
  10. script.src = src;
  11. document.body.appendChild(script);
  12. }
  13.  
  14. // function callback
  15. function hundler(date){
  16. console.log(date);
  17. }
  18.  
  19. window.onload = function(){
  20. addScriptTag('http://wozien.com/PHP/jsonp.PHP?callback=hundler');
  21. }
  22. </script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>
服务器上jsonp.PHP代码
  1. <?PHP
  2. $callback = $_GET['callback'];
  3. echo $callback.'(\'hello jsonp\')';
  4. ?>
运行后在控制台输出hello jsonp。所以以上就是整个jsonp服务的大概流程,想要请求更加复杂的数据,可以得服务器中把数据封装在json中来交换即可。


抛出问题: jsonp能请求媒体资源吗,像images类似的。求大神回复下。


相关博客链接

猜你在找的Json相关文章