JSON 介紹

廣饒網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)從2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

1、什么是 JSON？

> JSON 指的是 JavaScript 對(duì)象表示法 (JavaScript Object Notation)

> JSON 是一種輕量級(jí)的數(shù)據(jù)交換格式，比 XML 更小、更快、更易解析

> JSON 獨(dú)立于語(yǔ)言的文本格式

> JSON 易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成

JSON 最初來(lái)自于 JavaScript，后來(lái)被所有的編程語(yǔ)言支持，成為了一種通用的字符串?dāng)?shù)據(jù)格式。

2、JSON 字符串的格式

2-1、“名稱/值”對(duì)的集合，一般理解為對(duì)象。例如：

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

2-2、值的有序列表，一般理解為數(shù)組。例如：

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

JSON 格式示例如下：

示例一：

{
    "web":[
        {"name":"HTML5.0","fullName":"HyperText Markup Language"},
        {"name":"CSS3.0","fullName":"Cascading StyleSheets"},
        {"name":"JSON","fullName":"JavaScript Object Notation"}
    ]
}

{
  "Array": [
    1,
    2,
    3
  ],
  "Boolean": true,
  "Null": null,
  "Number": 123,
  "Object": {
    "a": "b",
    "c": "d"
  },
  "String": "Hello World"
}

示例二：

    
    


了解JSON對(duì)象

用戶名：

年  齡：

博  客：

3、JSON 具有以下這些形式

3-1、JSON 字符串 要么是  一個(gè){ }，要么是一個(gè) [ ]

3-2、JSON 中所有的 string 必須使用 "", 包括 key。使用反斜線轉(zhuǎn)義，如：\", \\, \b

3-3、JSON 對(duì)象的 value 只能是 string、number、object、array、true、false、null，不存在 Date 等類型

4、JS 與 JSON 互轉(zhuǎn)

    JSON 字符串  => JS 對(duì)象/數(shù)組：  var obj = JSON.parse( str );

    JS 對(duì)象/數(shù)組  => JSON 字符串：  var str = JSON.stringify( obj );

示例代碼一：(JSON 轉(zhuǎn) JS 對(duì)象)

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

結(jié)果：

示例代碼二：（JS 轉(zhuǎn) JSON 字符串）

var jsObj = new Object( );
jsObj.car = "BMW";
jsObj.color = "black";
jsObj.price = 300,000;
var jsonStr = JSON.stringify( jsObj );
console.log(jsonStr);

結(jié)果：

5、PHP 與 JSON 互轉(zhuǎn)

    PHP 數(shù)組  => JSON 字符串：$str = json_encode( $arr );

    JSON 字符串  => PHP數(shù)組： $arr = json_decode( $str );

示例代碼一：（PHP數(shù)組 轉(zhuǎn) JSON字符串）

'apple', 'b'=>'banana', 'c'=>'cherry', 'd'=>'duria');

$str = json_encode( $arr );

echo ($str);

結(jié)果：

示例代碼二：（JSON字符串 轉(zhuǎn) PHP數(shù)組）

結(jié)果：

JSONP 介紹

1、什么是 JSONP?
JSON with Padding：填充式 JSON，是 JSON 的一種“使用模式”，可以讓網(wǎng)頁(yè)從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。
我們知道 img、a、link 和 script 都是允許跨域的，JSONP的原理就是利用了這一點(diǎn)
2、JSONP的原理
在客戶端動(dòng)態(tài)的創(chuàng)建一個(gè) script 標(biāo)簽，代替 XHR 對(duì)象，指定 script.src 向服務(wù)器發(fā)起請(qǐng)求，請(qǐng)求的PHP頁(yè)面除了返回需要的數(shù)據(jù)外，還需要填充一個(gè)指定的函數(shù)名。
header('Content-Type: application/javascript');
$json = json_encode($data);
echo $cb . '(' . $json . ')';
我們可以模擬一下前面的文字描述
新建一個(gè)HTML 頁(yè)面



    
    


發(fā)起跨域請(qǐng)求




新建一個(gè)PHP頁(yè)面
'Tom','age'=>20];

$json =  json_encode($data);  //返回一個(gè)JSON數(shù)據(jù)  '{"":"","":20}'

echo $cb.'('.$json.')';  //把JSON數(shù)據(jù)作為回調(diào)函數(shù)的參數(shù)
看一眼這個(gè)PHP頁(yè)面返回的內(nèi)容，記住要在域名后面加一個(gè)callback 參數(shù)
點(diǎn)擊按鈕以后，控制臺(tái)可以看到，動(dòng)態(tài)生成了一個(gè) script 標(biāo)簽
打開(kāi) Network，可以看到這個(gè)實(shí)際發(fā)起的是一個(gè) script 請(qǐng)求，而且響應(yīng)消息是一段 JSON字符串
響應(yīng)消息
查看輸出內(nèi)容，成功拿到了數(shù)據(jù)
3、jQuery 封裝的 JSONP
$.getJSON('http://其它域名/xx.php?callback=?', fn)
HTML頁(yè)面



    
    



跨域請(qǐng)求按鈕




點(diǎn)擊按鈕，發(fā)起跨域請(qǐng)求，成功的拿到了響應(yīng)數(shù)據(jù)
$.ajax({
		url: ' http://其它域名/xx.php',
		dataType: 'jsonp',
		success: fn
});

HTML 頁(yè)面



    
    



跨域請(qǐng)求按鈕




同樣也成功拿到了數(shù)據(jù)，效果截圖同上
            
            
                        

            當(dāng)前標(biāo)題：詳解JSON和JSONP            

            URL網(wǎng)址：http://weahome.cn/article/ijogjp.html