JavaScript簡介歷史開發工具基本語法運算式分枝迴圈函數陣列物件導向原型封裝繼承多型this控制流程進階功能Eval 函數ClosureJSONP小書籤字串正規表達式除錯方法伺服端播 midicookie套件ccc函式庫2D 繪圖3D 繪圖影像處理訊號處理語音處理數學計算tex 數學式格式轉換桌面應用自然語言地理資訊平台Node.jsjQuerynumeric.jsTitanium引擎語法作品翻譯精靈繪圖精靈DotWiki流程前端工程師後端工程師css訊息相關網站參考文獻最新修改簡體版English |
JSON 資料交換格式目前網路上最常使用的資料交換格式是 XML，但是 XML 文件很繁瑣且囉嗦，讓使用者撰寫不方便，而且不容易嵌入網頁中進行處理。為了讓網頁上的共通程式語言 JavaScript 可以輕易的交換資料，甚至將資料當成程式進行處理，於是根據 JavaScript 的物件宣告寫法，發展出一種簡捷的資料交換格式，稱為 JSON （Javascript Object Notation），您可以將 JSON 當成資料，或者直接當成 JavaScript 程式，並利用 eval() 函數執行該程式。 以下是一個採用 JSON 格式的朋友資料範例，該範例中有兩個朋友，一個是 John, 22 歲，另一個是 Mary, 28 歲。 範例一：以 JSON 宣告兩個朋友的資料 { "friends": [ {"name": "John", "age": 22 } {"name": "Mary", "age": 28 } ] } JSON 雖然可以直接內嵌在 JavaScript 當中使用，例如您可以用 eval() 函數直接執行某段 JASON 程式，但是由於瀏覽器的安全限制問題，會禁止跨越網域的 JSON 程式碼執行。這是因為瀏覽器採用了 Sandbox (沙盒）機制所引起的。 JSONP — 動態載入 JavaScript 的方法為了讓 JSON 程式碼可以被傳遞後執行，於是發展出了 JSONP (JSON with Padding) 這個非官方協議，JSONP 繞過了瀏覽器的安全限制問題，利用 JavaScript Callback 機制。其方法是利用 JavaScript 動態的載入程式到 <script src="…"> 標記的 src 欄位中，以便載入外部的 JSON 資料或 JavaScript 函式庫到網頁中使用的方法。 以下是 Google Code Playground 當中所提供的一個範例，其中的 script.src="….." 與 document.getElementsByTagName('head')[0].appendChild(script); 是 JSONP 的關鍵程式，您可以仔細觀察其中所使用的 JSONP 技巧。 <!-- copyright (c) 2009 Google inc. You are free to copy and use this sample. License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Javascript API Samples</title> </head> <body style="font-family: Arial;border: 0 none;"> <div id="content"></div> <script type="text/javascript"> /* * A technique for avoiding browsers' cross-domain restriction * Allows you to request information cross-domain from client * You request a script from a cross domain * That service must respond in JSON wrapped in a function call you specify */ function myFunc() { if (typeof console != 'undefined') { console.log(arguments); } else { alert('click debug button'); } } var script = document.createElement('script'); script.src = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Dog&callback=myFunc'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); </script> </body> </html> 您可以點選 Google Code Playground - JSONP 的網址已執行該範例，其網址如下。 參考文獻
|
JavaScript 技術 -- JSON 與 JSONP
page revision: 6, last edited: 08 Oct 2010 02:59
Post preview:
Close preview