用JSONP实现跨域请求

时间：2022-08-28 15:57:53

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

 

HTML代码 （任一）：

 

Html代码   用JSONP实现跨域请求
  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  2. <script type="text/javascript">  
  3.     function jsonpCallback(result) {  
  4.         //alert(result);  
  5.         for(var i in result) {  
  6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
  7.         }  
  8.     }  
  9.     var JSONP=document.createElement("script");  
  10.     JSONP.type="text/javascript";  
  11.     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
  12.     document.getElementsByTagName("head")[0].appendChild(JSONP);  
  13. </script>  
 

或者

 

Html代码   用JSONP实现跨域请求
  1. <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  2. <script type="text/javascript">  
  3.     function jsonpCallback(result) {  
  4.         alert(result.a);  
  5.         alert(result.b);  
  6.         alert(result.c);  
  7.         for(var i in result) {  
  8.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
  9.         }  
  10.     }  
  11. </script>  
  12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>  

 

JavaScript的链接，必须在function的下面。

 

服务端PHP代码 （services.php）：

 

Php代码   用JSONP实现跨域请求
  1. <?php  
  2.   
  3. //服务端返回JSON数据  
  4. $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
  5. $result=json_encode($arr);  
  6. //echo $_GET['callback'].'("Hello,World!")';  
  7. //echo $_GET['callback']."($result)";  
  8. //动态执行回调函数  
  9. $callback=$_GET['callback'];  
  10. echo $callback."($result)";  
 

如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。

 

$.getJSON
$.ajax
$.get

 

客户端JS代码在jQuery中的实现方式1：

 

Js代码   用JSONP实现跨域请求
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript">  
  3.     $.getJSON("http://crossdomain.com/services.php?callback=?",  
  4.     function(result) {  
  5.         for(var i in result) {  
  6.             alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
  7.         }  
  8.     });  
  9. </script>  
 

客户端JS代码在jQuery中的实现方式2：

 

Js代码   用JSONP实现跨域请求
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript">  
  3.     $.ajax({  
  4.         url:"http://crossdomain.com/services.php",  
  5.         dataType:'jsonp',  
  6.         data:'',  
  7.         jsonp:'callback',  
  8.         success:function(result) {  
  9.             for(var i in result) {  
  10.                 alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
  11.             }  
  12.         },  
  13.         timeout:3000  
  14.     });  
  15. </script>  
 

客户端JS代码在jQuery中的实现方式3：

 

Js代码   用JSONP实现跨域请求
  1. <script type="text/javascript" src="jquery.js"></script>  
  2. <script type="text/javascript">  
  3.     $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');  
  4. </script>  
 

其中 jsonCallback 是客户端注册的，获取跨域服务器上的json数据后，回调的函数。
http://crossdomain.com/services.php?callback=jsonpCallback
这个 url 是跨域服务器取 json 数据的接口，参数为回调函数的名字，返回的格式为

 

Js代码   用JSONP实现跨域请求
  1. jsonpCallback({msg:'this is json data'})  
 

Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

 

使用JSON的优点在于：

  • 比XML轻了很多，没有那么多冗余的东西。
  • JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
  • 在JavaScript中处理JSON很简单。
  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：

  • JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
  • 如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的方式。



$.ajax(url,[settings])

$.ajax({
             type: "get",
             url: "http://www.chengguanhui.com/test.php",
             dataType: "jsonp",
             data: "name=ray&age=23",
             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
             jsonpCallback:"handleFn",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
             success: function(json){
                 alert(json.name+json.age);
             },
             error: function(){
                 alert('fail');
             }
         });

     });


$.getJSON(url,data,callback)

$.getJSON("http://www.chengguanhui.com/test.php",//如果请求值固定时，可以省略data参数而直接写在url参数里。 
    {
    name:ray,
    age:23
},
function(data){
  $.each(data.items, function(i,item){
     alert(i+item);
  });
});

标签：

相关文章