JavaScript必備知識點之XMLHttpRequest請求

• XMLHttpRequest 對象用於在後臺與服務器交換數據。
• 使用XMLHttpRequest能夠:在不重新加載頁面的情況下更新網頁、在頁面已加載後從服務器請求數據、在頁面已加載後從服務器接收數據、在後臺向服務器發送數據。

創建XMLHttpRequest對象：
xml = new XMLHttpRequest();

open()： 初始化請求，接收參數有請求的類型、URL、是否異步。
send(): 向服務器發送請求，參數爲需要發送的數據。
onreadystatechange: on ready state change (當 準備 狀態 改變)，它是一個函數，當XMLHttpRquest狀態發送改變時會觸發，狀態（readyState）由0到4變化。

• 0：初始狀態xhr對象剛創建完
• 1：連接到服務區
• 2：發送請求- 剛剛send完
• 3：接收完成- header接收完了
• 4：接收完成- body接收完了
  只有當readyState狀態等於4的時候我們才認爲一次請求完成了。

status: 服務器狀態碼。

• 2xx [200,300)區間請求成功。
  1）200：請求成功，正常響應
  2）201：請求已完成，新的資源創建
  3）202：已經接受請求，等待接受處理
  4）203：服務器已成功處理了請求，但返回的信息可能來自另一來源
  5）204：請求已被處理，但沒有任何內容返回
  6）205：沒有新的內容，但瀏覽器應該重置它所顯示的內容
  7）206：服務器成功處理了部分 GET 請求
  8）207：XML消息，可以包含一系列獨立的響應
  9）208：以前返回的結果
  10）226：請求已完成，響應是實例操作
• 3xx 重定向
  1）300：客戶請求的文檔可以在多個位置找到
  2）301：客戶請求的文檔已經被永久移動到其他地方
  3）302：客戶請求的文檔被臨時移動到其他地方
  4）303：對應當前請求的響應可以在另一個URI上被找到
  5）304：請求資源從上次請求以來未被修改
  6）305：客戶請求的文檔應該通過指定的代理服務器提取
  7）307：請求的資源現在臨時從不同的URI響應請求
  8）308：使用相同的方法再次連接到不同的uri

ajax1.0

btn.onclick = function(){
    var xhr = new XMLHttpRequest();
    xhr.open('get','1.php?a=12&b=6',true); // 異步
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            console.log(xhr.status)
            if((xhr.status>=200 && xhr.status<300)||xhr.status === 304){
                console.log(xhr.responseText)
            }
        }else{
            alert('error')
        }
    }
}

ajax2.0

FormData對象用以將數據編譯成鍵值對，append()方法用來添加字段。一般寫原生js請求的時候可以使用FormData上傳文件。

• upload 上傳過程
• onload 成功完成時觸發
• onprogress 接收數據開始週期觸發

btn.onclick = function(){
    var formData = new FormData();    // 容器
    formData.set('a',12);
    formData.set('b',1);
    formData.append('a',5)
    formData.set('fileName',idFile) // 文件

    var xhr = new XMLHttpRquest();

    xhr.upload.onload = function(){
        console.log('上傳完成')
    }
    xhr.upload.onprogress = function(ev){   //進度變化
        console.log(ev.loaded, ev.total)
    }

    xhr.open('post','1.php?a=12&b=6',true); // post
    xhr.send(formData);
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            console.log(xhr.status)
            if((xhr.status>=200 && xhr.status<300)||xhr.status === 304){
                console.log(xhr.responseText)
            }
        }else{
            alert('error')
        }
    }
}

<input type="file" name="fileName" id="XXX">