2018年3月20日14點(diǎn)26分

前言

• 前后分離逐漸在整個(gè)WEB應(yīng)用開(kāi)發(fā)中成為主流，而作為前后端交互的主要數(shù)據(jù)格式，對(duì)JSON的認(rèn)識(shí)一直停留在花括號(hào)包裹的冒號(hào)分割的鍵值對(duì)的理解中
• 在實(shí)際的項(xiàng)目開(kāi)發(fā)中，不論是在從web頁(yè)面端發(fā)起的請(qǐng)求使用JSON作為參數(shù)的場(chǎng)景，還是服務(wù)端響應(yīng)回JSON碰到過(guò)些問(wèn)題，困擾了挺久，才發(fā)現(xiàn)自己對(duì)JSON的了解不夠所導(dǎo)致的
• 歸根到底，很多時(shí)候我以為是BUG的問(wèn)題其實(shí)不是BUG，是我自己知識(shí)儲(chǔ)備不夠(也就是無(wú)知)導(dǎo)致的
• 就像是某不知名碼農(nóng)所言，對(duì)于日常使用百度的大部分碼農(nóng)而言，所謂技術(shù)問(wèn)題，歸根到底其實(shí)是英語(yǔ)不好的問(wèn)題。人家開(kāi)源軟件文檔擺在哪里，輪子造好了放在哪里，你卻被英語(yǔ)攔住了
• 幸運(yùn)的是，現(xiàn)在人工智能發(fā)展火熱，翻譯作為一個(gè)很大塊的應(yīng)用場(chǎng)景，未來(lái)有很大的想象空間，其實(shí)現(xiàn)在谷歌翻譯也很牛B了，碼農(nóng)門翻身當(dāng)包工頭的日子指日可待，學(xué)好英語(yǔ)，用好谷歌翻譯
• 接下來(lái)，我給大家表演的是，我將《SQL必知必會(huì)》的閱讀進(jìn)度條變消失的過(guò)程中留下來(lái)的筆記

重要概念##

1. JSON中，名稱始終被雙引號(hào)包裹
2. JSON中，值可以是字符串，數(shù)字，布爾值，NULL，對(duì)象或數(shù)組
3. JSON中，名稱-值對(duì)列表被花括號(hào)包裹
4. JSON中，多個(gè)名稱-值對(duì)使用逗號(hào)分隔
5. JSON的媒體類型是application/json

原始數(shù)據(jù)類型

• 原始數(shù)據(jù)類型確切的說(shuō)值得是數(shù)據(jù)中第一位，最基本的一種類型。如數(shù)字（整型，浮點(diǎn)數(shù)，定點(diǎn)數(shù)），字符和字符串，布爾類型等
• 在不同的編程語(yǔ)言中，這類“一成不變”的數(shù)據(jù)類型通常被叫做原始數(shù)據(jù)類型或內(nèi)置類型。這意味著他們的定義和操作都是不能修改的
• 例如，編程語(yǔ)言不會(huì)允許你重新定義兩數(shù)相加的含義
• JSON中的數(shù)據(jù)類型包括：對(duì)象，字符串，數(shù)字，布爾值，NULL，數(shù)組
• 代碼中使用反斜線需要另一個(gè)反斜線對(duì)原反斜線專業(yè)，所以就是雙反斜線（常見(jiàn)于文件路徑問(wèn)題）

JSON數(shù)字和布爾和NULL

• 數(shù)字是一種常見(jiàn)的用于傳遞數(shù)據(jù)的信息片段
• 在JSON中，布爾類型僅使用小寫(xiě)形式：true或false，任何其他形式的寫(xiě)法都會(huì)報(bào)錯(cuò)
• 對(duì)于一無(wú)所有的東西，你可能覺(jué)得用0來(lái)描述比較合適，比如我有0個(gè)手表。但事實(shí)是，0是一個(gè)數(shù)字，這意味著本質(zhì)上是在計(jì)數(shù)
• 在編程中，null就是用來(lái)表示0，一無(wú)所有，不存在等意思
• 在JavaScript中，undefin是在嘗試獲取一些不存在的對(duì)象或變量時(shí)返回的結(jié)果。undefined與那些聲明的名稱和值都不存在的對(duì)象或變量有關(guān)，而null僅與對(duì)象或變量的值有關(guān)。null是一個(gè)表示“沒(méi)有值”的值
• 在JSON中，null必須使用小寫(xiě)形式

JSON數(shù)組

• 數(shù)組始終應(yīng)被方括號(hào)[]包裹
• 一個(gè)數(shù)組為每一個(gè)“位置”都賦予了一個(gè)索引

JSON中的對(duì)象類型

• 對(duì)象類型是使用逗號(hào)分隔的名稱-值對(duì)構(gòu)成的集合，并使用花括號(hào)（{}）包裹
• 對(duì)象和數(shù)字很關(guān)鍵的一個(gè)區(qū)別是：對(duì)象是名稱-值對(duì)構(gòu)成的列表或集合，數(shù)組是值構(gòu)成的集合
• 在JSON中，數(shù)組中所有的值應(yīng)具有相同的數(shù)據(jù)類型

JSON_Schema

• 在大多數(shù)情況下，數(shù)據(jù)交換格式中的數(shù)據(jù)通過(guò)互聯(lián)網(wǎng)或其他網(wǎng)絡(luò)傳輸?shù)浇邮辗?。而接收方?huì)對(duì)數(shù)據(jù)文件的格式，包括其結(jié)構(gòu)和數(shù)據(jù)類型有一個(gè)預(yù)期。
• 所以接收方通常會(huì)提供一個(gè)文檔來(lái)解釋預(yù)期的格式并提供示例
• JSON Schema是數(shù)據(jù)交換中的一種虛擬的“合同”

JSON中的安全問(wèn)題

• JSON本身不會(huì)構(gòu)成什么威脅，畢竟它只是一種數(shù)據(jù)交換格式。它不過(guò)是一種數(shù)據(jù)文件，或者說(shuō)數(shù)據(jù)流
• 跨站腳本攻擊（cross-site scripting，XSS）是注入攻擊的一種。在使用JSON時(shí)常見(jiàn)的安全漏洞通常發(fā)生在JavaScript從服務(wù)器獲取到一段JSON字符串并將其轉(zhuǎn)化為JavaScript對(duì)象時(shí)
• JSON本身僅僅是文本。在編程中，如果想要對(duì)代表對(duì)象的文本進(jìn)行操作，首先要將它轉(zhuǎn)化成對(duì)象并轉(zhuǎn)入內(nèi)存中。這樣，它才能被操作，觀察，并在程序邏輯中使用
• 在JavaScript中，可以使用eval()函數(shù)來(lái)進(jìn)行這一操作。該函數(shù)獲取一段字符串，并對(duì)其進(jìn)行編譯與執(zhí)行

獲取對(duì)象的屬性

var jsonString = '{"animal":"cat"}';
var myObject = eval("("+jsonString+")");
alert(myObject.animal);

被eval()執(zhí)行的alert

var jsonString = "alert('this is bad')";
var myObject - eval("("+jsonString+")");

• 這種情況下，JSON來(lái)源無(wú)法控制，所以可能別用來(lái)執(zhí)行惡意代碼。這種情況下JSON.parse()就是用來(lái)處理這一問(wèn)題的。該函數(shù)僅會(huì)解析JSON，并不會(huì)執(zhí)行腳本

JavaScript中的XMLHttpRequest

JavaScript中的XmlHttpRequest對(duì)象

• 在瀏覽器中輸入http://www.google.com.hk就是在使用HTTP協(xié)議去請(qǐng)求資源。請(qǐng)求JSON資源的代碼也同樣使用HTTP協(xié)議
• 在JavaScript中，使用這種協(xié)議來(lái)發(fā)送這類請(qǐng)求的代碼就是XMLHttpRequest
• JavaScript是一種面向?qū)ο蟮恼Z(yǔ)言，而XmlHttpRequest就是一類對(duì)象。當(dāng)使用new XMLHttpRequest()語(yǔ)法，并將其返回值賦值給一個(gè)變量時(shí)，它就具有了從某一地址請(qǐng)求資源的功能
• JavaScript對(duì)象具有屬性。這些屬性就是名稱-值對(duì)。XMLHttpRequest對(duì)象所擁有的屬性有onreadystatechange,readyState,response,responseText,responseType,responseXML,status,sutatusTest,timeout,ontimeout,upload等

XMLHttpRequest的函數(shù)

• 我們主要關(guān)注XmlHttpRequest中的以下這些可用的函數(shù)：
• open（method,url,async(可選),user(可選),password(可選)）
• send()

XMLHttpRequest的屬性

• onreadystatechange:可以在代碼中為它賦值為一個(gè)函數(shù)
• readyState：返回一個(gè)0~4的值，用來(lái)表示狀態(tài)碼
• status：返回HTTP狀態(tài)嗎
• responseText：當(dāng)請(qǐng)求成功時(shí)，該屬性會(huì)包含作為文本的響應(yīng)體（如我們請(qǐng)求的JSON）

XMLHttpRequest示范代碼

var myXmlHttpRequest = new XmlHttpRequest();
var url = "https://www.google.hk.com?search=Kyou";
myXmlHttpRequest.onreadystatechange = function(){
    if(myXmlHttpRequest.readyState == 4 && 
            myXmlHttpRequest.status= 200){
        var myObejct = JSON.parse(myXmlHttpRequest.responseText);
        var myJSON = JSON.stringify(myObject);
        }
    }
    myXmlHttpRequest.open("GET",url,true);
    myXmlHttpRequest.sent();

序列化問(wèn)題

• 在將一個(gè)對(duì)象轉(zhuǎn)化成JSON文本，或是將JSON文本轉(zhuǎn)換成對(duì)象時(shí)，很可能會(huì)接觸這兩個(gè)專業(yè)術(shù)語(yǔ)：序列化和反序列化
• 序列化是將對(duì)象轉(zhuǎn)換成文本的過(guò)程，反序列化是將文本轉(zhuǎn)換成對(duì)象的過(guò)程
• 上文代碼中使用JavaScript中的JSON.parse()進(jìn)行反序列化操作。響應(yīng)返回的JSON以文本的形式存儲(chǔ)在responseText中。當(dāng)它被JSON.parse()解析后，就不是JSON了，而是JavaScript對(duì)象
• 由于JSON一開(kāi)始不是對(duì)象，所以使用JSON.parse()進(jìn)行反序列化是有必要的。請(qǐng)記住，JSON意思是JavaScript對(duì)象表示法。當(dāng)它以JSON形式存在時(shí)，字面上代表的是以文本形式表示一個(gè)對(duì)象。
• 為了讓JSON變成真正的對(duì)象，需要進(jìn)行反序列化操作
• 在JS中，可以通過(guò)stringify()對(duì)JSON進(jìn)行序列化

跨域資源共享

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:GET,POST
Access-Control-Allow-Origin:*

• ...因?yàn)檫@些公共API的開(kāi)發(fā)者在他們的服務(wù)器上實(shí)現(xiàn)了跨域資源共享(cross-origin resource sharing,CORS)。這些服務(wù)器會(huì)在響應(yīng)頭額外加上一些帶有Access-Control-Allow前綴的屬性
• 這些頭部定義了證書(shū)是否可用，那些HTTP方法是可用的，以及最重要的一點(diǎn)，即允許那些域名，
• Access-Control-Allow-Origin，包含號(hào)的那個(gè)屬性，它表示任意域名都是允許的*

JSON與客戶端框架

• 在我們的生活中，“框架”常被用來(lái)形容必要的支持結(jié)構(gòu)，或是底層結(jié)構(gòu)
• 在計(jì)算機(jī)中，框架并不是一種底層結(jié)構(gòu)，而是一層位于軟件或編程語(yǔ)言之上的為開(kāi)發(fā)者提供支持的結(jié)構(gòu)
• 本質(zhì)上來(lái)講，JavaScript框架可以節(jié)約時(shí)間，讓我們更專注于功能的構(gòu)建。這種節(jié)約時(shí)間，專注重點(diǎn)的框架在計(jì)算機(jī)中也被成為抽象化工具

jQuery

• jQuery框架是為DOM操作服務(wù)的抽象化工具
• 同時(shí)jQuery幫你解決了大部分兼容問(wèn)題，已JSON.parse()為例子，jQuery有自己的解析JSON方法：jQuery.parseJSON函數(shù)

AngularJS

• AngularJS框架是專注于創(chuàng)建單頁(yè)應(yīng)用的抽象化工具，與傳統(tǒng)的多頁(yè)方式不同，單頁(yè)Web應(yīng)用致力于為用戶提供無(wú)縫交互的應(yīng)用體驗(yàn)
• 傳統(tǒng)多頁(yè)WEB應(yīng)用的方式與用戶在客戶端和服務(wù)端產(chǎn)生的交互是緊密聯(lián)系在一起的。用戶輸入或點(diǎn)擊URL，以通過(guò)HTTP向服務(wù)端請(qǐng)求資源，這種用戶，客戶端，服務(wù)端共同參與的Web應(yīng)用，沒(méi)動(dòng)一步都需要請(qǐng)求一個(gè)新的頁(yè)面
• 單頁(yè)應(yīng)用的目標(biāo)就是在你的瀏覽器中實(shí)現(xiàn)同樣的無(wú)縫瀏覽體驗(yàn)，這絕大部分是通過(guò)JavaScript以及我們的好朋友XMLHttpRequest實(shí)現(xiàn)的。當(dāng)用戶仍在當(dāng)前頁(yè)面時(shí)，幕后的代碼就已經(jīng)完成對(duì)資源的請(qǐng)求。用戶從一個(gè)資源跳躍到另一個(gè)資源的操作將不再需要通過(guò)URL或是指向URL的鏈接來(lái)進(jìn)行
• 在AngularJS中，由于HTML位于視圖層，所以應(yīng)讓它隨時(shí)準(zhǔn)備應(yīng)對(duì)數(shù)據(jù)模型的變化

關(guān)于AngularJS的MVC

• 模型：JavaScript對(duì)象即數(shù)據(jù)模型
• 視圖：HTML（提供了與模型進(jìn)行數(shù)據(jù)綁定的語(yǔ)法）
• 控制器：使用AngularJS語(yǔ)法來(lái)定義和操作與模型和視圖間的交互的JavaScript文件

服務(wù)端的JSON

• 一種數(shù)據(jù)交換格式要想在Web領(lǐng)域適用，就必須同時(shí)被客戶端和服務(wù)端支持。好消息是，大部分服務(wù)端Web框架以及腳本語(yǔ)言都較好地支持JSON，有對(duì)應(yīng)的庫(kù)實(shí)現(xiàn)了序列號(hào)和反序列化JSON的功能
• JSON既是數(shù)據(jù)的容器，也是運(yùn)輸工具