http的基礎請求和響應架構非常簡單且易於使用,但是在實踐中會伴隨著各種複雜問題:
1,客戶端和伺服器交換cookie
2,伺服器重定向瀏覽器到其他伺服器
3,快取某些資源而剩下的不快取
4,某些客戶端通過代理伺服器傳送所有的請求等
xml不是協議級的http api 而是瀏覽器級的api
瀏覽器需要考慮cookie,重定向,快取和代理,但是程式碼只需要擔心請求和響應
一,指定請求
建立xmlhttprequesd物件之後,下一步呼叫物件的open()方法去指定這個請求的兩個必須部分:方法和url;
request.open("get","data.csv")
第一個引數不區分大小寫,但是通常大家使用大寫字母來匹配http協議
get、post方法是得到廣泛支援的
post方法常用於html表單,在請求主體中包含額外的資料(表單資料)且這些資料通常儲存到伺服器上的資料庫中。相同url的重複post請求可能從伺服器得到得響應可能不同,同同時不應該快取使用這個方法的請求。
如果有請求頭的話,post請求需要設定request.setrequestheader("content-type","text/plain")
不能自己指定content-length,date,referer,user-agent頭,xmlhttprequest將自動新增這些頭而防止偽造他們
如果請求一個受密碼保護的url,把使用者名稱和密碼作為第4個和第5個引數傳遞給open(),xmlhttprequest會設定合適的頭
請求主體:get請求絕對沒有請求主體,post請求有,同時應該設定setrequestheader()指定的content-type頭
順序問題:呼叫xmlhttprequest方法的順序必須必須匹配http請求的架構,否則將丟擲異常
二,指定主體
1.表單編碼的請求
2.json.stringfy()編碼請求主體
3.xml編碼的請求
4.上傳檔案
5.multipart/form-data多請求主體
三,http進度事件
呼叫send時——觸發loadstart()事件
正在載入——觸發progress事件
載入完成——觸發load()事件
一個請求完成不一定是成功的請求,load事件應該檢查xmlhttprequest物件的status狀態碼
請求無法完成對應3種情況:1,請求超時——timeout事件
2,請求中止——abort事件
3,太多重定向等網路錯誤阻止請求完成——error事件
對於任何具體請求,瀏覽器只會處理load/abort/timeout/error中的一個
一旦這些事件中的一個被觸發後瀏覽器將觸發loadend事件
上傳進度事件
xhr2給出用於監控http請求上傳的事件,xmlhttprequest物件有upload屬性,upload屬性值是一個物件,它定義了addeventlistener()方法和整個progress事件集合,比如onprogress和onload
中止請求和超時
可以通過呼叫xmlhttprequest物件的abort()方法來取消正在進行的http請求,呼叫abor()方法在這個物件上觸發abort事件
呼叫abort的主要原因是:完成取消或者超時請求消耗的時間太長或者響應變得無關時。
假設使用xmlhttprequest為文字輸入域請求自動完成推薦,如果使用者在伺服器的建議達到之前輸入了新字元,這時等待請求不再有趣,應該中止
跨域http請求
同源策略不允許xmlhttprequest進行跨域請求
xhr2允許在http響應中傳送合適的cors允許跨域訪問網站,那麼同源策略不放寬就會正常工作
給xmlhttprequest的open()方法傳入使用者名稱和密碼,他們絕對不會通過跨域請求傳送,跨域請求通常也不會包含其他任何的使用者證書:cookie和http身份驗證令牌(token)通常不會作為請求的內容部分傳送且任何作為跨域響應來接受的cookie都會被丟棄
如果需要,必須設定xmlhttprequest的withcredentials為true
藉助script標籤傳送http請求:jsonp
好處:1,不受同源策略的影響
2,包含json編碼資料的響應體會自動解碼
指令碼和安全性:使用該技術意味著必須web頁面可以執行遠端伺服器傳送過來的任何js程式碼,意味著對於不可信的伺服器,不能採取該技術