jsonp

最新推荐文章于 2022-11-13 18:59:58 发布

wymrdjm

最新推荐文章于 2022-11-13 18:59:58 发布

阅读量197

点赞数

我们知道，普通的ajax请求存在跨域无权限访问的问题，这是浏览器的安全策略在起作用

index.php:

[php]view plain copy 
   
 <?php   
     $info = '{  
         "code" : 10,  
         "title" : "jsonp",  
         "name" : "rgy"  
     }';  
   
     echo $info;  
 ?>  

test.html中的js代码：

[javascript]view plain copy 
   
 $.ajax({  
           type: "post",  
           url: "http://localhost/jsonptest/index.php",  
           dataType: "json",  
           success: function(data) {  
               console.log(data);  
           },  
           error: function(data) {  
               console.log("fail");  
           }  
     });  

举个例子，首先test.html与index.php不在同一域中，test.html当访问index.php时:，通常会出现如下图所示的情况：

怎样解决这个问题呢？

这里有两种思路：

第一种是修改服务端代码，为index.php加上header(Access-Control-Allow_Origin:*);允许所有来源的请求访问该资源。

第二种思路就是通过jsonp的方式

下面先介绍第一种方法：

将index.php修改成如下形式：

[php]view plain copy 
   
 <?php header('Access-Control-Allow-Origin:*'); ?>  
   
 <?php   
     $info = '{  
         "code" : 10,  
         "title" : "jsonp",  
         "name" : "rgy"  
     }';  
   
     echo $info;  
 ?>  

再通过test.html进行跨域访问就没有问题了，结果如下：

第二种方法：

首先将服务端代码改成如下形式：

[php]view plain copy 
   
 <?php  
       
     $callback = $_GET['callback'];    
   
     $info = '{"code":10,"title":"jsonp","name":"rgy"}';  
   
     echo $callback."(".$info.")";  
   
 ?>

test.html可以通过如下方式进行访问：

[javascript]view plain copy 
   
 $.ajax({  
             type: "get",  
             url: "http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php",  
             dataType: "jsonp",  
             jsonp: "callback",  
             success: function(data) {  
                 console.log(data);  
             },  
             error: function() {  
                 console.log("fail");  
             }  
 <span style="white-space:pre">    </span>});  

[javascript]view plain copy 
   
 $.getJSON("http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php?callback=?",function(data){  
             console.log(data);  
         });   

结果如下：

这是用的jquery帮我们封装好的方法，虽然使用起来方便，但是却不利于大家理解jsonp的原理，下面就是原生的js模拟一下jsonp的访问过程

说白了，就是利用src属性能够跨域访问的特性

[javascript]view plain copy 
   
 var showInfo = function(data){  
      console.log(data);  
 }  
   
 var url = "http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php?callback=showInfo";  
   
 var script = document.createElement('script');  
 script.setAttribute('src', url);  
 document.getElementsByTagName('head')[0].appendChild(script);  

先定义了一个回调方法showInfo，然后将其当作url参数的一部分发送到服务端，服务端通过字符串拼接的方式将数据包裹在回调方法中，再返回回来

然而这样使用起来相当不方便，在不使用其他js库的情况下，对这个过程进行封装：

[javascript]view plain copy 
   
 function loadScript(xyUrl, callback){  
     var head = document.getElementsByTagName('head')[0];  
     var script = document.createElement('script');  
     script.type = 'text/javascript';  
     script.src = xyUrl;  
       
     script.onload = script.onreadystatechange = function(){  
         if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){  
             callback && callback();  
             // Handle memory leak in IE  
             script.onload = script.onreadystatechange = null;//人工回收内存  
             if ( head && script.parentNode ) {  
                 head.removeChild( script );  
             }  
         }  
     };  
     head.insertBefore( script, head.firstChild );  
 }  
   
 //  
   
 var url = "http://todolist6.sinaapp.com/pages/QuickWayGetInfo.php?callback=showInfo";  
   
 loadScript(url, showInfo);  
   
 var showInfo = function(data){  
     console.log(data.name);  
 }  