XMLHttpRequest和FormData的使用

時間 2019-11-12

標籤 xmlhttprequest formdata 使用简体版

原文原文鏈接

1. responseType / response

responseType：預期服務器返回數據的類型

默認爲空：""，與text同樣。jquery

text ：文本ajax

json ：JSON格式的數據json

document ：文檔對象。服務器返回的結果是XML時要指定爲document。服務器

response：能夠接收服務器返回的任何類型的數據

根據responseType的值自動處理返回結果，能夠接收任何類型的結果app

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 4async

建立完對象後立刻輸出狀態，屬性值爲0。this

屬性值爲4 表示DONE狀態響應體下載完成，能夠直接使用 responseTexturl

onload事件只有屬性值爲4時纔會觸發spa

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>