JSON+JSONP（加量不加價）

時間 2019-11-13

標籤 json+jsonp json jsonp 加價欄目 JavaScript 简体版

原文原文鏈接

　關於JSON的簡介　和基礎javascript

什麼是 JSON ？

JSON 指的是 JavaScript 對象表示法（JavaScript Object Notation）
JSON 是輕量級的文本數據交換格式
JSON 獨立於語言 *
JSON 具備自我描述性，更易理解

*	JSON 使用 Javascript語法來描述數據對象，可是 JSON 仍然獨立於語言和平臺。JSON 解析器和 JSON 庫支持許多不一樣的編程語言。目前很是多的動態（PHP，JSP，.NET）編程語言都支持JSON。

JSON - 轉換爲 JavaScript 對象

JSON 文本格式在語法上與建立 JavaScript 對象的代碼相同。php

因爲這種類似性，無需解析器，JavaScript 程序可以使用內建的 eval() 函數，用 JSON 數據來生成原生的 JavaScript 對象。html

與 XML 相同之處

JSON 是純文本
JSON 具備"自我描述性"（人類可讀）
JSON 具備層級結構（值中存在值）
JSON 可經過 JavaScript 進行解析
JSON 數據可以使用 AJAX 進行傳輸

與 XML 不一樣之處

沒有結束標籤
更短
讀寫的速度更快
可以使用內建的 JavaScript eval() 方法進行解析
使用數組
不使用保留字

爲何使用 JSON？

對於 AJAX 應用程序來講，JSON 比 XML 更快更易使用：java

使用 XML

讀取 XML 文檔
使用 XML DOM 來循環遍歷文檔
讀取值並存儲在變量中

使用 JSON

讀取 JSON 字符串
用 eval() 處理 JSON 字符串

JSON語法jquery

JSON 語法是 JavaScript 語法的子集。git

JSON 語法規則

JSON 語法是 JavaScript 對象表示法語法的子集。github

數據在名稱/值對中
數據由逗號分隔
大括號保存對象
中括號保存數組

JSON 名稱/值對

JSON 數據的書寫格式是：名稱/值對。web

名稱/值對包括字段名稱（在雙引號中），後面寫一個冒號，而後是值：ajax

"name" : "菜鳥教程"

這很容易理解，等價於這條 JavaScript 語句：編程

name = "菜鳥教程"

JSON 值

JSON 值能夠是：

數字（整數或浮點數）
字符串（在雙引號中）
邏輯值（true 或 false）
數組（在中括號中）
對象（在大括號中）
null

JSON 數字

JSON 數字能夠是整型或者浮點型：

{ "age":30 }

JSON 對象

JSON 對象在大括號（{}）中書寫：

對象能夠包含多個名稱/值對：

{ "name":"菜鳥教程" , "url":"www.runoob.com" }

這一點也容易理解，與這條 JavaScript 語句等價：

name = "菜鳥教程" url = "www.runoob.com"

JSON 數組

JSON 數組在中括號中書寫：

數組可包含多個對象：

{ "sites": [ { "name":"菜鳥教程" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ] }

在上面的例子中，對象 "sites" 是包含三個對象的數組。每一個對象表明一條關於某個網站（name、url）的記錄。

JSON 布爾值

JSON 布爾值能夠是 true 或者 false：

{ "flag":true }

JSON null

JSON 能夠設置 null 值：

{ "runoob":null }

JSON 使用 JavaScript 語法

由於 JSON 使用 JavaScript 語法，因此無需額外的軟件就能處理 JavaScript 中的 JSON。

經過 JavaScript，您能夠建立一個對象數組，並像這樣進行賦值：

實例

var sites = [ { "name":"runoob" , "url":"www.runoob.com" }, { "name":"google" , "url":"www.google.com" }, { "name":"微博" , "url":"www.weibo.com" } ];

能夠像這樣訪問 JavaScript 對象數組中的第一項（索引從 0 開始）：

sites[0].name;

返回的內容是：

runoob

能夠像這樣修改數據：

sites[0].name="菜鳥教程";

JSON 文件

JSON 文件的文件類型是 ".json"
JSON 文本的 MIME 類型是 "application/json"

JSON對象

對象語法

實例

{ "name":"runoob", "alexa":10000, "site":null }

JSON 對象使用在大括號({})中書寫。

對象能夠包含多個 key/value（鍵/值）對。

key 必須是字符串，value 能夠是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

key 和 value 中使用冒號(:)分割。

每一個 key/value 對使用逗號(,)分割。

訪問對象值

你可使用點號（.）來訪問對象的值：

實例

var myObj, x; myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj.name;

你也可使用中括號（[]）來訪問對象的值：

實例

var myObj, x; myObj = myObj = { "name":"runoob", "alexa":10000, "site":null }; x = myObj["name"];

循環對象

你可使用 for-in 來循環對象的屬性：

實例

var myObj = { "name":"runoob", "alexa":10000, "site":null }; for (x in myObj) { document.getElementById("demo").innerHTML += x + "<br>"; }

在 for-in 循環對象的屬性時，使用中括號（[]）來訪問屬性的值：

實例

var myObj = { "name":"runoob", "alexa":10000, "site":null }; for (x in myObj) { document.getElementById("demo").innerHTML += myObj[x] + "<br>"; }

嵌套 JSON 對象

JSON 對象中能夠包含另一個 JSON 對象：

實例

myObj = { "name":"runoob", "alexa":10000, "sites": { "site1":"www.runoob.com", "site2":"m.runoob.com", "site3":"c.runoob.com" } }

你可使用點號(.)或者中括號([])來訪問嵌套的 JSON 對象。

實例

x = myObj.sites.site1; // 或者 x = myObj.sites["site1"];

修改值

你可使用點號(.)來修改 JSON 對象的值：

實例

myObj.sites.site1 = "www.google.com";

你可使用中括號([])來修改 JSON 對象的值：

實例

myObj.sites["site1"] = "www.google.com";

刪除對象屬性

咱們可使用 delete 關鍵字來刪除 JSON 對象的屬性：

實例

delete myObj.sites.site1;

你可使用中括號([])來刪除 JSON 對象的屬性：

實例

delete myObj.sites["site1"]

JSON數組

數組做爲 JSON 對象

實例

[ "Google", "Runoob", "Taobao" ]

JSON 數組在中括號中書寫。

JSON 中數組值必須是合法的 JSON 數據類型（字符串, 數字, 對象, 數組, 布爾值或 null）。

JavaScript 中，數組值能夠是以上的 JSON 數據類型，也能夠是 JavaScript 的表達式，包括函數，日期，及 undefined。

JSON 對象中的數組

對象屬性的值能夠是一個數組：

實例

{ "name":"網站", "num":3, "sites":[ "Google", "Runoob", "Taobao" ] }

咱們可使用索引值來訪問數組：

實例

x = myObj.sites[0];

循環數組

你可使用 for-in 來訪問數組：

實例

for (i in myObj.sites) { x += myObj.sites[i] + "<br>"; }

你也可使用 for 循環：

實例

for (i = 0; i < myObj.sites.length; i++) { x += myObj.sites[i] + "<br>"; }

嵌套 JSON 對象中的數組

JSON 對象中數組能夠包含另一個數組，或者另一個 JSON 對象：

實例

myObj = { "name":"網站", 

"num":3, 

"sites": [ { "name":"Google", "info":[ "Android", "Google 搜索", "Google 翻譯" ] }, 
　　　　　　　{ "name":"Runoob", "info":[ "菜鳥教程", "菜鳥工具", "菜鳥微信" ] }, 
　　　　　　{ "name":"Taobao", "info":[ "淘寶", "網購" ] } 
]
 }

咱們可使用 for-in 來循環訪問每一個數組：

實例

for (i in myObj.sites) { x += "<h1>" + myObj.sites[i].name + "</h1>"; for (j in myObj.sites[i].info) { x += myObj.sites[i].info[j] + "<br>"; } }

修改數組值

你可使用索引值來修改數組值：

實例

myObj.sites[1] = "Github";

刪除數組元素

咱們可使用 delete 關鍵字來刪除數組元素：

實例

delete myObj.sites[1];

JSON.parse()

JSON 一般用於與服務端交換數據。

在接收服務器數據時通常是字符串。

咱們可使用 JSON.parse() 方法將數據轉換爲 JavaScript 對象。

語法

JSON.parse(text[, reviver])

參數說明：

text:必需，一個有效的 JSON 字符串。
reviver: 可選，一個轉換結果的函數，將爲對象的每一個成員調用此函數。

JSON 解析實例

例如咱們從服務器接收了如下數據：

{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }

咱們使用 JSON.parse() 方法處理以上數據，將其轉換爲 JavaScript 對象：

var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }');

解析前要確保你的數據是標準的 JSON 格式，不然會解析出錯。

你可使用咱們的在線工具檢測：https://c.runoob.com/front-end/53。

解析完成後，咱們就能夠在網頁上使用 JSON 數據了：

實例

<p id="demo"></p> <script> var obj = JSON.parse('{ "name":"runoob", "alexa":10000, "site":"www.runoob.com" }'); document.getElementById("demo").innerHTML = obj.name + "：" + obj.site; </script>

從服務端接收 JSON 數據

咱們可使用 AJAX 從服務器請求 JSON 數據，並解析爲 JavaScript 對象。

實例

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myObj.name; } }; xmlhttp.open("GET", "/try/ajax/json_demo.txt", true); xmlhttp.send();

查看服務端數據： json_demo.txt

從服務端接收數組的 JSON 數據

若是從服務端接收的是數組的 JSON 數據，則 JSON.parse 會將其轉換爲 JavaScript 數組：

實例

var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myArr = JSON.parse(this.responseText); document.getElementById("demo").innerHTML = myArr[1]; } }; xmlhttp.open("GET", "/try/ajax/json_demo_array.txt", true); xmlhttp.send();

查看服務端數據： json_demo_array.txt

異常

解析數據

JSON 不能存儲 Date 對象。

若是你須要存儲 Date 對象，須要將其轉換爲字符串。

以後再將字符串轉換爲 Date 對象。

實例

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; var obj = JSON.parse(text); obj.initDate = new Date(obj.initDate); document.getElementById("demo").innerHTML = obj.name + "建立日期: " + obj.initDate;

咱們能夠啓用 JSON.parse 的第二個參數 reviver，一個轉換結果的函數，對象的每一個成員調用此函數。

實例

var text = '{ "name":"Runoob", "initDate":"2013-12-14", "site":"www.runoob.com"}'; var obj = JSON.parse(text, function (key, value) { if (key == "initDate") { return new Date(value); } else { return value; }}); document.getElementById("demo").innerHTML = obj.name + "建立日期：" + obj.initDate;

解析函數

JSON 不容許包含函數，但你能夠將函數做爲字符串存儲，以後再將字符串轉換爲函數。

實例

var text = '{ "name":"Runoob", "alexa":"function () {return 10000;}", "site":"www.runoob.com"}'; var obj = JSON.parse(text); obj.alexa = eval("(" + obj.alexa + ")"); document.getElementById("demo").innerHTML = obj.name + " Alexa 排名：" + obj.alexa();

不建議在 JSON 中使用函數。

瀏覽器支持

主流瀏覽器都支持 JSON.parse() 函數：

Firefox 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4

JSON.stringify()

JSON 一般用於與服務端交換數據。

在向服務器發送數據時通常是字符串。

咱們可使用 JSON.stringify() 方法將 JavaScript 對象轉換爲字符串。

語法

JSON.stringify(value[, replacer[, space]])

參數說明：

value:
必需，一個有效的 JSON 字符串。
replacer:
可選。用於轉換結果的函數或數組。

若是 replacer 爲函數，則 JSON.stringify 將調用該函數，並傳入每一個成員的鍵和值。使用返回值而不是原始值。若是此函數返回 undefined，則排除成員。根對象的鍵是一個空字符串：""。

若是 replacer 是一個數組，則僅轉換該數組中具備鍵值的成員。成員的轉換順序與鍵在數組中的順序同樣。當 value 參數也爲數組時，將忽略 replacer 數組。
space:
可選，文本添加縮進、空格和換行符，若是 space 是一個數字，則返回值文本在每一個級別縮進指定數目的空格，若是 space 大於 10，則文本縮進 10 個空格。space 有可使用非數字，如：\t。

JavaScript 對象轉換

例如咱們向服務器發送如下數據：

 
   var 
   obj 
    =  
   { 
   " 
   name 
   " 
   : 
   " 
   runoob 
   " 
   ,  
   " 
   alexa 
   " 
   : 
   10000 
   ,  
   " 
   site 
   " 
   : 
   " 
   www.runoob.com 
   " 
   } 
   ; 
  

咱們使用 JSON.stringify() 方法處理以上數據，將其轉換爲字符串：

 
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   obj 
   ) 
   ; 
  

myJSON 爲字符串。

咱們能夠將 myJSON 發送到服務器：

實例

 
   var 
   obj 
    =  
   { 
   " 
   name 
   " 
   : 
   " 
   runoob 
   " 
   ,  
   " 
   alexa 
   " 
   : 
   10000 
   ,  
   " 
   site 
   " 
   : 
   " 
   www.runoob.com 
   " 
   } 
   ;  
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   obj 
   ) 
   ;  
   document 
   . 
   getElementById 
   ( 
   " 
   demo 
   " 
   ) 
   . 
   innerHTML 
    =  
   myJSON 
   ; 
  

嘗試一下 »

JavaScript 數組轉換

咱們也能夠將 JavaScript 數組轉換爲 JSON 字符串：

實例

 
   var 
   arr 
    =  
   [ 
   " 
   Google 
   " 
   ,  
   " 
   Runoob 
   " 
   ,  
   " 
   Taobao 
   " 
   ,  
   " 
   Facebook 
   " 
   ] 
   ;  
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   arr 
   ) 
   ; 
  

myJSON 爲字符串。

咱們能夠將 myJSON 發送到服務器：

實例

 
   var 
   arr 
    =  
   [ 
   " 
   Google 
   " 
   ,  
   " 
   Runoob 
   " 
   ,  
   " 
   Taobao 
   " 
   ,  
   " 
   Facebook 
   " 
   ] 
   ;  
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   arr 
   ) 
   ;  
   document 
   . 
   getElementById 
   ( 
   " 
   demo 
   " 
   ) 
   . 
   innerHTML 
    =  
   myJSON 
   ; 
  

嘗試一下 »

異常

解析數據

JSON 不能存儲 Date 對象。

JSON.stringify() 會將全部日期轉換爲字符串。

實例

 
   var 
   obj 
    =  
   { 
   " 
   name 
   " 
   : 
   " 
   Runoob 
   " 
   ,  
   " 
   initDate 
   " 
   : 
   new 
   Date 
   ( 
   ) 
   ,  
   " 
   site 
   " 
   : 
   " 
   www.runoob.com 
   " 
   } 
   ;  
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   obj 
   ) 
   ;  
   document 
   . 
   getElementById 
   ( 
   " 
   demo 
   " 
   ) 
   . 
   innerHTML 
    =  
   myJSON 
   ; 
  

嘗試一下 »

以後你能夠再將字符串轉換爲 Date 對象。

解析函數

JSON 不容許包含函數，JSON.stringify() 會刪除 JavaScript 對象的函數，包括 key 和 value。

實例

 
   var 
   obj 
    =  
   { 
   " 
   name 
   " 
   : 
   " 
   Runoob 
   " 
   ,  
   " 
   alexa 
   " 
   : 
   function 
   ( 
   ) 
   { 
   return 
   10000 
   ; 
   } 
   ,  
   " 
   site 
   " 
   : 
   " 
   www.runoob.com 
   " 
   } 
   ;  
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   obj 
   ) 
   ;  
   document 
   . 
   getElementById 
   ( 
   " 
   demo 
   " 
   ) 
   . 
   innerHTML 
    =  
   myJSON 
   ; 
  

嘗試一下 »

咱們能夠在執行 JSON.stringify() 函數前將函數轉換爲字符串來避免以上問題的發生：

實例

 
   var 
   obj 
    =  
   { 
   " 
   name 
   " 
   : 
   " 
   Runoob 
   " 
   ,  
   " 
   alexa 
   " 
   : 
   function 
   ( 
   ) 
   { 
   return 
   10000 
   ; 
   } 
   ,  
   " 
   site 
   " 
   : 
   " 
   www.runoob.com 
   " 
   } 
   ;  
   obj 
   . 
   alexa 
    =  
   obj 
   . 
   alexa 
   . 
   toString 
   ( 
   ) 
   ;  
   var 
   myJSON 
    =  
   JSON 
   . 
   stringify 
   ( 
   obj 
   ) 
   ;  
   document 
   . 
   getElementById 
   ( 
   " 
   demo 
   " 
   ) 
   . 
   innerHTML 
    =  
   myJSON 
   ; 
  

嘗試一下 »

不建議在 JSON 中使用函數。

瀏覽器支持

主流瀏覽器都支持 JSON.stringify() 函數：

Firefox 3.5
Internet Explorer 8
Chrome
Opera 10
Safari 4

JSON使用

把 JSON 文本轉換爲 JavaScript 對象

JSON 最多見的用法之一，是從 web 服務器上讀取 JSON 數據（做爲文件或做爲 HttpRequest），將 JSON 數據轉換爲 JavaScript 對象，而後在網頁中使用該數據。

爲了更簡單地爲您講解，咱們使用字符串做爲輸入進行演示（而不是文件）。

JSON 實例 - 來自字符串的對象

建立包含 JSON 語法的 JavaScript 字符串：

var txt = '{ "sites" : [' + '{ "name":"菜鳥教程" , "url":"www.runoob.com" },' + '{ "name":"google" , "url":"www.google.com" },' + '{ "name":"微博" , "url":"www.weibo.com" } ]}';

因爲 JSON 語法是 JavaScript 語法的子集，JavaScript 函數 eval() 可用於將 JSON 文本轉換爲 JavaScript 對象。

eval() 函數使用的是 JavaScript 編譯器，可解析 JSON 文本，而後生成 JavaScript 對象。必須把文本包圍在括號中，這樣才能避免語法錯誤：

var obj = eval ("(" + txt + ")");

在網頁中使用 JavaScript 對象：

實例

var txt = '{ "sites" : [' + '{ "name":"菜鳥教程" , "url":"www.runoob.com" },' + '{ "name":"google" , "url":"www.google.com" },' + '{ "name":"微博" , "url":"www.weibo.com" } ]}'; var obj = eval ("(" + txt + ")"); document.getElementById("name").innerHTML=obj.sites[0].name document.getElementById("url").innerHTML=obj.sites[0].url

JSON 解析器

eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。

使用 JSON 解析器將 JSON 轉換爲 JavaScript 對象是更安全的作法。JSON 解析器只能識別 JSON 文本，而不會編譯腳本。

在瀏覽器中，這提供了原生的 JSON 支持，並且 JSON 解析器的速度更快。

較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。

Web 瀏覽器支持	Web 軟件支持
Firefox (Mozilla) 3.5 Internet Explorer 8 Chrome Opera 10 Safari 4	jQuery Yahoo UI Prototype Dojo ECMAScript 1.5

對於較老的瀏覽器，可以使用 JavaScript 庫： https://github.com/douglascrockford/JSON-js

JSON 格式最初是 originally specified by Douglas Crockford

JSONP___其實我想說我有點沒看懂 PHP不懂啊-_-

本章節咱們將向你們介紹 JSONP 的知識。

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

爲何咱們從不一樣的域（網站）訪問數據須要一個特殊的技術(JSONP )呢？這是由於同源策略。

同源策略，它是由Netscape提出的一個著名的安全策略，如今全部支持JavaScript 的瀏覽器都會使用這個策略。

JSONP 應用

1. 服務端JSONP格式數據

如客戶想訪問 : http://www.runoob.com/try/ajax/jsonp.php?jsonp=callbackFunction。

假設客戶指望返回JSON數據：["customername1","customername2"]。

真正返回到客戶端的數據顯示爲: callbackFunction(["customername1","customername2"])。

服務端文件jsonp.php代碼爲：

jsonp.php 文件代碼

<?php header('Content-type: application/json'); //獲取回調函數名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json數據 $json_data = '["customername1","customername2"]'; //輸出jsonp格式的數據 echo $jsoncallback . "(" . $json_data . ")"; ?>

2. 客戶端實現 callbackFunction 函數

<script type="text/javascript"> function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; } </script>

頁面展現

<div id="divCustomers"></div>

客戶端頁面完整代碼

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 實例</title> </head> <body> <div id="divCustomers"></div> <script type="text/javascript">
function callbackFunction(result, methodName) { var html = '<ul>'; for(var i = 0; i < result.length; i++) { html += '<li>' + result[i] + '</li>'; } html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; }
</script> <script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script> </body> </html>

jQuery 使用 JSONP

以上代碼可使用 jQuery 代碼實例：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JSONP 實例</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head> <body> <div id="divCustomers"></div> <script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) { var html = '<ul>'; for(var i = 0; i < data.length; i++) { html += '<li>' + data[i] + '</li>'; } html += '</ul>'; $('#divCustomers').html(html); });
</script> </body> </html>

大概就到這了，關於JSON基本瞭解。JSONP確實須要進一步理解（PHP）。稍後有新的東西會進行補充。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。