javascript
JavaScript高级程序设计-读书笔记（6）
第20章 JSON
JSON是一個輕量級的數(shù)據(jù)格式，可以簡化表示復雜數(shù)據(jù)結構的工作量
JSON的語法可以表示一下三種類型的值
l??????? 簡單值：使用與JavaScript相同的語法，可以在JSON中表示字符串、數(shù)值、布爾值和null。但JSON不支持JavaScript中的特殊數(shù)值undefined。
“Hello world!”
l??????? 對象(屬性的值可以是簡單值，也可以是復雜類型值，如下這樣在對象嵌入對象)
?????? {
????????? “name” : ”Nicholas”,
????????? “age” : 29
????????? “school” : {
????????????? “name” : “MerrimackCollege”,
????????????? “l(fā)ocation” : “North Andover, MA”
?????????? }
?????? }
l??????? 數(shù)組
?????? [25, “hi”, true]
把數(shù)組和對象結合起來，可以構成更復雜的數(shù)據(jù)集合，例如：
?? [
????????? {
???????????? “title” : “professinal JavaScript”,
???????????? “authors” : [
???????????????????????????????????????? “Nicholas C. Zakas”
????????????? ],
????????????? edition : 3,
????????????? year : 2011
?????????? },
????????? {
???????????? “title” : “ professinal JavaScript”,
???????????? “authors” : [
???????????????????????????????????????? “Nicholas C. Zakas”
????????????? ],
????????????? edition : 2,
????????????? year : 2009
?????????? }
?????? ]
?
ECMAScript 5定義了一個原生的JSON對象，可以用來將對象序列化為JSON字符串或者將JSON數(shù)據(jù)解析為JavaScript對象。JSON.stringify()和JSON.parse()方法分別用來實現(xiàn)上述兩項功能。
?
第21章 Ajax與Comet
Ajax技術的核心是XMLHttpRequest對象(簡稱XHR).能夠以異步方式從服務器取得更多信息，以為著用戶單擊后，可以不刷新頁面也能取得新數(shù)據(jù)。
1、XMLHttpRequest對象
（1）XHR的用法
使用下面的代碼在所有瀏覽器中創(chuàng)建XHR對象：
??? var xhr = createrXHR();
?
在使用XHR對象時，要調用的第一個方法是open(),它接受3個參數(shù)：要發(fā)送的請求的類型（“get”、”post”等）、請求的URL和表示是否異步發(fā)送請求的布爾值。
調用open()方法并不會真正發(fā)送請求，而只是啟動一個請求以備發(fā)送。
?
要發(fā)送特定的請求，條用send()方法，如：
xhr.open("get","example.php", false)；
xhr.send(null);
?? 如果不需要通過請求主體發(fā)送數(shù)據(jù)，則必須傳入null。
?
在收到響應后，響應的數(shù)據(jù)會自動填充XHR對象的屬性，相關屬性如下：
- responseText：作為響應的主體被返回的文本；
- responseXML：若響應的內容類型”text/xml”或”application/xml”，此屬性保存響應數(shù)據(jù)XML DOM文檔
- status：響應的HTTP狀態(tài)；
- statusText：HTTP狀態(tài)的說明。
在接收到響應后，第一步是檢查status屬性，以確定響應已經成功返回。
?
多數(shù)情況下，要發(fā)送異步請求，可以檢測XHR對象的readyState屬性，該屬性表示請求/響應過程的當前活動階段。可能的取值如下：
0 : 未初始化，未調用open()；
?????? ?????? 1 : 啟動，已經調用了open()；
?????? ?????? 2 : 發(fā)送，已經調用了send()，未接受響應；
?????? ?????? 3 : 接受，已接收到部分響應；
?????? ?????? 4 : 完成，已接收到全部響應，且已經可以在客戶端使用。
只要readyState屬性的值由一個值變成另一個值，都會觸發(fā)一次readystatechange事件。
另外，在接收到響應之前還可以調用abort()方法來取消異步請求。
（2）HTTP頭部信息
?每個HTTP請求和響應都會帶有相應的頭部信息。
默認情況下，在發(fā)送XHR請求的同時，還會發(fā)送下列頭部信息：
????????????? Accept：瀏覽器能夠處理的內容類型；
????????????? Accept-Charset：瀏覽器能夠顯示的字符集；
????????????? Accept-Encoding：瀏覽器能夠處理的壓縮編碼；
????????????? Axxept-Language：瀏覽器當前設置的語言；
????????????? Connection：瀏覽器與服務器之間連接的類型；
????????????? Cookie：當前頁面設置的如何Cookie；
????????????? Host：發(fā)送請求耳洞頁面所在域；
????????????? Referer：發(fā)出請求的頁面的URI；
????????????? User-Agent：瀏覽器的用戶代理字符串。
?????? 使用setRequestHeader()方法可以設置自定義的請求頭部信息。
???? 調用XHR對象的getResponseHeader()方法并傳入頭部字段名稱，可以取得相應的響應頭部信息。
?????? 而調用getAllResponseHeader()方法則可以取得一個包含所有頭部信息的長字符串。
（3）GET請求
GET是最常見的請求類型，最常用于向服務器查詢某些信息。
必要時，可以將查詢字符串參數(shù)追加到URL的末尾，以便將信息發(fā)送給服務器。
查詢字符串中每個參數(shù)的名稱和值都必須使用encodeURIComponent()進行編碼，然后才能放到URL的末尾。
下面這個函數(shù)可以輔助想現(xiàn)有URL的某位添加查詢字符串參數(shù)：
function addURLParam(url,name,value){
??? url += (url.indexOf('?') == -1?'?':'&');
??? url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
??? return url;
}
（4）POST請求
?? POST請求，通常用于向服務器發(fā)送應該被保存的數(shù)據(jù)。
?
2、XMLHttpRequest 2級
（1）FormData為序列化表單以及創(chuàng)建于表單格式相同的數(shù)據(jù)（用于通過XHR傳輸）提供了便利。
?? 下面的例子創(chuàng)建了一個FormData對象，并向其中添加了一些數(shù)據(jù)：
var data = new FormData();
data.append(“name”,”Nicholas”);
?? 這個append()方法接收兩個參數(shù)：鍵和值。
???
?? 而通過向FormData構造函數(shù)傳入表單元素，也可以用表單的數(shù)據(jù)預先向其中填入鍵值對：
?? var data = new FormData(document.forms[0]);
?
?? 創(chuàng)建FormData的實例后，可以將它直接傳給XHR的send()方法。
?
使用FormData的方便之處體現(xiàn)在不必明確地在XHR對象上設置請求頭部。
（2）超時設定
?? IE8為XHR對象添加了一個timeout屬性，表示請求在等待響應多少毫秒之后就終止。
（3）overrideMimeType()
?? Firefox最早引入了overrideMimeType()方法，用于重寫XHR響應的MIME類型。
3、進度事件
Progress Events 規(guī)范定義了與客戶端服務通信有關的事件。有以下6個進度事件：loadstarts、progress、error、abort、load、loadend。
?每個請求都從觸發(fā)loadstart事件開始，接下來是一個或多個progress事件，然后觸發(fā)error、abort或load事件中的一個，最后以觸發(fā)loadend事件結束。
4、跨源資源共享
CORS（Cross-Origin Resource Sharing，跨源資源共享）定義了在必須訪問跨源資源時，瀏覽器與服務器應該如何溝通。
其基本思想，就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，還是應該失敗。
（1）IE對CORS的實現(xiàn)
?? 微軟在IE8中引入了XDR（XdomainRequest）類型。這個對象與XHR類似，但能實現(xiàn)安全可靠的跨域通信。
XDR對象的使用方法與XHR對象非常相似。也是創(chuàng)建一個XdomainRequest的實例，調用open()方法，在調用send()方法。
所有XDR請求都是異步執(zhí)行的，不能用它來創(chuàng)建同比請求。
XDR對象也支持timeout屬性以及ontimeout事件處理程序。
為支持POST請求，XDR對象提供了contentType屬性，用來表示發(fā)送數(shù)據(jù)的格式。
（2）其他瀏覽器對CORS的實現(xiàn)
?? Firefox3.5+、Safair4+、Chrome、iSO版和Android平臺中的WebKit都通過XMLHttpRequest對象實現(xiàn)了對CORS的原生支持。
?? 要請求位于另一個域中的資源，使用標準的XHR對象并在open()方法中傳入決定URL即可。
（3）Preflighted Reqeusts
CORS通過一種叫做Preflighted Reqeusts的透明服務器驗證機制支持開發(fā)人員使用自定義的頭部GET或POST之外的方法，以及不同類型的主體內容。
（4）帶憑據(jù)的請求
??? 默認情況下，跨源請求不提供憑據(jù)（cookie、HTTP認證及客戶發(fā)頓SSL證明等）。通過將withCredentials屬性設置為true，可以指定某個請求應該發(fā)送憑據(jù)）。
（5）跨瀏覽器的CORS
?? 檢測XHR是否支持CORS的最簡單方式，就是檢查是否存在withCredentials屬性。再結合檢測XdomainRequest對象是否存在，就可以兼顧所有瀏覽器了。
5、其他跨域技術
?? 利用DOM中能夠執(zhí)行跨域請求的功能，在不依賴XHR對象的情況下也能發(fā)送某種請求。
（1）圖像Ping
第一種跨域請求技術是使用<img>標簽。
通過圖像Ping，瀏覽器得不到任何具體的數(shù)據(jù)，但通過監(jiān)聽load和error事件，它能知道響應是什么時候接收到的。
缺點：只能發(fā)送GET請求；無法訪問服務器的響應文本。
（2）JSONP
填充式JSON或參數(shù)式JSON，是應用JSON方法的一種新方法。
優(yōu)點：能夠直接訪問文本，支持瀏覽器與服務器之間的雙向通信。
缺點：JSONP是從其他域中加載代碼執(zhí)行的，可能不安全；要確定JSONP請求是否失敗并不容易。
（3）Comet
Ajax是一種從頁面向服務器請求數(shù)據(jù)的技術，而Comet則是一種服務器向頁面推送數(shù)據(jù)的技術。
有兩種實現(xiàn)Comet的方式：長輪詢和流。
輪詢的優(yōu)勢是所有瀏覽器都支持。
（4）服務器發(fā)送事件（SSE）
SSE API用于創(chuàng)建到服務器的單向連接，服務器通過這個連接可以發(fā)送任意數(shù)量的數(shù)據(jù)。
要預定新的事件流，首先要創(chuàng)建一個新的EventSource對象，并傳進一個入口點：
var source = new EventSource(“myevents.php”);
默認情況下，EventSource對象會保持與服務器的活動連接。如果想強制立即端來連接并且不再連接，可以調用close()方法。
（5）Web Sockets
Web Sockets的目標是在一個單獨的持久連接上提供全雙工、雙向通信。
使用標準的HTTP服務器無法實現(xiàn)Web Sockets，只有支持這種協(xié)議的專門服務器才能正常工作。
要創(chuàng)建Web Socket，先實例一個WebSocket對象并傳入要連接的URL：
??? var socket = new WebSocket(“ws://www.example.com/server.php”);
要關閉Web Socket連接，可以在任何時候調用close()方法。
??? socket.close();
Web Socket打開之后，就可以通過連接發(fā)送和接收數(shù)據(jù)。要向服務器發(fā)送數(shù)據(jù)，使用send()方法。
Web Sockets只能通過連接發(fā)送純文本數(shù)據(jù)，所以對于復雜的數(shù)據(jù)結構，在通過連接發(fā)送之前，必須進行序列化。
在服務器向客服端發(fā)來消息時，WebSocket對象就會觸發(fā)message事件。
6、安全
?為確保通過XHR訪問的URL安全，通行的做法就是驗證發(fā)送請求者是否有權訪問相應的資源。
?
第23章 離線應用與客戶端存儲
? 支持離線Web應用開發(fā)是HTML5的另一個重點。
? 開發(fā)離線Web應用需要幾個步驟：
首先是確保應用知道設備是否能上網；
然后，應用還必須能訪問一定的資源（圖像、JavaScript、CSS等）；
最后，必須有一塊本地空間用于保存數(shù)據(jù)。
1、離線檢測
HTML5為此定義了一個navigator.onLine屬性，這個屬性值為true表示設備能上網，值為false表示設備離線。
為了更好地確定網絡是否可用，HTML還定義了兩個事件：online和offline。當網絡從離線變?yōu)樵诰€或者從在線變?yōu)殡x線時，分別觸發(fā)這兩個事件。
為了檢測應用是否離線，在頁面加載后，最好先通過navigator.onLine取得初始的狀態(tài)。然后，就是通過上述兩個事件來確定網絡連接狀態(tài)是否變化。
2、應用緩存
HTML5的應用緩存，簡稱為appcache。就是從瀏覽器的緩存中分出來的一塊緩存區(qū)。要想在這個緩存中保存數(shù)據(jù)，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。
要將描述文件與頁面關聯(lián)起來，可以在<htnl>中的manifest屬性中指定這個文件的路徑，如：
?? <html manifest=”/offline.manifest”>
應用緩存也有相應的JavaScript API讓你知道它都在做什么。這個API的核心是applicationCache對象，這個對象有一個status屬性，屬性的值是常量，表示應用緩存的如下當前狀態(tài)：
??? 0?:無緩存。
??? 1：閑置。
??? 2：檢查中。
3：下載中。
4：更新完成。
5：廢棄。
?? 應用緩存還有很多相關是事件，表示其狀態(tài)的改變。有：checking、error、noupdate、downloading、progress、updateready、cached。
?? 一般來講，這些事件會隨著頁面加載按上述順序依次觸發(fā)。不過，通過調用update()方法也可以手工干預，讓應用緩存為檢查更新而觸發(fā)上述事件。
?
3、數(shù)據(jù)存儲
（1）Cookie
?? HTTP Cookie，通常直接叫做cookie，最初是在客戶端用于存儲會話信息的。
- ?限制
cookie在性質上是綁定在特定的域名下的。
?? 由于cookie是存儲在客戶端計算機上的，還加入了一些限制確保cookie不會被惡意使用，同時不會占據(jù)太多磁盤空間。每個域的cookie總數(shù)是有限制的，不過瀏覽器之間個不相同。
?? 當超過單個域名限制之后還要再設置cookie，瀏覽器就會清楚之前設置的cookie。
?????? 瀏覽器中對cookie的尺寸也有限制。大多數(shù)瀏覽器都有大約4096B（加減1）的長度限制。
如果你嘗試創(chuàng)建超過最大尺寸限制的cookie，那么該cookie會被悄無聲息地丟掉。
- cookie的構成
cookie由瀏覽器保存的以下幾塊信息構成：名稱、值、域、路徑、失效時間、安全標志。
- JavaScript中的cookie
基本的cookie操作有三種：讀取、寫入和刪除。
（2）IE用戶數(shù)據(jù)
? 在IE5.0中，微軟通過一個自定義行為引入了持久化用戶數(shù)據(jù)的概念。
（3）Web存儲機制
Web Storage的目的是克服由cookie帶來的一些限制，當數(shù)據(jù)需要被嚴格控制在客戶端上時，無須持續(xù)地將數(shù)據(jù)發(fā)回服務器。
最初的Web Storage規(guī)范包含了兩種對象的定義：sessionStorage和globalStorage。
（4）IndexedB
??? IndexedB是一種類似SOL數(shù)據(jù)庫的結構化數(shù)據(jù)儲存機制。
轉載于:https://www.cnblogs.com/ww03/p/5277069.html
總結
以上是生活随笔為你收集整理的JavaScript高级程序设计-读书笔记（6）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： GCD的深入理解
- 下一篇： javascript中this