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