详解 JSON 和 JSONP

本文涉及的产品
.cn 域名,1个 12个月
简介:

JSON 介绍


1、什么是 JSON?

> JSON 指的是 JavaScript 对象表示法 (JavaScript Object Notation)

> JSON 是一种轻量级的数据交换格式,比 XML 更小、更快、更易解析

> JSON 独立于语言的文本格式

> JSON 易于人阅读和编写,同时也易于机器解析和生成


JSON 最初来自于 JavaScript,后来被所有的编程语言支持,成为了一种通用的字符串数据格式。


2、JSON 字符串的格式

2-1、“名称/值”对的集合,一般理解为对象。例如:

       '{"uid":101, "uname":"Roger", "isMarried":true}'


2-2、值的有序列表,一般理解为数组。例如:

        '[10,20,true,"Roger",{},[] ]'


JSON 格式示例如下:

示例一:

1
2
3
4
5
6
7
{
     "web" :[
         { "name" : "HTML5.0" , "fullName" : "HyperText Markup Language" },
         { "name" : "CSS3.0" , "fullName" : "Cascading StyleSheets" },
         { "name" : "JSON" , "fullName" : "JavaScript Object Notation" }
     ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
   "Array" : [
     1,
     2,
     3
   ],
   "Boolean" true ,
   "Null" null ,
   "Number" : 123,
   "Object" : {
     "a" "b" ,
     "c" "d"
   },
   "String" "Hello World"
}

示例二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
< h2 >了解JSON对象</ h2 >
 
用户名:< span  id = "uname" ></ span >< br >
年  龄:< span  id = "uage" ></ span >< br >
博  客:< span  id = "blog" ></ span >< br >
 
< script  src = "//cdn.bootcss.com/jquery/3.1.1/jquery.js" ></ script >
< script >
     var jsonObject= {
         "name":"Roger",
         "age":26,
         "blog":"http://dapengtalk.blog.51cto.com/"
     };
     $('#uname').html(jsonObject.name);
     $('#uage').html(jsonObject.age);
     $('#blog').html(jsonObject.blog);
 
     
</ script >
 
</ body >
</ html >

wKioL1g8-FbwIvNdAAAUrxvze64168.png


3、JSON 具有以下这些形式

3-1、JSON 字符串 要么是  一个{ },要么是一个 [ ]


wKioL1g8-oTTOR8rAAAgNJhpkvc739.png

wKiom1g8-pWTmcCTAAAaBiLpE2M063.png



3-2、JSON 中所有的 string 必须使用 "", 包括 key。使用反斜线转义,如:\", \\, \b


wKioL1g8-0XDimjOAACLGnu8jxc874.png


3-3、JSON 对象的 value 只能是 string、number、object、array、true、false、null,不存在 Date 等类型

wKioL1g8-rWxuzLrAAA28X_7d_s534.png


4、JS 与 JSON 互转

    JSON 字符串  => JS 对象/数组:  var obj = JSON.parse( str );

    JS 对象/数组  => JSON 字符串:  var str = JSON.stringify( obj );


示例代码一:(JSON 转 JS 对象)

1
2
3
var  str =  '{"name":"Roger", "age":26}' ;
var  obj = JSON.parse( str);
console.log(obj);


结果:

wKioL1g9DZvDtSlQAAAqSJYou2g033.png



示例代码二:(JS 转 JSON 字符串)

1
2
3
4
5
6
var  jsObj =  new  Object( );
jsObj.car =  "BMW" ;
jsObj.color =  "black" ;
jsObj.price = 300,000;
var  jsonStr = JSON.stringify( jsObj );
console.log(jsonStr);


结果:

wKiom1g9D3ayJIY3AAAapxGvn_4585.png



5、PHP 与 JSON 互转

    PHP 数组  => JSON 字符串:$str = json_encode( $arr );

    JSON 字符串  => PHP数组: $arr = json_decode( $str );


示例代码一:(PHP数组 转 JSON字符串)

1
2
3
4
5
6
7
8
<?php
header( 'Content-Type: application/json' );
 
$arr  array ( 'a' => 'apple' 'b' => 'banana' 'c' => 'cherry' 'd' => 'duria' );
 
$str  = json_encode(  $arr  );
 
echo  ( $str );


结果:

wKiom1g9EwSSGl8hAAAi7cJY6PI420.png


示例代码二:(JSON字符串 转 PHP数组)

1
2
3
4
5
6
<?php
header( 'Content-Type: application/json' );
 
$str  '{"a":"apple","b":"banana","c":"cherry","d":"duria"}' ;
 
var_dump( json_decode(  $str ) );


结果:

wKiom1g9FGqzNFw_AAAp96_jlvc734.png


JSONP 介绍


1、什么是 JSONP?

JSON with Padding填充式 JSON,是 JSON 的一种“使用模式”,可以让网页从别的域名(网站)那获取资料,即跨域读取数据


我们知道 img、a、link 和 script 都是允许跨域的,JSONP的原理就是利用了这一点



2、JSONP的原理

在客户端动态的创建一个 script 标签,代替 XHR 对象,指定 script.src 向服务器发起请求,请求的PHP页面除了返回需要的数据外,还需要填充一个指定的函数名。


1
2
3
header( 'Content-Type: application/javascript' );
$json  = json_encode( $data );
echo  $cb  '('  $json  ')' ;


我们可以模拟一下前面的文字描述


  • 新建一个HTML 页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
< button  id = "btn" >发起跨域请求</ button >
 
 
< script >
     //回调函数
     function doResponse(obj){
         console.log(obj.uname + obj.age);
     };
     var btn = document.getElementById('btn');
 
     //点击按钮发起跨域请求
     btn.onclick = function(){
         //动态创建一个 script 标签
         var s = document.createElement('script');
 
         //指定一个 script.src 向服务器发起请求
         s.src = "http://127.0.0.1:8081/Ajax/4.php?callback=doResponse";
         document.body.appendChild(s);
     };
 
</ script >
</ body >
</ html >


  • 新建一个PHP页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
sleep(10);  //延时10s,方便看到效果
 
header( 'Content-Type: application/javascript' );  //MIME类型设置成 javascript,因为src只接受js,
//所以最终要把回调函数变成(或者说回调函数返回一个)JSON对象
 
 
$cb  $_REQUEST [ 'callback' ];
 
$data  = [ 'uname' => 'Tom' , 'age' =>20];
 
$json  =  json_encode( $data );   //返回一个JSON数据  '{"":"","":20}'
 
echo  $cb . '(' . $json . ')' ;   //把JSON数据作为回调函数的参数


看一眼这个PHP页面返回的内容,记住要在域名后面加一个callback 参数

wKiom1g-gFaQ852CAAAuQ5EwOhQ947.png


点击按钮以后,控制台可以看到,动态生成了一个 script 标签

wKiom1g-fbfQ_O_nAABXWooP5mg543.png


打开 Network,可以看到这个实际发起的是一个 script 请求,而且响应消息是一段 JSON字符串

wKiom1g-fzPSTVLdAABvWVItTs0819.png

响应消息

wKiom1g-f1CzRecSAABjR1Pm69s835.png


查看输出内容,成功拿到了数据

wKioL1g-f3ewiUBVAAAVqqDQ9QQ337.png



3、jQuery 封装的 JSONP


$.getJSON('http://其它域名/xx.php?callback=?', fn)


HTML页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
 
< button  id = "btn" >跨域请求按钮</ button >
 
< script  src = "resources/js/jquery-1.8.3.min.js" ></ script >
< script >
     function doResponse(obj){
         console.log(obj.uname + obj.age);
     };
 
     $('#btn').click(function(){
         $.getJSON('http://127.0.0.1:8081/Ajax/4.php?callback=?',doResponse);
     });
 
</ script >
</ body >
</ html >


点击按钮,发起跨域请求,成功的拿到了响应数据

wKiom1g-g5DS9XXOAAA8WNV7Mjc257.png



$.ajax({

url: ' http://其它域名/xx.php',

dataType: 'jsonp',

success: fn

});


HTML 页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
</ head >
< body >
 
< button  id = "btn" >跨域请求按钮</ button >
 
< script  src = "resources/js/jquery-1.8.3.min.js" ></ script >
< script >
     function doResponse(obj){
         console.log(obj.uname + obj.age);
     };
 
     $('#btn').click(function(){
         $.ajax({
             url:'http://127.0.0.1:8081/Ajax/4.php',
             dataType:'jsonp',
             success:doResponse
         })
     });
 
</ script >
</ body >
</ html >


同样也成功拿到了数据,效果截图同上

wKiom1g-hK_y2OqKAABvSr1lTfs236.png

wKioL1g-hL3BTKrbAABUf-6WpJM781.png

本文转自   frwupeng517   51CTO博客,原文链接:http://blog.51cto.com/dapengtalk/1877684

相关文章
|
JSON 前端开发 JavaScript
使用YQL解决跨域请求json转jsonp问题
使用YQL解决跨域请求json转jsonp问题
110 0
|
JSON 前端开发 JavaScript
js:json请求和jsonp请求
js:json请求和jsonp请求
182 0
|
JSON 前端开发 JavaScript
说说JSON和JSONP,也许你会豁然开朗
JSON(JavaScript Object Notation) 和 JSONP(JSON with Padding) 虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。
1286 0
|
Web App开发 JSON JavaScript
|
JSON 数据格式 Spring
Spring Boot 实现json和jsonp格式数据接口
Spring boot 实现json和jsonp格式数据接口 1.新建一个类继承AbstractJsonpResponseBodyAdvice,重写父类构造方法, 传入callback和jsonp参数。
2195 0
|
XML JSON JavaScript