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>

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) 获取响应头