JSON.stringify()-JSON 使用-JSONP 教程文檔大全學習知識點
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 對象轉換
例如我們向服務器發送以下數據：
varobj = {"name":"runoob", "alexa":10000, "site":"www.dongyibiancheng.com"};
我們使用 JSON.stringify() 方法處理以上數據，將其轉換為字符串：
varmyJSON = JSON.stringify(obj);
myJSON 為字符串。
我們可以將 myJSON 發送到服務器：
實例
varobj = {"name":"runoob", "alexa":10000, "site":"www.runoob.com"};varmyJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;
嘗試一下 »
JavaScript 數組轉換
我們也可以將 JavaScript 數組轉換為 JSON 字符串：
實例
vararr = ["Google", "Runoob", "Taobao", "Facebook"];varmyJSON = JSON.stringify(arr);
myJSON 為字符串。
我們可以將 myJSON 發送到服務器：
實例
vararr = ["Google", "Runoob", "Taobao", "Facebook"];varmyJSON = JSON.stringify(arr);document.getElementById("demo").innerHTML = myJSON;
嘗試一下 »
異常
解析數據
JSON 不能存儲 Date 對象。
JSON.stringify() 會將所有日期轉換為字符串。
實例
varobj = {"name":"Runoob", "initDate":newDate(), "site":"www.runoob.com"};varmyJSON = JSON.stringify(obj);document.getElementById("demo").innerHTML = myJSON;
嘗試一下 »
之後你可以再將字符串轉換為 Date 對象。
解析函數
JSON 不允許包含函數，JSON.stringify() 會刪除 JavaScript 對象的函數，包括 key 和 value。
實例
varobj = {"name":"Runoob", "alexa":function(){return10000;}, "site":"www.runoob.com"};varmyJSON = JSON.stringify(obj); document.getElementById("demo").innerHTML = myJSON;
嘗試一下 »
我們可以在執行 JSON.stringify() 函數前將函數轉換為字符串來避免以上問題的發生：
實例
varobj = {"name":"Runoob", "alexa":function(){return10000;}, "site":"www.runoob.com"};obj.alexa = obj.alexa.toString();varmyJSON = 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 字符串：
vartxt = '{ "sites" : [' +'{ "name":"h5混合開發" , "url":"www.dongyibiancheng.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 對象：
實例
vartxt = '{ "sites" : [' +'{ "name":"h5混合開發" , "url":"www.dongyibiancheng.com" },' +'{ "name":"google" , "url":"www.google.com" },' +'{ "name":"微博" , "url":"www.weibo.com" } ]}'; varobj = eval("(" + txt + ")"); document.getElementById("name").innerHTML=obj.sites[0].namedocument.getElementById("url").innerHTML=obj.sites[0].url
嘗試一下 »
JSON 解析器
eval() 函數可編譯並執行任何 JavaScript 代碼。這隱藏了一個潛在的安全問題。
使用 JSON 解析器將 JSON 轉換為 JavaScript 對象是更安全的做法。JSON 解析器只能識別 JSON 文本，而不會編譯腳本。
在瀏覽器中，這提供了原生的 JSON 支持，而且 JSON 解析器的速度更快。
較新的瀏覽器和最新的 ECMAScript (JavaScript) 標準中均包含了原生的對 JSON 的支持。
| Web 瀏覽器支持 | Web 軟件支持 |
|---|---|
|
|
嘗試一下 »
對於較老的瀏覽器，可使用 JavaScript 庫： https://github.com/douglascrockford/JSON-js
JSON 格式最初是 originally specified by Douglas Crockford
JSONP 教程
本章節我們將向大家介紹 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 文件代碼
<?phpheader('Content-type: application/json');//獲取回調函數名$jsoncallback = htmlspecialchars($_REQUEST['jsoncallback']);//json數據$json_data = '["customername1","customername2"]';//輸出jsonp格式的數據echo$jsoncallback . "(" . $json_data . ")";?>
2. 客戶端實現 callbackFunction 函數
<scripttype="text/javascript">functioncallbackFunction(result, methodName){varhtml = '<ul>'; for(vari = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>'; }html += '</ul>'; document.getElementById('divCustomers').innerHTML = html;}</script>
頁面展示
<divid="divCustomers"></div>
客戶端頁面完整代碼
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JSONP 實例</title></head><body><divid="divCustomers"></div><scripttype="text/javascript">
functioncallbackFunction(result, methodName){varhtml = '<ul>'; for(vari = 0; i < result.length; i++){html += '<li>' + result[i] + '</li>'; }html += '</ul>'; document.getElementById('divCustomers').innerHTML = html; }
</script><scripttype="text/javascript"src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script></body></html>
jQuery 使用 JSONP
以上代碼可以使用 jQuery 代碼實例：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>JSONP 實例</title><scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script></head><body><divid="divCustomers"></div><script>
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data){varhtml = '<ul>'; for(vari = 0; i < data.length; i++){html += '<li>' + data[i] + '</li>'; }html += '</ul>'; $('#divCustomers').html(html); });
</script></body></html>