Ajax--同源策略,jsonp跨域传输原理（callback），

什么是同源策略？

阮一峰的博客 同源策略

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

    img 标签的src是可以引入其他域名下的图片    script标签的src属性同理 ，也可以引入其他域名下的js文件，并执行

    1.script的属性引入文件(页面地址)的时候是允许跨域    2.在页面地址后,拼接?callback=参数，让后端能接受到我们的参数    3.需要后端的配合，接收传过来的参数（函数名称），把我们处理好的json数据，作为函数的参数，再传回到前端    4.把我处理好的json数据，作为函数的参数在传回到前端

    核心技术:        前端定义函数后端调用函数        （前端定义函数发送给后台，后台把数据作为定义函数的形参传给前端）

跨域传输例子：cross.html  跨域数据传输

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--
 9          img 标签的 src 是可以引入其他域名下的图片，
10          script 标签的 src属性同理，也可以引入其他域名(跨域)下的js文件，并执行
11      -->
12     <!--
13         1. script的src属性引入文件(页面地址)的时候是允许跨域
14         2. 在src地址后，拼接?callback=参数，让后端能接收到我们参数
15         3. 需要后端配合，接收传过来的参数(函数名称)，
16         4. 把我们处理好的json数据，作为函数的参数再传回到前端
17         核心技术：
18             前端定义函数，后端调用函数。
19             (前端定义函数发送给后台，后台把数据作为定义函数的参数传给前端。)
20     -->
21     <img src="http://www.ruanyifeng.com/blogimg/asset/2016/bg2016041202.jpg" alt="">
22 </body>
23 </html>
24 <script>
25     function getCrossJson(json) {
26         console.log(json);
27         alert("我们在html页面创建了一个函数，但是不在这里调用");
28     }
29 </script>
30 <!-- script 可以加载文件，并执行这些文件 -->
31 <!--<script src="http://localhost/AJAX/day02/13_cross.php"></script>-->
32 <!-- 跨域加载php文件 -->
33 <script src="http://127.0.0.1/AJAX/cross.php?callback=getCrossJson"></script>

在服务器中的cross.php

1 <?php
2     header('Content-Type:text/javascript;charset=utf-8;');
3     //    echo 'getCrossJson()';   写死的一个函数
4     $callback = $_GET['callback'];
5     // 读取一份json文件，把它放到$jsonStr变量里
6     $jsonStr = file_get_contents('nav.json');
7     echo "$callback($jsonStr)";
8 ?>

转载于:https://www.cnblogs.com/mrszhou/p/7820497.html

Ajax--同源策略,jsonp跨域传输原理（callback），相关推荐

AJAX | 跨域与JSONP + 同源策略和跨域 + JSONP + 防抖和节流 + 案例 – 淘宝搜索
目录同源策略和跨域同源策略跨域 JSONP JSONP的实现原理自己实现一个简单的JSONP JSONP的缺点 jQuery中的JSONP 自定义参数及回调函数名称 jQuery中JSONP的 ...
ajax背景、ajax对象、ajax状态、ajax与http、ajax请求数据接口、同步与异步、ajax请求XML数据、封装ajax函数、artTemplate简介、同源策略和跨域请求、JSONP
AJAX简介: ajax背景: 1.AJAX(Asynchronous JavaScript And Xml)异步的 JavaScript 和 XML:ajax是浏览器提供的一套API,最早出现在谷歌 ...
服务器安全：浏览器同源策略与跨域请求、XSS攻击原理及防御策略、如何防御CSRF攻击
主要包括浏览器同源策略与跨域请求 XSS攻击原理及防御策略如何使用SpringSecurity防御CSRF攻击 CC/DDOS攻击与流量攻击什么是SSL TLS HTTPS? 一.浏览器的同源策 ...
JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
JSONP跨域的原理解析及其实现介绍
JSONP 即 Json padding ,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理 JavaScript是一种在Web ...
websocket中发生数据丢失_tcp协议;websocket协议;同源策略和跨域
tcp协议为什么连接的时候是三次握手,关闭的时候却是四次握手? 答:因为当Server端收到Client端的SYN连接请求报文后,可以直接发送SYN+ACK报文.其中ACK报文是用来应答的,SYN报 ...
同源策略和跨域解决方案
同源策略一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示 ...
浏览器的同源策略及跨域解决方案
同源策略一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示 ...
Django - - 进阶 - - 同源策略和跨域解决方案
目录同源策略一个源的定义同源策略是什么举个例子 jQuery中getJSON方法 JSONP应用 1, 同源策略 1.1 一个源的定义如果两个页面的协议,端口(如果有指定)和域名都相同,则两 ...

Ajax--同源策略,jsonp跨域传输原理（callback），

什么是同源策略？

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

在服务器中的cross.php

Ajax--同源策略,jsonp跨域传输原理（callback），相关推荐

最新文章

热门文章

Ajax--同源策略,jsonp跨域传输原理（callback），

什么是同源策略？

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

在服务器中的cross.php

Ajax--同源策略,jsonp跨域传输原理（callback），相关推荐

最新文章

热门文章

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