理解json和jsonp的定义和区别以及如何实际使用

(一)什么是跨域请求?

首先要理解什么是跨域?

跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。

其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。

常见跨域场景:(JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。)

常见解决跨域办法:

①代理:使用php做代理文件,ajax直接请求php文件

②通过设置响应头

③通过jsonp,通过某些标签(img,script,iframe )src属性

(二)json和jsonp的定义和区别

区别:

　　json是一种基于文本的数据交换格式（无法跨域）,jsonp是一种非官方跨域数据交互协议。json返回的是一串数据,而 jsonp返回的是脚本代码（包含一个函数调用）。

定义:

　　json可以理解为是一种格式，它的键必须用双引号。json格式的对象必须写在{}花括号里面，json格式的数组写在[]大括号里面。

　　jsonp实现跨域的原理：

　　 1.首先在客户端注册一个callback, 然后把callback的名字传给服务器。
　　 2.服务器先生成 json 数据。然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp. 最后将 json 数据直接以入参

的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

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

(三)使用demo示例

script标签jsonp跨域具体实现

(1)script标签实现跨域

客户端html代码:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>script标签与jsonp</title>
 6     <script>
 7         var script = document.createElement('script');
 8         script.type = 'text/javascript';
 9         //传参并指定回调执行函数为jsonpBack
10         script.src = 'http://dev.test.com/jsonp.php?callback=jsonpBack';
11         //script标签追加到head标签中
12         document.head.appendChild(script);
13         
14         //回调执行函数
15         function jsonpBack(data) {
16             alert(JSON.stringify(data));
17         }
18     </script>
19 </head>
20 <body>
21 </body>
22 </html>

服务端php.代码

1 <?php
2 $a = $_GET['callback'];//接收参数,名为js函数名
3 $data = array('name'=>'admin','age'=>100);
4 $json = json_encode($data);
5 echo "$a($json)";//服务端输出,可执行的js函数名称

打印结果如下图:

注意:由于浏览器的同源策略,禁止ajax从一个域名请求另外一个域名上面的数据.

(2)ajax获取json数据

客户端html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>ajax获取json</title>
 6 </head>
 7 <body>
 8 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
 9 <script type="text/javascript">
10 </script>
11 <script type="text/javascript">
12         $.ajax({
13             type : 'get',
14             url  : 'http://dev.php.com/test3/json.php',
15             dataType : 'json',
16             success : function(data) {
17                 alert('ajax获取json数据:' +JSON.stringify(data));
18             }
19         });
20 </script>
21 </body>
22 </html>

服务端php.代码

1 <?php
2 $data = array("name"=>"admin","age"=>"100");
3 $json = json_encode($data);
4 echo $json;

打印结果如下图:

ajax中jsonp跨域具体实现

(3)ajax中jsonp使用

客户端html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="UTF-8">
 5     <title>ajax中jsonp</title>
 6 </head>
 7 <body>
 8 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
 9 <script type="text/javascript">
10   $.ajax({
11        type: "get",
12        url: "http://dev.test.com/jsonp.php",
13        dataType: "jsonp",
14        jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
15        jsonpCallback:"jsonpBack",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
16        success: function(data){
17            alert('ajax中jsonp回调:' +JSON.stringify(data));
18        },
19        error: function(){
20            alert('fail');
21        }
22    });
23 </script>
24 </body>
25 </html>

服务端php.代码

1 <?php
2 $a = $_GET['callback'];//接收参数,名为js函数名
3 $data = array('name'=>'admin','age'=>100);
4 $json = json_encode($data);
5 echo "$a($json)";//服务端输出,可执行的js函数名称

打印结果如下图: