分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

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

发布时间:2023-09-06 01:24责任编辑:熊小新关键词:jsjsonAjax跨域

什么是同源策略?

阮一峰的博客 同源策略 


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

 ???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.html22 ????????//http://127.0.0.1 /AJAX/day02/13_cross.html23 ???????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.html22 ????????//http://127.0.0.1 /AJAX/day02/13_cross.html23 ???????url:‘cross.php‘24 ????});25 </script>


 

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

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved