Ajax--同源策略,jsonp跨域传输
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax--同源策略,jsonp跨域传输相关的知识，希望对你有一定的参考价值。
什么是同源策略？
阮一峰的博客 同源策略
同源策略的解决方法： 跨域传输
img 标签的src是可以引入其他域名下的图片
script标签的src属性同理 ，也可以引入其他域名下的js文件，并执行
1.script的属性引入文件(页面地址)的时候是允许跨域
2.在页面地址后,拼接?callback=参数，让后端能接受到我们的参数
3.需要后端的配合，接收传过来的参数（函数名称），把我们处理好的json数据，作为函数的参数，再传回到前端
4.把我处理好的json数据，作为函数的参数在传回到前端
核心技术:
前端定义函数后端调用函数
（前端定义函数发送给后台，后台把数据作为定义函数的形参传给前端）
跨域传输例子：
cross.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 11 12 <script src="lib/jquery-1.12.2.js"></script> 13 <script> 14 function getCrossJson() { 15 alert(‘我们在html页面创建了一个函数，但是不在这里调用‘) 16 } 17 </script> 18 <script> 19 $.ajax({ 20 //localhost 和 127.0.0.1 域名不相同，就代表了跨域 21 //http://localhost/AJAX/day02/13_cross.html 22 //http://127.0.0.1 /AJAX/day02/13_cross.html 23 url:‘13_cross.php‘ 24 }); 25 </script>
cross.php
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html> 11 12 <script src="lib/jquery-1.12.2.js"></script> 13 <script> 14 function getCrossJson() { 15 alert(‘我们在html页面创建了一个函数，但是不在这里调用‘) 16 } 17 </script> 18 <script> 19 $.ajax({ 20 //localhost 和 127.0.0.1 域名不相同，就代表了跨域 21 //http://localhost/AJAX/day02/13_cross.html 22 //http://127.0.0.1 /AJAX/day02/13_cross.html 23 url:‘cross.php‘ 24 }); 25 </script>
以上是关于Ajax--同源策略,jsonp跨域传输的主要内容，如果未能解决你的问题，请参考以下文章