JSONP简单入门介绍
发布时间:2020-12-16 18:49:21 所属栏目:百科 来源:网络整理
导读:一、什么是JSONP? JSON with padding 是一种数据交换的技巧,用于解决主流浏览器的跨域数据访问的问题! 二、生产的背景 由于同源策略,一般来说位于A服务器的网页是无法与其他服务器上的资源沟通的而html中的`script`是一个特例,JSONP就是利用`script`这
一、什么是JSONP?JSON with padding 是一种数据交换的技巧,用于解决主流浏览器的跨域数据访问的问题! 二、生产的背景由于同源策略,一般来说位于A服务器的网页是无法与其他服务器上的资源沟通的 而html中的`<script>`是一个特例,JSONP就是利用`<script>`这个标签实例动态地 从其他服务器获取资源(一般来说是一些文本内容)。 三、使用
四、Talk is cheap,Show me the code!服务器端程序代码 jsonp.php (在B机器)<?php $func = $_GET['callback']; //这里获取客户JS定义的回调函数名称 $data = 'This is the jsonp data on crossdomain request'; echo "$func('{$data}')"; //这是一段JS代码 客户端HTML代码:jsonptest.html(在A机器上)<!DOCTYPE html> <html> <head> <title>Json test</title> </head> <body> <h1 id="padding-content"></h1> <a href="javascript:;" class="button">json data</a> </body> <script type="text/javascript"> function callbackfunc(data){ $("#padding-content").text("callback:"+data); } </script> <script type="text/javascript" src="http://www.B.com/jsonp.php?callback=callbackfunc"></script> </html> 打开浏览器A服务器上的jsonptest.html 可能看到结果callback:This is the jsonp data on crossdomain request Ajax跨域请求:还是用刚才的服务器端程序,我们修改一下客户HTML中的JS代码,发起一个请求<!DOCTYPE html> <html> <head> <title>Json test</title> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> </head> <body> <h1 id="padding-content"></h1> <a href="javascript:;" class="button">json data</a> </body> <script type="text/javascript"> $(".button").click(function(){ $.ajax({ url:"http://www.B.com/jsonp.php",dataType:"jsonp",type:"get",jsonpCallback:"testJsonpCallBackFunc",error:function(err,errstr){ $("#padding-content").text(errstr); },success:function(resp){ $("#padding-content").text(resp); } }); }); </script> </html> 点击页面的json data,成功在页面打印以下内容,表示跨域调用成功
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |