AJAX相關知識總結

一. AJAX配置

• 打開一個URL請求地址(發送請求前的一些配置)
  • [請求方式]:GET系列:GET/DELETE/HEAD,POST系列:POST/PUT
  • [請求地址]:咱們經過這個地址向服務器發送數據請求,請求的地址通常都是後臺提供的(API接口文檔)
  • [設置同步異步]:默認是TRUE異步,設置爲FALSE爲同步
  • [USER NAME]:用戶名
  • [USER PASS]:密碼,某些時候服務器爲了保證安全,只容許部分用戶可以經過服務器的請求(咱們如今通常都是匿名訪問),此時須要咱們提供安全的祕鑰 xhr.open("GET","/userInfo",true);
• 監聽AJAX狀態的改變,實現不一樣的業務操做
  • xhr.readystate:AJAX狀態
    • 0:UNSEND:未發送,剛開始建立完成AJAX實例,初始狀態就是0
    • 1:OPENED:已打開,就是已經執行完成第二步操做了
    • 2:HEADERS_RECEIVED:客戶端已經接收到服務器返回的響應頭信息
    • 3.LOADING:服務器返回的響應主體內容正在傳輸中
    • 4.DONE:響應主體內容已經被客戶端接收
  • xhr.status:HTTP狀態碼
    • 經過狀態碼能夠知道當前HTTP事物是否成功,以及失敗的緣由
    • [2開頭]:表明成功
      • 200:ok
    • [3開頭]:也表明成功,可是這個成功經歷了一些特殊處理
      • 301:Move Permenently:在新版本HTTP協議中,它表明永久轉移(在以前的協議版本中它表明永久重定向)
      • 302:move Temporarily 在新版本HTTP協議中,它表明臨時轉移(在以前的協議版本中它表明臨時重定向,新版本協議中307表明臨時重定向)=>"服務器負載均衡"
      • 304:Not Modified,讀取的是緩存中的數據(網站性能優化的一個特別重要的手動:咱們通常都會把靜態的資源文件(CSS/JS/IMG作304緩存)
    • [4開頭]:表明錯誤,並且通常都是客戶端的錯誤
      • 400:Bad Request,請求參數錯誤
      • 401:Unauthorized:無權限訪問
      • 403:Forbidden:接收到請求,可是沒有返回正常的結果,也不返回錯誤的緣由,有些時候還會返回404
      • 404:Not Found,請求的地址不存在
      • 413:Request Entity Too Large,客戶端傳遞給服務器的內容超過了服務器願意接受的範圍
    • [5開頭]:表明錯誤,並且通常都是服務器端錯誤
      • 500:Internal Server Error,服務器的未知錯誤
      • 503:service Unavailable,服務器超負荷
• 操做
  • xhr.response:獲取響應主體(通常不用)
  • xhr.responseText:獲取響應主體內容,並且獲取的內容是文本格式(字符串)的:
  • xhr.responseXML:獲取響應主體內容,並且獲取的內容是XML格式(XML文檔)的
  • xhr.getResponseHeader([key]):獲取響應頭信息,key爲關鍵字,如Date可獲取扶服務器的時間
  • xhr.getAllResponseHeader:獲取所有的響應頭信息
  • xhr.timeout:設置AJAX請求的超時時間,若是當前請求超過這個時間,表明超時,AJAX請求結束,而且會觸發ontimeout事件
  • xhr.abort():中斷當前AJAX請求,能夠觸發onabort事件
  • xhr.setRequsetHeader([key],[value]):設置請求頭信息
    • 設置請求頭以前必須保證已經執行open了
    • 設置請求頭的內容不能是中文(除非進行編碼)

二.AJAX請求發送

AJAX請求這件事從執行send後纔開始(以前都是在作準備),當readystate=4的時候這件事結束

• xhr.send(null):send方法中寫的內容就是客戶端經過請求主體傳遞給服務器的內容,不想經過請求主體傳遞內容咱們寫null

三. js編碼和解碼

若是就是想經過請求頭給服務器傳遞中文漢字,咱們須要先把傳遞的內容進行編碼,由服務器進行編碼

• escape/unescape:這種方式常常應用於客戶端對中文漢字和特殊字符進行編碼的(通常不經常使用,由於服務器端語言,除了NODE其餘的貌似不支持這個方法)
• encodeURI/decodeURI:按照UNICODE編碼解碼
• encodeURIComponent/decodeURIComponent:相對於上面的方法來講能夠把特殊字符也進行編碼,而encodeURI只能編碼中文漢字
  • 服務器端接受的時候再進行解碼decodeURIComponent

四. 加密

加密不是簡單的編碼解碼,而是按照規則進行加密解密(項目中的重要信息咱們通常都要進行加密的)

• [可逆轉的加密]
  • 重要的信息加密後還能夠再解密回來,例如:電話號碼或者銀行卡號進行加密
  • 通常公司都是本身寫加密和解密規則
• [不可逆轉的加密]
  • 加密後就不可解密了,例如:全部密碼都是不可逆轉的加密
  • 最經常使用的是md5,sha1....
  • 真正項目中會把MD5加密後的結果進行二次或者屢次處理

五.GET/POST系列請求

無論哪一種HTTP請求方式,客戶端均可以把信息傳遞給服務器,服務器也能夠把內容返回給客戶端

• GET系列

  • GET:獲取,給服務器的少,從服務器拿的多
  • DELETE:刪除,從服務器上刪除一些資源文件
  • HEAD:獲取響應頭,使用該請求只能獲取服務器的響應頭信息,獲取不到響應主體內容

• POST系列

  • POST:推送,給服務器的多,從服務器拿的少
  • PUT:放,在服務器上放入一些資源文件

• GET系列和POST系列存在一些主要的區別

  • GET請求傳遞給服務器內容經過的是"問號傳參",POST系列傳遞給服務器內容經過的是"請求主體"
  • 每一個瀏覽器對於URL的長度都是一個最大限制(谷歌8kb/火狐7kb/IE2kb),若是POST請求也用問號傳參,頗有可能致使URL的長度超出限制(POST傳遞的內容多),超出的部分會被瀏覽器自動截取掉,致使信息不完整,因此POST應該使用請求主體,GET可使用問號傳參(GET傳遞的少);請求主體傳遞的內容大小理論上沒有限制,真實項目中爲了保證上傳的速度,咱們通常本身會限制其大小(例如:上傳文件要求限制在100KB之內)

  [GET]
  xhr.open("GET","/userInfo?name=zxt&age=27&sex=1"); xhr.send(null); [POST] xhr.open("POST","/userInfo"); xhr.send("name=zxt&age=27&sex=1");

  • GET系列請求會出現不可控制的緩存,而POST請求不會
    • 緣由是由於GET是經過問號傳參的方式傳遞給服務器的,若是我發送兩次請求,地址和傳遞的參數都一摸同樣,會觸發瀏覽器的記憶識別功能,它認爲你第二次請求的數據和第一次同樣,因此會把緩存中的數據返回;有些需求這樣很差,例如隨時獲取股票信息等需求此時咱們須要清除GET請求的緩存;
    • [清除緩存只須要在每一次請求的地址後面加一個隨機數,保證每一次請求的地址不徹底一致便可;屬性名使用_是爲了避免和其餘有意義的屬性名衝突(行業規範)]

    xhr.open("GET","/userInfo?_="+Math.random()); xhr.send(null);

  • GET系列請求相對於POST請求來講不安全,在互聯網面前沒有絕對的安全,咱們平時上網都是在裸奔
    • 緣由:GET傳遞個服務器的內容都在URL上(問號傳參),有一種比較簡單的黑客技術"URL劫持",別人能夠經過劫持URL把咱們傳遞給服務器的數據捕獲到
    • 之後只要給服務器傳遞的是重要的信息,無論內容多少都應該使用POST

六. 獲取服務器時間

• 咱們獲取的服務器時間和當前真實的時間,出現一些差距"時間差",咱們獲取的時候是服務器返回數據的時間,客戶端接收到數據也須要一點時間,因此當客戶端接收到這個值的時候,已經距離真實的時間差了一點
  • 減小時間差
    1. 在xhr.readyState==2這個階段獲取服務器時間(AJAX請求必須是異步的,同步的只能在狀態爲4的時候處理)
    2. xhr.open("HEAD"...)請求方式是HEAD請求,咱們只須要獲取響應頭便可
    3. head請求會產生緩存問題,使用Math.random();
    4. 只是用一次AJAX請求,在獲取的時間中進行遞增,來同步服務器的時間,減小服務器的壓力

七. jQ中的AJAX

$.ajax("note.txt",{
    method:"get",
    dataType:"txt",
    async:true,
    cache:false,
    data:{
        name:"zxt",
        age:"[27,28]"
    }
    success:function(){},
    error:function(){},
    complete:function(){}
})

• method:等同於type屬性
• dataType:txt(默認),預先設定服務器返回數據的格式,無論咱們設置什麼值,服務器返回給咱們的數據通常都是字符串或者XML格式的,組件庫的目的就是根據咱們設定的值把服務器返回的結果轉換成咱們所須要的->"dataType"的值並不能影響服務器的返回結果
• async:設置同步仍是異步,默認是true,異步
• cache:若是當期的請求是GET系列,咱們設置的仍是false,此時須要咱們去清除GET請求的緩存,默認值true
• data
  • 全部須要傳遞給服務器的內容都放在DATA中,GET系列採用問號傳參,POST系列採用請求主體;DATA中的字符串內容是什麼咱們傳遞的就是什麼
  • 還能夠是個對象,POST系列會把這個對象直接放在請求主體中處理,DATA中是什麼放入的就是什麼;GET系列會把它拆分XXX=XXX這種形式,放在URL的末尾以問號傳參傳遞給服務器,值得注意的是,對於漢字和特殊字符,咱們須要把內容進行編碼
• complete:無論成功仍是失敗,只要完成就會執行這個

八. 模擬jQ中AJAX

• 思想
  • 傳入爲一個對象,避免順序問題致使參數混亂
  • 對傳入的參數進行默認操做
    • 使用method進行默認,不使用Type
  • 將傳入的對象將默認值進行覆蓋,沒傳遞的走默認值,傳遞的走本身須要的值
    • 將Type和method進行統一,最後使用method
  • 發送AJAX請求
    1. 對XMLHttpRequest進行兼容處理
    2. 在onreadystatechange事件中,分狀況進行討論
       • 請求失敗
       • 請求成功
         • 對readystate的狀況進行討論
         • 獲取響應主體內容(通常是字符串),根據dataType值來處理響應主體內容,處理失敗,結果爲空,避免報錯
         • 討論對應的回調函數並傳入響應主體執行函數
           • 回調函數中的this爲xhr對象
    3. 根據method對data參數進行處理,並傳入send()中
  • 根據dataType和cache的值來進行緩存清除操做
    • 驗證url是否?是否存在,來對url進行隨機數的添加