本文共 5007 字，大约阅读时间需要 16 分钟。
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 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!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 > |
3、JSON 具有以下这些形式
3-1、JSON 字符串 要么是 一个{ }，要么是一个 [ ]
3-2、JSON 中所有的 string 必须使用 "", 包括 key。使用反斜线转义，如：\", \\, \b
3-3、JSON 对象的 value 只能是 string、number、object、array、true、false、null，不存在 Date 等类型
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); |
结果：
示例代码二：（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); |
结果：
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); |
结果：
示例代码二：（JSON字符串 转 PHP数组）
| 1 2 3 4 5 6 |
|
结果：
JSONP 介绍
1、什么是 JSONP?
JSON with Padding：填充式 JSON，是 JSON 的一种“使用模式”，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
我们知道 img、a、link 和 script 都是允许跨域的，JSONP的原理就是利用了这一点
2、JSONP的原理
在客户端动态的创建一个 script 标签，代替 XHR 对象，指定 script.src 向服务器发起请求，请求的PHP页面除了返回需要的数据外，还需要填充一个指定的函数名。
| 1 2 3 |
|
我们可以模拟一下前面的文字描述
新建一个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 |
|
新建一个PHP页面
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <?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 参数
点击按钮以后，控制台可以看到，动态生成了一个 script 标签
打开 Network，可以看到这个实际发起的是一个 script 请求，而且响应消息是一段 JSON字符串
响应消息
查看输出内容，成功拿到了数据
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 > |
点击按钮，发起跨域请求，成功的拿到了响应数据
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 > |
同样也成功拿到了数据，效果截图同上
本文转自asd1123509133 51CTO博客，原文链接：http://blog.51cto.com/lisea/1878395，如需转载请自行联系原作者