码迷,mamicode.com
首页 > Web开发 > 详细

Ajax--同源策略,jsonp跨域传输

时间:2017-11-12 01:04:05      阅读:172      评论:0      收藏:0      [点我收藏+]

标签:fan   http   url   https   target   函数   lib   域名   com   

什么是同源策略?


阮一峰的博客 同源策略 


同源策略的解决方法: 跨域传输

    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跨域传输

标签:fan   http   url   https   target   函数   lib   域名   com   

原文地址:http://www.cnblogs.com/mrszhou/p/7820497.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!