1. responseType / response
- responseType：預期服務器返回數據的類型
默認為空：""，與text一樣。
text ：文本
json ：JSON格式的數據
document ：文檔對象。服務器返回的結果是XML時要指定為document。
- response：可以接收服務器返回的任何類型的數據
根據responseType的值自動處理返回結果，可以接收任何類型的結果
1 var xhr = new XMLHttpRequest(); 2 xhr.open('get', '/query-get?id=1&age=2'); 3 // responseType要放到send前面 4 xhr.responseType = 'json'; 5 xhr.send(); 6 xhr.onload = function () { 7 // response會根據responseType指定的類型自動處理結果 8 console.log(this.response); 9 }
2. onload / onprogress
- onload：當readyState等於4的時候觸發
- onprogress：當readyState等於3的時候觸發（數據正在返回途中的時候觸發）
- onloadstart()：當開始發送請求的時候觸發
- onloadend()：當請求響應過程結束的時候觸發
1 var xhr = new XMLHttpRequest() 2 xhr.open('GET', '/time') 3 xhr.onload = function () { 4 // onload readyState => 4 5 // 只在請求完成時觸發 6 console.log(this.readyState) 7 } 8 xhr.onprogress = function () { 9 // onprogress readyState => 3 10 // 只在請求進行中觸發 11 console.log(this.readyState) 12 } 13 xhr.onloadstart = function () { 14 // onloadstart readyState => 1 15 // 開始發送請求的時候觸發 16 console.log(this.readyState) 17 } 18 xhr.onloadend = function () { 19 // onloadend readyState => 4 20 // 請求響應過程結束的時候觸發 21 console.log(this.readyState) 22 } 23 xhr.send(null)
3. onload 和 onreadystatechange
在通過Ajax向服務器發送請求的過程中，XMLHttpRequest對象的狀態會發生多次變化。由於 readystatechange 事件是在 xhr 對象狀態變化時觸發（不單是在得到響應時），也就意味着這個事件會被觸發多次。
XMLHttpRequest對象的狀態
有5種，用readyState屬性來表示xhr對象的狀態，值為0 1 2 3 4
創建完對象后馬上輸出狀態，屬性值為0。
屬性值為4 表示DONE狀態 響應體下載完成，可以直接使用 responseText
onload事件只有屬性值為4時才會觸發
4. FormData
使用FormData收集表單數據提交給服務器，一定要選擇 POST 方式，
且必須省略 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 這行代碼。
- 有form表單時：
1 <body> 2 <form id="fm"> 3 <input type="text" name="user"> 4 <br> 5 <input type="password" name="pwd"> 6 <br> 7 <input type="radio" name="sex" value="男" checked>男 8 <input type="radio" name="sex" value="女">女 9 <br> 10 <input type="file" name="pic"> 11 <br/> 12 <input type="button" id="btn" value="提交"> 13 </form> 14 <script> 15 document.getElementById('btn').onclick = function () { 16 //找到表單DOM對象 17 var fm = document.getElementById('fm'); 18 // 創建FormData對象並傳遞表單 19 var fd = new FormData(fm); 20 var xhr = new XMLHttpRequest(); 21 //接口fd：收到提交的數據后會返回收到的數據 22 xhr.open('POST', '/fd'); 23 xhr.responseType = 'json'; 24 // xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 25 xhr.send(fd); 26 xhr.onload = function () { 27 console.log(this.response); 28 } 29 } 30 </script> 31 </body>
- 沒有form表單時代碼舉栗：
1 <body> 2 <input type="text" name="user"><br> 3 <input type="password" name="pwd"><br> 4 <input type="file" name="pic"><br/> 5 <input type="button" id="btn" value="提交"> 6 <script> 7 document.getElementById('btn').onclick = function () { 8 //實例化FormData對象 9 var fd = new FormData(); 10 //調用內置對象FormData中自帶的方法：append追加 11 fd.append('username', document.getElementById('user').value); 12 fd.append('password', document.getElementById('pwd').value); 13 var f = document.getElementById('pic'); 14 var fileObj = f.fileObj[0]; 15 fd.append('myfile', fileObj); 16 var xhr = new XMLHttpRequest(); 17 xhr.open('POST', '/fd'); 18 xhr.responseType = 'json'; 19 xhr.send(); 20 xhr.onload = function () { 21 console.log(this.response); 22 } 23 } 24 </script> 25 </body>
使用FormData時要傳對象而不是字符串。
- jQuery中使用FormData：
1 <body> 2 <input type="text" name="user"><br> 3 <input type="password" name="pwd"><br> 4 <input type="file" name="pic"><br/> 5 <input type="button" id="btn" value="提交"> 6 <script src="lib/jquery-1.12.4.js"></script> 7 <script> 8 $('$btn').click(function () { 9 //使用FormData收集表單信息 10 var fd = new FormData(document.getElementById('fm')); 11 $.ajax({ 12 type: 'POST', 13 url: '/fd', 14 data: fd, 15 //表示不讓jQuery將fd對象處理成字符串，應該直接使用fd對象 16 processData: false, 17 //使用FormData時不能設置Content-Type，讓FormData自己處理，所以改成false 18 contentType: false, 19 success: function (result) { 20 console.log(result); 21 } 22 }) 23 }) 24 </script> 25 </body>
XMLHttpRequest API
1. 屬性
readyState xhr的狀態 4 響應體（服務器返回的數據）接收完畢
status 獲取狀態碼
responseText 獲取響應體，文本格式
responseXML 獲取響應體，xml格式
onreadystatechange 事件，當xhr.readyState屬性發生改變觸發
onload 事件，響應接收完畢
2. 方法
open(method, url, async) 設置請求的方式，請求的路徑， 同步/異步
send(requsetBody) 發送請求(體)
setRequestHeader(key, value) 設置請求頭
getResponseHeader(key) 獲取響應頭