1. JSON

1.1. JSON

1.1.1. 什么是JSON

JSON即javascript對象表示法，是一種現(xiàn)在主流的數(shù)據(jù)交換格式。之所以應用廣泛還是由其簡單易讀所決定的。

簡單，只有六種類型的符號 [ ] { } ； ，就可以表示任何種類的復雜對象或數(shù)組。

易讀，機器解析還是人的閱讀都能夠從這種格式中快速找到所需要的信息。

1.1.2. 與平臺無關的數(shù)據(jù)交換

JSON作為數(shù)據(jù)交換的格式與平臺種類是無關的。不管服務器使用Java語言、C#語言或其他語言都能夠從這種字符串格式轉(zhuǎn)換為具體語言的對象。同樣，任何語言也都能將自己的對象轉(zhuǎn)換為JSON的字符串。

1.1.3. 輕量級的解決方案

JSON的輕量級是與xml這種數(shù)據(jù)交換格式相比，速度更快，文檔也更小。XML文件中會包含很多對象的層級關系，解析及轉(zhuǎn)換極不方便，字符更多導致文件過大。而這些弊端JSON都已經(jīng)克服，簡單的符號是的解析更快。

1.2. JSON語法

1.2.1. JSON的結(jié)構(gòu)

使用JSON進行數(shù)據(jù)交換時，主要有兩種結(jié)構(gòu)，一種是使用“名稱-值”對兒的形式來表示一個對象，一種是值的有序列表，也就是數(shù)組。在這兩種結(jié)構(gòu)基礎之上，相互之間可以進行嵌套。即對象的值可以是數(shù)組或?qū)ο螅瑪?shù)組中的某個值可以是對象或數(shù)組。

不同語言之中的對象、記錄、結(jié)構(gòu)、字典、哈希表等都可以作為轉(zhuǎn)換的對象基礎結(jié)構(gòu)。

1.2.2. 使用JSON表示一個對象

使用JSON表示一個對象時，基本的語法結(jié)構(gòu)是 以大括號開始，以大括號結(jié)尾。大括號之間的各個屬性由逗號分隔，每一組屬性由屬性名和屬性值的成對組合實現(xiàn)。如：要表現(xiàn)一個雇員對象可以按如下結(jié)構(gòu)書寫：

{‘id’:1,’name’:’王小賤’,’age’:24}

所以不管多么復雜的結(jié)構(gòu)，只要看到大括號就代表這個一個對象，至于內(nèi)部的屬性只要保證用逗號分隔即可。

每一組屬性在書寫時要遵循以下原則：

• 屬性名要使用引號引起來
• 屬性值的類型可以多樣化，包括string、number、true、false、null、object、array
• 如果屬性值的類型為字符串，則必須使用引號括起來

只要對象的結(jié)構(gòu)符合語法結(jié)構(gòu)，那么要訪問其中某個屬性時就可以遵循“對象 . 屬性名 ”的格式來訪問其中的某個屬性值。如上面的雇員對象，想獲取name屬性的值“王小賤”就可以使用如下的代碼實現(xiàn)：

var obj = {‘id’:1,’name’:’王小賤’,’age’:24};

var name = obj . name ;

如果對象的某個屬性值依然是對象，那么定義結(jié)構(gòu)如下：

var obj = {‘id’:1 , ’name’:’王小賤’ , ’dep’:{‘depId’:1,’depName’:’財務部’}};

var depName = obj.dep.depName ;

對象屬性可以是對象，訪問這個對象屬性的時候依然遵循“對象.屬性名”的方式來獲取，上面的對象中obj就是一個對象中還包含對象的結(jié) 構(gòu)，dep是屬性名，{‘depId’:1,’depName’:’財務部’}是屬性值，即部門屬性又包括部門編號、部門名稱這兩個屬性，所以要想訪問屬 性中的屬性使用多級的點格式即可。

1.2.3. 使用JSON表示一個數(shù)組

使用JSON表示數(shù)組的時候，一定以方括號開始，以方括號結(jié)尾。所以只要看到方括號就要想到這是一個數(shù)組，數(shù)組內(nèi)的多個值之間用逗號隔開。語法如下：

[ value , value , value … ]

value的類型可以是string、number、false、true、null、object、array。如果要表示3個員工的數(shù)組就可以使用如下形式：

var jsonArr = [{‘id’:1 , ’name’:’王小賤’} , {‘id’:2,’name’:’黃小仙’} , {‘id’:3,’name’:’王老頭’}]；

如果要訪問數(shù)組中第二個元素的姓名，那么代碼如下：

var name = jsonArr[1].name;

數(shù)組中的元素依然可以嵌套使用數(shù)組，對象的屬性也可以嵌套數(shù)組，有如下代碼：

var jsonObj = {‘id’:1 , ‘name’:’王小賤’ , ‘salary’:[{‘month’:1 , ‘number’:5000},{‘month’:2 , ‘number’:4000 }]};

對于嵌套的數(shù)據(jù)類型，遵循原則就是：是對象就通過“.”來訪問，是數(shù)組就通過“[ ] ”下標來訪問。針對上面的對象，要想知道員工2月份的工資是多少，訪問形式如下：

var number = jsonObj.salary[1].number;

2. 使用JSON實現(xiàn)數(shù)據(jù)交換

2.1. 數(shù)據(jù)交換

2.1.1. 數(shù)據(jù)交換原理

JSON作為數(shù)據(jù)的交換格式，在客戶端和服務器端都要有對應的轉(zhuǎn)換過程。如果是客戶端請求數(shù)據(jù)，那么服務器端就將Java對象先轉(zhuǎn)換成 JSON字符串，經(jīng)響應把字符串傳到客戶端之后，客戶端就會接收到這個轉(zhuǎn)換結(jié)果，但Javascript要求把這個字符串變成對象格式才更方便訪問，所以 在客戶端的JavaScript代碼中又需要將這個JSON字符串變成JavaScript能夠識別的對象，這樣就完成了從服務器端的對象到客戶端對象的 整個轉(zhuǎn)變過程。

同理，如果在客戶端填寫了數(shù)據(jù)后想提交給服務器，首先是將客戶端數(shù)據(jù)構(gòu)造成一個JSON對象字符串，經(jīng)網(wǎng)絡傳遞到服務器端，服務器端再依據(jù)轉(zhuǎn)換規(guī)則將JSON字符串變成Java識別的對象。

2.1.2. Java對象轉(zhuǎn)換成JSON

在服務器端對象的轉(zhuǎn)換過程可以使用官方提供的API，JSONObject和JSONArray分別為對象和數(shù)組的轉(zhuǎn)換類型。

使用這兩個類型進行對象轉(zhuǎn)換時代碼如下：

1. Employee emp = new Employee(1,“王小賤”，“男”)；
2. JSONObject obj = JSONObject.fromObject(emp);
3. String jsonStr = obj.toString();

對于數(shù)組的轉(zhuǎn)換代碼如下：

List<Employee> emps = new ArrayList< Employee >();

for(int i=0;i<3;i++){

Employee s = new Employee ();

s.setId(i+1);

s.setName("Bear" + i);

s.setGender(“男”);

emps.add(s);

}

JSONArray jsonArr = JSONArray.fromObject(emps);

String jsonStr = jsonArr.toString();

2.1.3. JSON字符串轉(zhuǎn)換成JS對象

當JSON經(jīng)傳輸?shù)竭_客戶端時，需要完成JSON到JavaScript對象的轉(zhuǎn)換，如果使用JS原生的方法進行轉(zhuǎn)換的話，可以使用eval（）方法，但需要在JSON的前后連接上左右圓括號，如：

var jsonObj = eval(“(“ + json “)”);

為什么要 eval這里要添加('('+json+')') 呢？

原因在于eval本身的問題。 由于json是以”{}”的方式來開始以及結(jié)束的，在JS中，它會被當成一個語句塊來處理，所以必須強制性的將它轉(zhuǎn)換成一種表達式。加上圓括號的目的是迫 使eval函數(shù)在處理JavaScript代碼的時候強制將括號內(nèi)的表達式（exPRession）轉(zhuǎn)化為對象，而不是作為語句（statement）來 執(zhí)行

但是需要注意的是方式eval()方法是動態(tài)執(zhí)行其中字符串（可能是js腳本）的，這樣很容易會造成系統(tǒng)的安全問題。所以可以采用一些規(guī)避了 eval()的第三方客戶端腳本庫，如prototype.js里面提供的evalJSON（）方法。通過在頁面中引入prototype.js文件后就 可以使用這個擴展庫。實現(xiàn)代碼如下：

<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>

<script type="text/javascript">

function f1(){

var xhr = getXhr();

xhr.open('get','quoto.do',true);

xhr.onreadystatechange=function(){

if(xhr.readyState == 4){

var txt = xhr.responseText;

//將json字符串轉(zhuǎn)換成javascript對象或者數(shù)組

var arr = txt.evalJSON();

}

};

xhr.send(null);

}

</script>

2.2. 緩存問題

2.2.1. 什么是緩存問題

IE瀏覽器提供的Ajax對象，在發(fā)送GET請求時，會先查看是否訪問過該地址，如果改地址已經(jīng)訪問過，那么瀏覽器不再發(fā)送請求

表現(xiàn)在頁面終究是，第一次點擊某功能會得到數(shù)據(jù)，但是如果多次反復點擊想獲取最新數(shù)據(jù)時頁面不會有任何變化，因瀏覽器發(fā)現(xiàn)地址相同而拒絕發(fā)出請求。

但這種頁面表現(xiàn)只出現(xiàn)在IE瀏覽器中，Chrom瀏覽器和Firefox瀏覽器都能夠?qū)崿F(xiàn)數(shù)據(jù)的獲取和頁面的刷新。

2.2.2. 如何解決緩存問題

要想解決緩存問題，就需要欺騙瀏覽器，讓它認為每次請求的地址是不一樣的。構(gòu)建不同的URL需要添加上一個隨機數(shù)。代碼格式如下：

xhr.open(‘get’,’getNumber.do?’+Math.random() , true );

Math.random（）可以產(chǎn)生0-1之間的隨機數(shù)，這樣每次都可以生成不一樣的地址，讓瀏覽器重新發(fā)送請求，以達到數(shù)據(jù)刷新的效果。

第二種解決緩存問題的方式就是不使用GET請求方式，改成POST提交的話，瀏覽器不會進行地址的判斷。

2.3. 同步問題

2.3.1. 什么是同步問題

同步請求指的是在AJAX對象發(fā)出請求后，瀏覽器要等待響應的回來之后再允許頁面繼續(xù)操作，表現(xiàn)形式就是頁面的假死狀態(tài)。就好像是只有做完一件事以后才能再做下一件事情。而異步是不需要這樣的等待的，有種兩件事情同時進行的感覺。

2.3.2. 如何發(fā)送同步請求

發(fā)送同步請求在于open方法的第三個參數(shù)，如果填寫false則代表同步類型的請求，為true代表異步類型的請求。

代碼如下：

xhr.open(‘get’,’check..’,false);

2.3.3. 同步請求的使用場景

同步請求一般應用在表單驗證這種必須等待驗證返回后才能點擊提交這樣的情況下。或者是在onunload事件時通知服務器客戶端的關閉也可以 用同步請求，有些應用需要知道客戶端是否關閉窗口，以此決定是否將服務器端針對該客戶端分配的相關資源什么時候釋放。如果客戶端關閉了瀏覽器，那么在 onunload事件中可以通知服務器，但是如果不等服務器返回就關掉的話，會不知道是否釋放成功，所以通常情況下就是用同步的方式來等待服務器的響應， 在一定程度上能 保證服務器資源的釋放。