JSONP简单入门介绍
一、什么是JSONP?
JSON with padding 是一种数据交换的技巧,用于解决主流浏览器的跨域数据访问的问题!
二、生产的背景
由于同源策略,一般来说位于A服务器的网页是无法与其他服务器上的资源沟通的 而html中的`<script>`是一个特例,JSONP就是利用`<script>`这个标签实例动态地 从其他服务器获取资源(一般来说是一些文本内容)。
三、使用
客户端JS代码首先定义一个回调函数,该回调函数接收将要被处理的数据参数,参数个数不定。
客户端HTML代码嵌入一段
<script>
引用,src
指向服务器程序的URL,并在URL在给定一个参数,它的值就是上面1定义的function名服务器端代码(如PHP)接收到请求,解析参数取得客户端中定义的回调函数名,并将取得的回调函数名当作函数名称与数据合并输出一段 JS调用函数的代码
四、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,成功在页面打印以下内容,表示跨域调用成功
callback:This is the jsonp data on crossdomain request
相关推荐
somebodyoneday 2020-03-06
fengchao000 2020-03-05
fengchao000 2020-06-17
adonislu 2020-05-16
zmosquito 2020-05-10
adonislu 2020-05-10
somebodyoneday 2020-04-22
fengchao000 2020-04-22
fengchao000 2020-04-11
Richardxx 2020-03-07
somebodyoneday 2020-02-16
xiaouncle 2020-02-13
baijinswpu 2020-01-29
fengchao000 2020-01-10
fengchao000 2019-12-25
newthon 2019-12-23
somebodyoneday 2013-07-11