js高程筆記16-20章

第16章 HTML5腳本編程

1.跨文檔消息傳送XDM：向包含在當前頁面的<iframe>元素或由當前頁面彈出的窗口傳遞數據。

　　原窗口發送：postMessage(內容，目標域名)

　　目標窗口接收後觸發window對象的message事件，event對象的屬性有data，origin，source

2.原生拖放：

　　拖放事件：拖放元素上dragstart，drag，dragend，放置元素上dragenter，dragover，dragleave或者drop

　　dataTransfer對象：event對象的屬性，利用拖放傳遞字符串數據。

　　　　兩個方法：getData()和setData()

　　　　數據只能在drop事件處理程序讀取

3.媒體元素：<audio>，<video>

4.歷史管理狀態：history對象

 

第17章 錯誤處理和調試

1.類型轉換錯誤：使用"==="和"!=="避免發送類型轉換

　　　　　　　　未使用的命名變量會自動賦予undefined，undefined能夠轉換成false

　　　　　　　　在判斷語句中使用非布爾值，容易發送錯誤

2.數據類型錯誤：將預料以外的值傳遞給函數，容易發送錯誤

　　　　　　　　基本類型的值用typeof檢測，對象的值使用instanceof檢測

3.通訊錯誤：url未用encodeURIComponent()進行編碼

 

第18章 js與XML

第19章 E4X

 

第20章 JSON

1.JSON能夠表示的值類型有：簡單值，對象，數組

2.簡單值：字符串必須用雙引號

3.對象：對象字面量跟js有三點不一樣：沒有聲明變量，沒有末尾分號，屬性名必須加雙引號

　　　　同一個對象不該該出現同名屬性

4.數組：JSON數組沒有變量和分號

5.解析：json對象的方法：stringify()把js對象序列化爲JSON字符串，能夠根據第二個參數過濾結果，根據第三個參數控制縮進

　　　　　　　　　　　　 parse()把JSON字符串解析爲js值

　　　　　　　　　　　　 toJSON()做爲stringify()的補充

 

第21章 Ajax和Comet

1.Ajax：無須刷新頁面便可從服務器取得數據，但不必定是XML數據。

2.XMLHttpRequest對象：兼容IE7如下版本，IE7+和其餘瀏覽器都支持原生XHR對象。

 1 function createXHR(){
 2     if(typeof XMLHttpRequest != "undefined"){
 3         return new XMLHttpRequest();
 4     }
 5     else if(typeof ActiveXObject != "undefined"){
 6         if(typeof arguments.callee.activeXString != "string"){
 7             var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],
 8                 i,
 9                 len;
10             for(i=0,len=versions.length;i<len;i++){
11                 try{
12                     new ActiveXObject(versions[i]);
13                     arguments.callee.activeXString = versions[i];
14                     break;
15                 } catch(ex){
16                     //跳過
17                 }
18             }
19         }
20         return new ActiveXObject(arguments.callee.activeXString);
21     }
22     else{
23         throw new Error("No XHR object available.");
24     }
25 }

3.XHR用法：只能向同一個域中使用相同端口和協議的URL發送請求。

　　發送：open()，send()

　　收到響應：status屬性，檢查瀏覽器狀態碼，200或者304

　　　　　　　readyState屬性，表示請求響應過程的活動階段，通常只關心值4。只要值有變化就會觸發readyStatechange事件。

　　　　　　　必須在調用open()以前指定onreadystatechange事件處理程序才能確保跨瀏覽器兼容性。由於該事件也會偵聽open()。

 1 var xhr = createXHR();
 2 xhr.onreadystatechange = function(){
 3     if(xhr.readyState == 4){
 4         if((xhr.status >=200 && xhr.status <300) || xhr.status == 304){
 5             alert(xhr.responseText);
 6         }
 7         else{
 8             alert("Request was unsuccessful:" + xhr.status);
 9         }
10     }
11 };
12 xhr.open("get","example.txt",true);
13 xhr.send(null);

　　取消異步請求：abort()

4.操做HTTP頭部信息：setRequestHeader()，getResponseHeader()，getAllResponseHeaders()

5.GET請求：若是往URL後面添加信息，要將參數的名稱和值使用encodeURIComponent()進行編碼。

6.POST請求：可使用XHR模仿表單的提交，將表單數據序列化，方便傳值，不然要逐個取。

7.XHR 2級：

　　FormData對象：append()方法，向對象實例中添加鍵值對。能夠向構造函數直接傳入表單元素，自動完成表單序列化。

　　超時設定：timeout事件

　　進度事件：load事件代替readyStatechange事件，不用檢查readyState屬性

　　　　　　　progress事件能夠顯示接收數據進度，必須在open()方法前添加事件

8.跨源資源共享：默認狀況下，Ajax只能同一個域中的資源。

　　　　　　　　CORS跨源資源共享 ajax能夠經過輸入絕對路徑實現get請求，

9.其餘跨域技術：圖像Ping，經過<img>標籤的src實現跨域，弊端：只能get，沒法訪問服務器響應數據。

　　　　　　　　JSONP，經過<script>標籤的src指定回調函數，弊端：其餘域若是不安全會夾帶惡意代碼，很差肯定是否失敗。只能get

　　　　　　　　comet：長輪詢，相對與短輪詢

                                  HTTP流，瀏覽器向服務器發送一個請求，服務器保持鏈接打開，週期性向瀏覽器發送數據。關鍵是服務器端將結果打印到輸出緩存而後刷新。

10.web Sockets：在一個單獨的持久鏈接提供全雙工、雙向通訊。弊端：指定ws協議的時間太長，可能服務器不支持。適合須要雙向通訊的時候。

11.安全問題：

　　CSRF：跨站點請求僞造，對於未被受權系統有權訪問某個資源，辦法：驗證發送請求者是否有權限訪問資源，好比要求使用SSL鏈接，或者要求每次請求附帶通過相應算法獲得的驗證碼。

 

第22章 高級技巧

1.做用域安全的調用函數：在構造函數中用this指定屬性時，若是是直接調用該函數，this便指向window，可能會影響本來window對象的屬性。所以在構造函數中先使用this instanceof Person判斷一下。

2.惰性載入函數：在函數有不少if語句的時候，若是知道函數每次都會執行某種相同的操做，那麼在進行第一次判斷時，就將函數賦值爲該操做，這樣再次調用就會直接調用新的函數。

3.函數綁定：ES5提供了bind()函數，將函數綁定到某個對象的環境上，指定this指向。