xhr ajax超时时间,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(默认值)，表示没有时间限制！

代码示例html>

登录账户

登录密码

登录

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);*/

}

/*    $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，设置任务当前进度值。

注意：需要与JS配合使用显示任务进度；

不能用于表示度量衡，如存储空间使用情况(使用标签)

⑵ progress常用属性

lengthComputable，返回一个布尔值，表示当前进度是否有可计算长度，

默认为true，表示进度没有100%，进度100%时变为false；

total，返回一个整数，表示当前进度的总长度，

如果是通过HTTP下载资源，表示内容本身长度，不包含HTTP头部的长度，

如果lengthComputable属性值为false，则total属性无法取得正确的值。

loaded，返回一个数值，表示当前进度已经完成的数量，

该属性值除以total属性值，可以得到目前进度的百分比。

⑶ upload

upload是XMLHttpRequest对象的一个属性，其属性值亦是一个对象，

该对象定义了addEventListener()方法和整个progress事件集合。

代码示例：

html>

上传文件

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);

}

echo json_encode($_POST['fileName']);

?>