WEB前端第六十一课——xhr对象POST请求、xhr兼容性、timeout、progress
1.xhr对象发送post请求
Ajax中post请求与get请求不同之处在于多了一个表单，而get请求则是通过url发送附加信息。
在xhr对象中，post请求可以通过FormData构建表单数据。
语法：var formData = new FormData();
formData.append('key',value); //value为字符串时需要使用引号。
xhr.send(formData);
说明：formData的创建必须在“xhr.send(formData)”之前！
示例：
var userName = document.querySelector('.userName').value;
var userCode = document.querySelector('.userCode').value;
var formData = new FormData(); //FormData()为系统内置对象类
formData.append('uName',userName);
formData.append('uCode',userCode);
xhr.send(formData);
补充：
⑴ GET请求的主要特点：
GET请求可被缓存，请求保留在浏览器历史记录中
GET请求可被收藏为书签
GET请求不应在处理敏感数据时使用
GET请求有长度限制
GET请求只应当用于取回数据
⑵ POST请求的主要特点：
POST请求不会被缓存，不会保留在浏览器历史记录中
POST请求不能被收藏为书签
POST请求对数据长度没有要求
⑶ 与POST相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，需使用POST请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
参考资料：w3cschool
2.xhr对象兼容问题
xhr对象的获取方式在 IE 和 非IE 环境下需要使用不同的方法。
语法：
IE浏览器支持的方法：ActiveXObject('')
非IE环境支持的方法：XMLHttpRequest()
因此，在创建 xhr 对象时需要进行判断，示例如下：
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else if(window.ActiveObject){
var xhr = new ActiveXObject('');
也可以直接使用三目运算进行处理：
xhr = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("");
3.请求超时
timeout 属性值等于一个整数，用于设置当请求发出后等待接收响应的时间。
ontimeout() 方法则是等待超时后，自动执行的回调函数。
语法：
xhr.timeout == n; //时间单位“毫秒”，表示请求发出后响应等待时间。
xhr.ontimeout = function(){
console.log('The request for'+url地址+'time out');
说明：如果在设置的时间内没能收到后台响应内容，则视为请求超时自动执行ontimeout函数。
如果该属性设置等于 0（默认值），表示没有时间限制！
代码示例
原生Ajax请求
<?php
/* $name1=$_POST['name'];
$code1=$_POST['code'];*/
$name1=$_GET['name'];
$code1=$_GET['code'];
$res = array('msg'=>'ok','info'=>$_GET);
$res['userName']=$name1;
$res['userCode']=$code1;
// sleep(3); //设置服务器睡眠，单位“秒”！！
echo json_encode($res);
?>
4.进度条
⑴ progress
HTML中使用
progress属性有：
max，设置任务完成的值；
value，设置任务当前进度值。
注意：
⑵ progress常用属性
lengthComputable，返回一个布尔值，表示当前进度是否有可计算长度，
默认为true，表示进度没有100%，进度100%时变为false；
total，返回一个整数，表示当前进度的总长度，
如果是通过HTTP下载资源，表示内容本身长度，不包含HTTP头部的长度，
如果lengthComputable属性值为false，则total属性无法取得正确的值。
loaded，返回一个数值，表示当前进度已经完成的数量，
该属性值除以total属性值，可以得到目前进度的百分比。
⑶ upload
upload是XMLHttpRequest对象的一个属性，其属性值亦是一个对象，
该对象定义了addEventListener()方法和整个progress事件集合。
代码示例：
进度条
<?php
echo json_encode($_POST['fileName']);
?>