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（默认值），表示没有时间限制！
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生Ajax请求</title>
<!-- <script src="../JScodeFile/jquery-1.8.3.js"></script>-->
</head>
<body>
<label for="userName">登录账户</label>
<input type="text" id="userName" class="userName">
<br>
<label for="userCode">登录密码</label>
<input type="text" id="userCode" class="userCode">
<br>
<button>登录</button>
<script>
var uName = document.querySelector('.userName');
var uCode = document.querySelector('.userCode');
var btn = document.querySelector('button');
btn.onclick=function () {
// var xhr=new XMLHttpRequest(); //创建对象，准备发送Ajax请求
// 考虑浏览器兼容性问题，创建 xhr 对象时需要进行判断。
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject();
}
xhr.onreadystatechange=function () { //监听后台接收请求状态的变化
if (xhr.readyState==4){ //判断当前请求进行到何种状态，属性值 4 表示后台已经接收到前台请求
if (xhr.status==200){ //判断前台是否准确接收到后台反馈的数据，属性值 200 表示通信成功
console.log(xhr.responseText); //获取后台反馈的完整数据，json串
console.log(typeof xhr.responseText); //返回结果为 string 类型
console.log(JSON.parse(xhr.responseText)); //解析返回结果转换为对象
}
}
}
xhr.timeout=2000; //超时设置单位“毫秒”！！
xhr.ontimeout=function(){
alert('访问超时，请刷新页面重新加载。')
}
// 使用 get 方式发送请求：
xhr.open('get',"xhr.php?name="+uName.value+"&code="+uCode.value,true);
// xhr.open('get',"xhr.php?name="+$('.userName').val()+"&code="+$('.userCode').val(),true);
xhr.send(null);
// 使用 post 方式发送请求：
/* xhr.open('post','xhr.php',true);
var formD = new FormData();
formD.append('name',uName.value);
formD.append('code',uCode.value);
xhr.send(formD);*/
}
</script>
</body>
</html>
<?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>标签用于定义运行中的任务进度。
progress属性有：
max，设置任务完成的值；
value，设置任务当前进度值。
注意：<progress>需要与JS配合使用显示任务进度；
<progress>不能用于表示度量衡，如存储空间使用情况（使用<meter>标签）
⑵ progress常用属性
lengthComputable，返回一个布尔值，表示当前进度是否有可计算长度，
默认为true，表示进度没有100%，进度100%时变为false；
total，返回一个整数，表示当前进度的总长度，
如果是通过HTTP下载资源，表示内容本身长度，不包含HTTP头部的长度，
如果lengthComputable属性值为false，则total属性无法取得正确的值。
loaded，返回一个数值，表示当前进度已经完成的数量，
该属性值除以total属性值，可以得到目前进度的百分比。
⑶ upload
upload是XMLHttpRequest对象的一个属性，其属性值亦是一个对象，
该对象定义了addEventListener()方法和整个progress事件集合。
代码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
</head>
<body>
<progress max="1" value="0"></progress>
<input type="file" name="tempFile" class="tempFile" multiple><br>
<button onclick="fileSubmit()">上传文件</button>
<script>
function fileSubmit() {
var files=document.querySelector('.tempFile').files;
// 发送文件需要使用POST方式，创建FormData对象。
var fileData=new FormData();
for (var i=0,file;file = files[i];i++){
// 将文件添加到FormData对象中。
fileData.append('fileName',file.name);
}
// 使用append方法添加到FormData的数据，并不是以对象属性的方式存储，外界无法直接访问到数据
// 需要使用 for of 方法才能在控制台中打印输出。
for (var value of fileData.values()){
console.log(value);
console.log(typeof value);
}
// Ajax请求对象
// var xhr=new XMLHttpRequest(); //直接创建
if (window.XMLHttpRequest){ //兼容性方式创建
var xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
var xhr=new ActiveXObject('');
}
// var xhr=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('');
// 监听请求响应通信状态
xhr.onreadystatechange=function () {
if (xhr.readyState==4){
if (xhr.status==200){
console.log(JSON.parse(xhr.responseText)); //FormData添加文件时，无法直接解析输出！
}
}
}
// 任务进度监听，当上传进度发生改变时，回调函数自动执行
var progressBar = document.querySelector('progress');
xhr.upload.onprogress=function(eve){
if (eve.lengthComputable){
progressBar.value = (eve.loaded/eve.total);
}
}
// 准备发送请求上传文件
xhr.open('post','progress.php',true);
xhr.send(fileData);
}
</script>
</body>
</html>
<?php
echo json_encode($_POST['fileName']);
?>
