一、介绍
本文是《详解XMLHttpRequest》系列的第二篇。在第一篇文章中,我们深入学习了XMLHttpRequest对象的用法、属性和方法。在本文中,我们将了解更多的响应属性、二进制数据和监测上传、下载进度的相关知识。
二、响应属性
在发送XMLHttpRequest请求后,可以使用以下响应属性来获取请求的响应。
1. responseText
responseText属性返回作为响应主体被返回的文本。
当响应的内容类型是"text/plain"、"text/html"或"application/xml"时,可以使用responseText属性获取响应的纯文本内容。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
};
xhr.send();
在上面的代码中,“example.php”是服务器的响应文件,响应类型为"text/plain"、"text/html"或"application/xml"。
2. responseXML
responseXML属性返回包含响应数据的XML对象。
当响应的内容类型是"application/xml"或"text/xml"时,可以使用responseXML属性获取响应的XML对象。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.xml', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseXML);
}
};
xhr.send();
在上面的代码中,“example.xml”是服务器的响应文件,响应类型为"application/xml"或"text/xml"。
3. status
status属性返回响应的HTTP状态码。
当请求成功完成时,status属性的值是200;当请求被重定向时,status属性的值是300,301,302或307;当请求失败时,status属性的值是400或更高;当服务器错误时,status属性的值是500或更高。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200){
console.log('请求成功');
}else{
console.log('请求失败');
}
}
};
xhr.send();
在上面的代码中,“example.php”是服务器的响应文件。
4. statusText
statusText属性返回响应的HTTP状态文本。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.php', true);
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
console.log(xhr.status, xhr.statusText);
}
};
xhr.send();
在上面的代码中,“example.php”是服务器的响应文件。
三、二进制数据
XMLHttpRequest可以发送和接收二进制数据。
1. responseType
responseType属性用于设置响应类型。
当responseType属性设置为"arraybuffer"时,响应数据将以ArrayBuffer对象的形式返回。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.png', true);
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var blobUrl = URL.createObjectURL(new Blob([xhr.response]));
console.log(blobUrl);
}
};
xhr.send();
在上面的代码中,“example.png”是服务器的响应文件,响应数据为图片二进制数据。
2. response
response属性包含请求的响应数据。
当requestType属性设置为"arraybuffer"时,response属性返回ArrayBuffer对象。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.png', true);
xhr.responseType = 'arraybuffer';
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var img = new Image();
img.onload = function(){
document.body.appendChild(img);
};
img.src = URL.createObjectURL(new Blob([xhr.response]));
}
};
xhr.send();
在上面的代码中,“example.png”是服务器的响应文件,响应数据为图片二进制数据。
四、监测上传下载进度
可以使用XMLHttpRequest对象的progress事件来监测上传和下载的进度。
1. 上传进度
可以使用XMLHttpRequest对象的upload属性来获取上传进度。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.upload.onprogress = function(evt){
if(evt.lengthComputable){
console.log('上传进度:' + evt.loaded + '/' + evt.total);
}
};
xhr.send(new FormData(document.getElementById('form')));
在上面的代码中,“upload.php”是服务器的响应文件,“form”是提交的表单。
2. 下载进度
可以使用XMLHttpRequest对象的onprogress事件来获取下载进度。
示例代码:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.png', true);
xhr.onprogress = function(evt){
if(evt.lengthComputable){
console.log('下载进度:' + evt.loaded + '/' + evt.total);
}
};
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
var img = new Image();
img.onload = function(){
document.body.appendChild(img);
};
img.src = URL.createObjectURL(new Blob([xhr.response]));
}
};
xhr.responseType = 'arraybuffer';
xhr.send();
在上面的代码中,“example.png”是服务器的响应文件,响应数据为图片二进制数据。
五、总结
本文介绍了XMLHttpRequest对象的响应属性、二进制数据和监测上传下载进度的相关知识,通过示例代码进行了详细的讲解。阅读本文可以帮助你更好地理解XMLHttpRequest的相关知识。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度 - Python技术站