HTML5中的新特性之Ajax篇

本篇內容是本人在學習HTML權威指南中過程中以筆記形式記錄的關於Ajax的要點。

等級

Ajax核心規範的名稱繼承語XHR對象,這個規範有兩個等級:level1和lever2,其中所有的主流瀏覽器都實現了level1代表的基礎級別的功能,level2擴展了最初的規範,本文重點要講解的CORS就是其中一個。

基本的步驟

  • 創建一個新的XMLHttpRequest對象
  • 給readystatechange事件設置一個事件處理器
  • 使用open方法來指定http方法和需要請求的URL
  • 調用send方法
    其中的第三步:http.Request.open(‘GET’,url),這樣寫是最簡單的形式,還可以在後面添加參數例如http.Request.open(‘GET’,url,TRUE,‘admin’,‘password’),其中加的第三個參數TRUE是表示請求是否應該是異步的,它應該始終都是TRUE,最後面的兩個參數是應當發送給服務器的用戶名和密碼。
    最後一步是調用send()方法發送請求,如果我們是簡單的get請求並不需要想服務器發送任何的數據,可以直接http.Request.send(),如果我們有數據要向服務器發送,send方法中就會需要帶參數了。

level2中新擴展的事件

  • abort 請求被終止
  • error 請求失敗
  • load 請求成功完成
  • loadend 請求完成,無論是成功還是失敗
  • loadstart 請求開始
  • progress 觸發以提示請求的進度
  • readstatechange 請求生命週期的不同階段觸發,是從level1中轉過來的,也是目前項目中實際用到的
  • timeout 請求超時

獲取和設置標頭

XHR對象允許你可以設置發送給服務器的請求標頭和讀取服務器響應裏的標頭

  • setRequestHeader(header,value)設置請求頭
  • getResponseHeader(header) 獲取指定的一個響應頭
  • getAllResponseHeaders() 獲取所有的響應頭

關於RESTful API

RESTful 的奧義在於: 通過http方法表達出你想讓服務器做什麼,而不是把他用某種方式編碼進URL

例如: 你想查看某條用戶的記錄,就可以生成這樣一個請求
httpRequest.open(‘GET’,’http://myserver/records/freeman/adm‘);
如果你想刪除數據,就可以生成這樣一個請求
httpRequest.open(‘DELETE’,’http://myserver/records/freeman/adm‘);

侷限性

REST 好是好,但是問題在於主流的Web技術只支持get 和post 更有甚者,很多防火牆只允許get 和post 你說氣不氣!!所以我們聰明的程序員想出來的規避這個限制方法就是使用X-HTTP-Method-Override標頭來指定想要使用的http方法,形式上就是再發送一個post請求
例如,仍然是上面那個例子我們就可以這樣寫
httpRequest = new XMLRequest();
httpRequest .onreadystatechange = handleResponse;
httpRequest .open(“GET”,url);
httpRequest.setRequestHeader(“X-HTTP-Method-Override”,”DELETE”);
httpRequest .send();
需要注意的是,插入的這行代碼的位置!open之後,send之前,另外也需要你的服務器端的應用程序框架能夠理解X-HTTP-Method-Override這個頭,並且設置成允許尋找和理解那些用的少的http方法。

哎呀今晚太累,明晚接着寫

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章