JSONP的使用(在zepto和kissy下使用)

前端之家收集整理的这篇文章主要介绍了JSONP的使用(在zepto和kissy下使用)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、JSONP是一种较为规范和通用的解决ajax跨域访问限制的方式

二、ajax跨域访问限制:基于安全的原因,浏览器采用同源策略,其阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档;所谓同源要求域名和端口全部一致,例如 1.example.com 和2.example.com 就非同源,example.com:80 和 example.com:8080 亦非同源。

三、jsonp的原理:带有src属性标签的跨域资源获取能力,在jsonp中通常使用<script>标签,因为<script>标签获取的跨域资源可以使用回调函数直接处理

jsonp的实现:

前端代码:

  1. <script>
  2. function callback(data){
  3. console.log(data);
  4. }
  5. </script>
  6. <script type="text/javascript" src="//www.remote.com/remote.PHP?callback=callback"></script>

后台代码 <www.remote.com/remote.PHP>

  1. if(isset($_GET["callback"])){
  2. $server_name = $_SERVER["SERVER_NAME"];
  3. $path = $_SERVER["PHP_SELF"];
  4. $query_string = $_SERVER["QUERY_STRING"];
  5. if($query_string!=""&&$query_string!=null){
  6. $query_paras = explode("&",$query_string);
  7. $query_array = array();
  8. $query_length = count($query_paras);
  9. for($i=0;$i<$query_length;$i++){
  10. $paras = explode("=",$query_paras[$i]);
  11. $query_array[$paras[0]]=$paras[1];
  12. }
  13. $data = array("server_name"=>$server_name,"path"=>$path,"query_paras"=>$query_array);
  14. }else{
  15. $data = array("server_name"=>$server_name,"path"=>$path);
  16. }
  17. $callback = $_GET["callback"];
  18. echo $callback . "(" . json_encode($data) . ")";

后台服务器将需要返回的json数据进行封装,然后并不直接返回json,而是返回一句js代码
  1. echo $callback . "(" . json_encode($data) . ")";
这句代码将返回的json数据调用回调函数直接进行处理

四、zepto实现jsonp

  1. function getData(){
  2. $.ajax({
  3. type: 'GET',url: '//www.homeworksong.sinaapp.com/getUrlInfo.PHP?callback=?',timeout: 300,context: $('tbody'),data: { name: 'Zepto',type:"JSONP" },success: function(data){
  4. console.log(data);
  5. },error: function(xhr,type){
  6. alert('Ajax error!')
  7. }
  8. });
  9. }
五、kissy实现jsonp

  1. require(["io","node","util"],function(IO,$,Util){
  2. IO.jsonp("http://www.homeworksong.sinaapp.com/getUrlInfo.PHP",{type:"JSONP",name:"Kissy" },function(data){
  3. console.log(data);
  4. });
  5. });
  6. });

猜你在找的Json相关文章