JSON and Microsoft Technologies（翻譯）
本文翻譯CodeProject（連接）上的一篇文章，文章對JSON的概念以及它在微軟一些技術中的應用起到了很是好的掃盲做用，總結得很是好，適合初學者。html
目錄ajax
- 介紹
- 什麼是JavaScript對象？
- 實驗一：理解JavaScript對象
- 實驗二：JavaScript對象數組
- 什麼是XML以及爲何使用XML？
- 什麼是JSON？
- 實驗三：將JSON字符串轉換爲JavaScript對象
- ASP.NET Web Forms中的JSON
- 實驗四：Get Request - JavaScript請求JSON數據
- 實驗五：Post Request – JavaScript發送JSON數據
- ASP.NET MVC中的JSON
- 實驗六：Get Request – JavaScript請求JSON數據
- 實驗七：Post Request – JavaScript發送JSON數據
- WCF中的JSON
- 實驗八：Get Request – JavaScript請求JSON數據
- 實驗九：Post Request – JavaScript發送JSON數據
- Web API中的JSON
- 實驗十：Get Request – JavaScript請求JSON數據
- 實驗十一：Post Request – JavaScript發送JSON數據
- 總結
介紹json
經過這篇文章，咱們將學習JSON的概念以及JavaScript是如何經過JSON與微軟的一些技術（如ASP.NET MVC、ASP.NET Web Forms、WCF以及Web API）進行數據交互的。數組
什麼是JavaScript對象？瀏覽器
JavaScript中包含兩類事物：變量和函數。變量存儲數據，函數負責執行特定動做。變量能夠是int、string以及float或者對象類型。「JavaScript對象是一種包含了變量和函數的封裝體」。服務器
實驗一：理解JavaScript對象網絡
要理解JavaScript對象，咱們並不須要建立一個ASP.NET MVC或者Web Forms的項目，而只須要建立一個簡單的HTML文件便可。app
第一步.打開Visual Studio，點擊 文件->新建->文件，選擇HTML類型文件以下圖函數
第二步.按照如下方式建立JavaScript對象post
第三步.使用「.」去訪問JavaScript對象的屬性
第四步.保存該HTML文件
第五步.使用你的瀏覽器打開該HTML文件
輸出：
實驗二：JavaScript對象數組
數組被定義成包含相同類型元素的集合。使人興奮的是，JavaScript中也支持對象數組。
第一步.與實驗一中相同
第二步.按照如下方式建立一個JavaScript對象數組
第三步.用瀏覽器打開HTML文件，見下圖
什麼是XML以及爲何使用XML？
在上圖中，一我的試圖去跟一隻狗交談。他們會正確溝通嗎？固然不能！他們各自使用各自的表達方式，而且都不能理解對方。
解決方案？
惟一的解決方案即是要有一個共同溝通標準，若是他們使用一種相互都能理解的方式去表達本身的想法，那麼問題就解決了。
再回過頭來看看，咱們會發現任何兩個不一樣的系統之間要想正常交互，它們都必須遵循一個共同的交互標準（如網絡通訊協議HTTP、TCP/IP等，譯者注）。
XML
XML或者擴展標記語言是咱們傳輸數據（消息）時須要遵照的一種規範。在互聯網世界中，「交互」佔了很重要的一個地位，這尤爲體如今兩個不一樣系統之間。
XML是一種數據傳輸規範，互聯網中的數據能夠按照此規範進行傳輸。幾乎每種技術（系統、平臺）均能理解XML。
XML的一個簡單例子
打個比方，咱們須要在互聯網上傳輸「客戶信息（客戶姓名，地址以及年紀）」，首先咱們須要使用XML將客戶數據表示出來
如下是表示多個客戶數據的XML
XML有哪些缺點？
XML主要有如下兩個缺點
- 解析困難。對於一些輕量級的技術相似JavaScript來講，XML解析並不簡單。
- 數據冗餘。看看上面那個客戶信息的XML例子，咱們能夠看到有不少沒必要要的標籤存在。相比來講，XML要比咱們接下來說到的JSON冗餘很多。
什麼是JSON？
JSON是另一種不一樣平臺（系統、技術）間交換數據的標準。
JSON怎樣表示數據？
它表示數據的方式與JavaScript對象很類似
JSON怎樣表示數據集合？
JSON和JavaScript對象是一個東西嗎？
固然不同。JSON是咱們表示數據（傳遞數據）的一種方式，而JavaScript對象是在內存中存儲數據的變量。它們之間並無直接的關係，JSON被稱爲「JavaScript Object Notation」，由於它們結構很是類似。
JSON有哪些優勢？
- JSON很是簡潔，它由一系列的「鍵/值」組成，而在XML中卻存在大量冗餘的標籤。JSON比XML更輕量級。
- 與XML同樣，JSON是平臺獨立的。幾乎全部技術（平臺、系統）均能識別JSON數據。
- 用JSON表示的數據能夠更容易地轉換成JavaScript對象（由於它兩結構相似），因此對於JavaScript腳原本講，處理JSON更輕鬆。
實驗三：將JSON字符串轉換爲JavaScript對象
第一步.跟以前同樣，建立一個HTML頁面。
第二步.按照如下方式定義兩個JSON字符串
簡單JSON串：
包含多個客戶信息的JSON串：
第三步.使用JavaScript中的JSON.parse方法將JSON串轉換成JavaScript對象
第四步.按照下面的方式訪問JavaScript對象中的屬性
第五步.保存HTML文件，使用瀏覽器打開查看
注：現實開發過程當中，在不一樣的系統（平臺）內，JSON串可能被轉換成各類不一樣的數據類型，如ASP.NET、WCF、JAVA等。
慶幸的是，有些技術能夠自動轉換JSON串。好比當咱們直接發送JavaScript對象時，它先被自動轉換爲JSON串，發給服務器，接着服務器端自動將該JSON串轉換成服務器端的數據類型，反之亦然。
接下來的每一個實驗都是驗證JSON在Microsoft各類技術中的應用。在JavaScript代碼中，咱們使用到了jQuery。
初始化準備：
咱們定義一個C#類，叫客戶類
ASP.NET Web Forms中的JSON
在ASP.NET Web Forms中，咱們要使用到HTTP handlers（ashx文件）.
實驗四：Get Request - JavaScript請求JSON數據
第一步.建立Web應用
第二步.建立HTTP Handler
右鍵項目，點擊「添加>新建項」，新建ashx文件，命名CustomerWebForm.ashx
第三步.在ashx文件中編寫代碼
在默認的ProcessRequest方法中添加如下代碼：
- 建立一個Customer對象
- 使用System.Web.Script.Serialization.JavaScriptSerialier將建立的Customer對象轉換成JSON串
- 將Response.ContentType由默認的text/plain改成text/json
- 將JSON串寫入Response的輸出流
第四步.編寫客戶端（瀏覽器）請求JSON數據的代碼
- 在項目中添加新項，新建一個aspx頁面，aspx頁面中添加jQuery引用
- 在頁面中添加一個按鈕，給它綁定點擊事件
- 在<HEAD>標籤內部添加<Script>標籤，並添加如下代碼
第五步.執行測試
點擊F5運行應用，點擊頁面中的Button按鈕，查看輸出
實驗五：Post Request – JavaScript發送JSON數據
第一步.在實驗四的項目基礎上，再建立一個CustomerPost.ashx文件
第二步.在ProcessRequest方法中得到客戶端發送來的JSON
第三步.編寫客戶端（瀏覽器）發送JSON的代碼
- 在原來的aspx頁面中添加另一個Button
- 在<Script>標籤中添加如下JavaScript腳本
第四步.執行測試
按F5運行應用，點擊新添加的Button按鈕，查看輸出
如今咱們得出結論：
- JavaScript與Web Forms之間怎樣創建通信；
- JavaScript與Web Forms之間怎樣傳遞JSON數據。
下面咱們來試着在ASP.NET MVC中作一樣的事情。
ASP.NET MVC中的JSON
實驗六：Get Request – JavaScript請求JSON數據
第一步.建立一個MVC4的應用程序
第二步.建立Controller和Action方法
- 添加一個名爲JsonTestController的控制器
- 添加一個名爲Index的Action方法
- 添加一個名爲JsonData的Action方法
- 在JsonData方法中建立一個Customer對象並初始化屬性
- 在JsonData方法中調用基類的Json方法，該方法會返回一個JsonResult對象，該對象能夠將Customer對象轉換成JSON串
第三步.在客戶端（瀏覽器）添加請求JSON數據的代碼
- 右鍵名爲Index的Action，選擇「添加View」爲它建立一個叫Index的View
- 跟在Web Forms中所作的操做同樣
在View中引用jQuery
添加一個Button按鈕，並綁定點擊事件
在頁面<script>標籤中添加如下JavaScript代碼
第四步.運行測試
按F5運行應用
實驗七：Post Request – JavaScript發送JSON數據
第一步.在原有項目相同的Controller中，建立一個名爲JsonPost的Action方法
第二步.編寫客戶端（瀏覽器）發送JSON數據的代碼
- 在原有View（aspx頁面）中添加另外一個Button
- 在<script>標籤中添加如下JavaScript代碼
注：在ASP.NET MVC中，並無要求你顯式地將JavaScript對象轉換成JSON串，反之亦然。這些工做系統內部默認自動完成了。
第三步.運行測試
按F5運行應用，點擊Button按鈕查看輸出
WCF中的JSON
接下來，服務器端技術咱們使用WCF REST。
實驗八：Get Request – JavaScript請求JSON數據
第一步.建立WCF項目
第二步.移除沒必要要的文件
移除IService1.cs和Service1.svc文件
第三步.建立新服務
右鍵項目，點擊添加>新建項。選擇WCF Service，命名爲JsonTest。這個過程會在項目中建立兩個新內容，一個是IJsonTest.cs（服務協議），另外一個是JsonTest.svc（具體服務）。
第四步.建立操做協議
打開IJsonTest.cs文件，添加一個名爲GetJsonData的方法
第五步.實現操做
打開JsonTest.svc文件，實現GetJsonData方法
第六步.建立一個Rest節點
- 打開Web.config配置文件
- 找到System.ServiceModel節點
- 在該節點內部新增長services標籤，在新增長的標籤內部建立service標籤，指向咱們剛建立的服務
- 在新增長的service節點中做以下配置
第七步.給GetJsonData方法添加WebInvoke屬性
第八步.在客戶端（瀏覽器）中編寫請求JSON數據的代碼
- 新建一個HTML文件，命名爲WCFRestClient.html，在頁面中引用jQuery
- 跟前面幾個實驗同樣，在頁面中添加一個Button按鈕，並綁定點擊事件
第九步.運行測試
按F5運行，打開WCFRestClient.html頁面，點擊按鈕
實驗九：Post Request – JavaScript發送JSON數據
第一步.建立新的操做協議
在IJsonTest.cs中再新添加一個方法，命名爲PostJsonData
第二步.實現操做
打開JsonTest.svc文件，實現剛新添加的PostJsonData方法
第三步.給PostJsonData方法添加WebInvoke屬性
第四步.在客戶端（瀏覽器）中編寫發送JSON的代碼
- 在原來的WCFRestClient.html頁面中，再新加一個Button按鈕，綁定點擊事件
- 在<script>標籤中編寫以下JavaScript代碼
注意再也不是使用$.post方法，而是使用$.ajax。由於咱們須要設置contenttype屬性爲application/json。$.post是$.ajax的一個封裝，沒有$.ajax靈活。
第五步.運行測試
按F5運行應用
Web API中的JSON
咱們知道，WCF Rest讓咱們能夠建立HTTP服務，可是，它真正的目的是爲了支持SOA。在微軟技術中，咱們還可使用ASP.NET Web API來建立HTTP服務。
我未來會着重討論Web API和WCF Rest。此次咱們就把注意力集中在WebAPI與JavaScript的交互上。
實驗十：Get Request – JavaScript請求JSON數據
第一步.建立Web API項目
打開Visual Studio，點擊文件>新建>項目，選擇ASP.NET MVC4項目。在模板選擇對話框中，選擇WebAPI，點擊OK
第二步.移除全部沒必要要的文件
移除全部已經存在的Controller，View以及CSS文件。
第三步.建立APIController
- 右鍵Controller，選擇添加>Controller
- 在添加Controller對話框中鍵入名稱，如JsonController
- 選擇一個空白的API Controller模板
- 點擊OK
第四步.建立Action方法
你會發現JsonController的基類是APIController（不是Controller，譯者注），接下來在JsonController類中新加一個名爲GET的Action方法
第五步.在客戶端（瀏覽器）中編寫請求JSON數據的JavaScript代碼
- 建立一個新的Controller，命名爲TestingController。注意這裏的TestingController再也不派生自APIController。
- 在TestingController中新添加名爲Index的Action方法
- 右鍵名爲Index的Action方法，爲其添加View，命名爲index
- 在新建立的View中引用jQuery
- 在新建立的View中添加一個Button按鈕，綁定點擊事件
- 在<script>標籤中編寫以下JavaScript代碼
第六步.運行測試
按F5運行程序
實驗十一：Post Request – JavaScript發送JSON數據
第一步.在上面的JsonController中新加一個名爲Post的Action方法
第二步.在客戶端（瀏覽器）中編寫發送JSON數據的代碼
- 在原有的View頁面新增長一個Button按鈕，綁定點擊事件
- 在<script>標籤中添加以下JavaScript腳本
第三步.運行測試
最後，咱們測試完了JSON在全部與微軟有關技術中的應用。
總結
經過本文，咱們學習了JSON的概念、JSON的優勢以及它在微軟技術中的一些應用。
- 1. JSON and Microsoft Technologies（翻譯）
- 2. [轉]JSON and Microsoft Technologies（翻譯）
- 3. 翻譯-Core Technologies
- 4. Exam AZ-300: Microsoft Azure Architect Technologies
- 5. Key Technologies Primer 讀書筆記，翻譯 --- Struct 學習 1
- 6. Massive MIMO and beamforming technologies solve the
- 7. [翻譯]Microsoft COCO-Common Objects in Context
- 8. Publishing and Deployment >> Publishing to IIS 翻譯
- 9. [翻譯]JavaScript Scoping and Hoisting
- 10. （翻譯）拖拽（Drag and drop）
- 更多相關文章...
- • PHP JSON - PHP教程
- • R JSON 文件 - R 語言教程
- • RxJava操作符（七）Conditional and Boolean
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. JSON and Microsoft Technologies（翻譯）
- 2. [轉]JSON and Microsoft Technologies（翻譯）
- 3. 翻譯-Core Technologies
- 4. Exam AZ-300: Microsoft Azure Architect Technologies
- 5. Key Technologies Primer 讀書筆記，翻譯 --- Struct 學習 1
- 6. Massive MIMO and beamforming technologies solve the
- 7. [翻譯]Microsoft COCO-Common Objects in Context
- 8. Publishing and Deployment >> Publishing to IIS 翻譯
- 9. [翻譯]JavaScript Scoping and Hoisting
- 10. （翻譯）拖拽（Drag and drop）