详解XMLHttpRequest（二）响应属性、二进制数据、监测上传下载进度

一、介绍

本文是《详解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”是服务器的响应文件，响应数据为图片二进制数据。