ajax跨域通信工作原理,jsonp+ajax实现浏览器跨域通信的原理解析

「爱情、让人受尽委屈。」 2022-09-03 06:24 117阅读 0赞

jsonp是一种技术手段而不是一种协议，也不是json数据。

var jsonp\_callback = function(responseData)\{

console.log(responseData);

\};

这是js部分

同样使用 iframe或者来访问

php端代码

header('text/html;charset=utf-8');

$clientCallback = isset($\_GET\['callback'\])?$\_GET\['callback'\]:'';

$data = array(

'name'=>'zhangsan',

'gender'=>'male',

'age'=>20

);

//注意，一定要输出到页面

echo $clientCallback.'('.json\_encode($data).')';

?>

测试一下

![c0938963d22370db9c86837fa3ee24de.png][]

\--------------------------------------------------------------------------------------------

以上方法属于直接访问的跨域通信，而在一些应用程序中，使用ajax+jsonp的进行跨域通信.

$(document).ready(function()\{

$.ajax(\{

url:'http://192.168.121.15/test\_json.php',

dataType:"jsonp",

jsonp:"jsonpcallback",

success:function(data)\{

console.log(data);

\},

error:function(data)\{

console.log(data);

\},

headers: \{  //这里的headers是非必须的，可以去掉

"Access-Control-Allow-Origin":"http://www.example.com",

"Access-Control-Allow-Headers":"X-Requested-With",

'referece':' //设置足迹

'Connection':'keep-Alive' //使用http\_1.1

\}

\});

\});

这里的ajax中使用了jsonp通信，需要设置数据类型 dataType=jsonp,jsonp的回调函数名称 jsonpcallback,注意，在js中不需要实现jsonpcallback,在jquery中会直接将 success:function(data)\{...\}赋值给jsonpcallback,关于实现代码如下

//模拟一下哦，其中settings是xhr对象的配置参数

var \_callback = settings.success;

url = 'http://192.168.121.15/test\_json.php'+'?'+settings.jsonp+'=\_callback';

赶快试试吧

[c0938963d22370db9c86837fa3ee24de.png]: /images/20220829/2e4d9ec280994354ad8455a7492efc02.png

发表评论取消回复

表情：

评论列表（有 0 条评论，117人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS篇(022)-iframe 跨域通信和不跨域通信

答案：不跨域通信主页面 <!DOCTYPE html> <html> <head> <meta charset=

一时失言乱红尘/ 2023年01月05日 03:54/ 0 赞/ 128 阅读

相关 iframe + postMessage 实现跨域通信

VScode安装Live Server 插件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text

客官°小女子只卖身不卖艺/ 2022年12月25日 02:57/ 0 赞/ 153 阅读

相关 ajax跨域通信工作原理,jsonp+ajax实现浏览器跨域通信的原理解析

jsonp是一种技术手段而不是一种协议，也不是json数据。 var jsonp\_callback = function(responseData)\{ console.

「爱情、让人受尽委屈。」/ 2022年09月03日 06:24/ 0 赞/ 118 阅读

相关 iframe跨域通信封装详解

iframe跨域通信众所周知，由于前端javascript对跨域访问做了安全限制，javascript只能访问与包含它的文档在同一域下的内容。用法举例：需求是

素颜马尾好姑娘i/ 2022年08月05日 08:19/ 0 赞/ 148 阅读

相关利用iframe实现ajax跨域通信的实现原理(图解)

在漫长的前端开发旅途上，无可避免的会接触到ajax，而且一般情况下都是用在同一域下的ajax请求；但是如果请求是发生在不同的域下，请求就无法执行，并且会抛出异常提示不允许跨域请

落日映苍穹つ/ 2022年08月05日 08:18/ 0 赞/ 155 阅读

相关 JSONP跨域的原理解析

[首页][Link 1] ![arrow.png][] [ JavaScript][JavaScript] ![arrow.png][] [JSONP跨域的原理解析][JSON

╰半橙微兮°/ 2022年07月15日 15:54/ 0 赞/ 130 阅读

相关 JSONP跨域的原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略

「爱情、让人受尽委屈。」/ 2022年07月15日 08:11/ 0 赞/ 108 阅读

相关 JSONP跨域原理解析

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略

系统管理员/ 2022年05月22日 03:54/ 0 赞/ 155 阅读

相关 Ajax 跨域- JSONP实例和原理解析

解决Ajax 跨域问题 - JSONP原理解析为什么会有跨域问题？ - 因为有同源策略同源策略是浏览器的一种安全策略，所谓同源指的是请求URL地址中的协议, 域

水深无声/ 2022年03月28日 05:51/ 0 赞/ 160 阅读

相关彻底理解浏览器的跨域

同源策略 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开

迈不过友情╰/ 2022年01月19日 01:35/ 0 赞/ 218 阅读