JavaScript之JSON&AJAX_ZenDei技術網路在線

今天為大家講解JavaScript中的數據傳輸形式JSON和AJAX技術。同時，這也是JavaScript系列的最後一篇。一 JSON JSON的全稱是JavaScript Object Notation（js對象表示法），它是一種存儲和交換文本信息的語法，主要用於序列化對象、數組、字元串、Boo ...

　　今天為大家講解JavaScript中的數據傳輸形式JSON和AJAX技術。同時，這也是JavaScript系列的最後一篇。

一　　JSON

　　JSON的全稱是JavaScript Object Notation（js對象表示法），它是一種存儲和交換文本信息的語法，主要用於序列化對象、數組、字元串、Boolean、數字和null。JSON以純文本形式存儲數據。

　　1， JSON語法和數據類型

　　JSON可以支持以下六種數據類型：對象、數組、字元串、Boolean、數字和null。

　　JSON採用JavaScript語法，所以JSON表示數組，對象等和JavaScript完全一樣。大括弧保存對象，方括弧保存數組。

　　唯一的區別是JSON只支持雙引號，所以在JSON文件中表示字元串必須使用雙引號，並且對象的鍵也需要用雙引號包裹。

　　JSON文件的尾碼名是.json。

　　2， JSON對象的方法

　　在JavaScript中，你可以給JSON對象外添加一對單引號，以字元串形式來表示JSON對象。

　　JSON.parse方法：將JSON數據轉化為JavaScript對象。

1 var myJson = '{"name" : "ren","age" : 12}';
2 var myObj = JSON.parse(myJson);
3 console.log(myObj);//{name:"ren",age:12}

　　JSON.stringify方法：將JavaScript對象轉換成JSON字元串。

1 var myObj = {
2     name:'ren',
3     age:12
4 };
5 var myJson = JSON.stringify(myObj);
6 console.log(myJson);//"{"name":"ren","age":12}"

　　註意：如果伺服器返回的是字元串類型數據，JavaScript可以用一個變數接受它，並且能直接使用它。如果伺服器返回的是JSON類型數據，請務必使用parse方法把它轉換成JavaScript標準對象再對其進行操作。當然，要向伺服器發送JSON數據，也應該使用stringify方法把JavaScript對象轉換成JSON字元串再發送。

二　　AJAX

　　1，簡介

　　AJAX的全稱是Asynchronous JavaScript And XML（非同步javascript和XML）。

　　AJAX通過XMLHttpRequest對象與伺服器進行通信。它可以發送和接受各種數據，包括文本文件，XML，HTML，JSON。當然這都不是它最吸引人的地方，AJAX迷人的地方在於它可以是非同步的，這意味著它可以在不刷新頁面的的情況下向伺服器發送請求，並接受和處理伺服器返回的信息，從而使我們能夠在不刷新頁面的情況下使用伺服器上的數據修改當前頁面。

　　2，使用

　　第一步，我們應該先創建一個XMLHttpRequest對象。通過這個對象我們便有了與伺服器通信的條件。

1 var httpRequest = new XMLHttpRequest();

　　註意，在老版本的IE瀏覽器（IE6及之前）起中，應該使用ActiveXObject創建。　

1 var httpRequest = new ActiveXObject('Microsoft.XMLHTTP');

　　第二步，在發送請求之前我們應該先定義好與伺服器通信的方式並建立連接。　　

1 httpRequest.open(method,url,async);

　　method表示請求類型：get，post，head。

　　get和post方式在傳輸上沒有本質的區別，但在實際使用中有以下幾點差異：

　　　　　　a) get主要用戶從伺服器獲取數據，post具備往伺服器發送數據的能力，get方式的請求數據會在url中顯示，而post不會，所以說post方式有潛在的危險，而get方式相對安全。

　　　　　　b) get方式的數據能被緩存，能被保留在BOM對象history中，能添加頁面標簽。而post方式不行。

　　　　　　c) get方式只允許發送ASCII字元，而post無限制。由於url長度的限制，get方式限制位元組長度2048而post方式無限制。

　　　　不知道大家是否還記得前面的《JavaScript之本地數據存儲》，裡面在講解location.hash時提到url的長度是由瀏覽器或伺服器限制的，而不是javascript語言或通信協議本身限制的。忘記的朋友可以再回去看一下。

　head和get方式差不多，唯一的區別是head只包含http報文的頭信息，而不會有實際內容。常用來檢測伺服器上是否已經存在某些數據了。

　url是請求的伺服器地址，逆序遵守同源策略。

　async是一個布爾值，true表示非同步，false表示同步（別用這個）。

　　由於瀏覽器一般會先從緩存中讀取數據，所以我們在使用get方式發送請求時，可以添加一個唯一ID讓我們每次都直接從伺服器獲取數據：

1 httpRequest.open('get','url?=' + new Date().getTime());//時間戳
2 httpRequest.open('get','url?=' + Math.random());//隨機數

　　請註意，如果您想要post數據，則可能必須設置請求的MIME類型。比如，你想要向表單一樣post數據，那麼你必須在open和send方法之間調用setRequestHeader方法（該方法用於設置請求的http頭信息，兩個參數，第一個屬性名，第二個屬性值）：

1 httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//第二點五步

　　關於http請求頭信息，請看這裡：https://baike.baidu.com/item/http請求頭

　　第三步，發送請求。

1 httpRequest.send();

　　如果在open中你選擇了post方式，那麼你可以在send方法中添加你想要向伺服器發送的數據，否則即使添加了數據也無效。

1 httpRequest.send('{name:"ren",age:12}');

　　第四步，數據處理。

　　XMLHttpRequest對象有一個事件屬性：onreadystatechange。你可以給該屬性添加一個函數引用或一個匿名函數，用以處理從伺服器返回的信息。

1 httpRequest.onreadystatechange = function (){};

　　另外XMLHttpRequest對象還有兩個存儲通信狀態的屬性：readyState和status（每當readyState的值改變時，都會觸發上面的onreadystatechange事件），和兩個存儲接收內容的屬性：responseText，responseXML。

readyState表示請求狀態：

0：請求未初始化，還沒有調用open()；

1：已與伺服器建立連接，剛調用了send()；

2：http請求已發送，send()執行完畢；

3：http請求處理中，伺服器正在解析請求的內容；

4：請求已完成，內容解析完畢，響應已準備就緒。

status表示響應狀態，返回http狀態碼：

200：成功接受到伺服器返回內容；

404：伺服器未找到相關內容；

503：伺服器不可用。

responseText：解析為字元串類型的響應。

responseXML：解析為DOM對象類型的響應

我們要想使用伺服器返回的信息，需要先確保正確的拿到了這些信息，所以事件處理函數內部應該有檢測機制：

1 if(httpRequest.readyState == 4 && httpRequest.Status == 200){
2     fnSuc(responseText);
3 }else{
4     if(fnFail){
5         fnFail();
6     }
7 }

並且，可以把相應的伺服器響應信息當做參數傳遞進去。

　　最後附上完整的ajax函數封裝：

 1 function ajax(method,url,Fnsucc,Fnfail){
 2     var httpRequest = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
 3     httpRequest.open(method,url,true);
 4     httpRequest.send();
 5     httpRequest.onreadystatechange = function (){
 6         if(httpRequest.readyState == 4){
 7         　　if(httpRequest.status == 200){
 8         　　　　FnSuc(httpRequest.responseText);//處理完成後的文件內容。
 9         　　}else{
10         　　　　if(FnFail){
11         　　　　　　FnFail(httpRequest.status);//根據http錯誤狀態碼，進行相應處理。
12                 }    
13             }
14         }
15     }
16 }

　　建議學習時間一天。