细说XMLHttpRequest如何使用详解

习惯了jquery，axios 等发送网络请求，今天我们来介绍另一个XMLHttpRequest对象

XMLHttpRequest(XHR)是一个API对象，其中的方法可以用来在浏览器和服务器端传输数据。这个对象是浏览器的js环境提供的。从XHR获取数据的目的是为了持续修改一个加载过的页面，XHR是ajax设计的底层概念。XHR使用的协议不同于HTTP，不仅可以使用XML格式的数据，也支持JSON，HTML或者纯文本。

使用XMLHttpRequest发送get请求

var xhr = new XMLHttpRequest();
xhr.open("get","http://127.0.0.1:3000?name=luweipai");
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status ===200){
        console.log(xhr.responseText);
    }
}
xhr.onerror = function (error) {
    console.log(error)
}

使用XMLHttpRequest发送post请求

var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:3000/post");
xhr.send();
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status ===200){
        console.log(xhr.responseText);
    }
}
xhr.onerror = function (error) {
    console.log(error)
}

携带header请求头

var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:3000/post");
xhr.setRequestHeader('X-CSRF-TOKEN', token); // 设置token
xhr.setRequestHeader("content-Type","application/json");//设置content-Type
xhr.send(JSON.stringify({name:"js",age: 18}));
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status ===200){
        console.log(xhr.responseText);
    }
}
xhr.onerror = function (error) {
    console.log(error)
}

post请求头的常见数据格式

1、application/json（JSON数据格式）

xhr.setRequestHeader("Content-type","application/json; charset=utf-8");

2、application/x-www-form-urlencoded

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");

3、multipart/form-data

xhr.setRequestHeader("Content-type", "multipart/form-data; charset=utf-8");

4、text/xml

xhr.setRequestHeader("Content-type", "text/xml; charset=utf-8");

使用XMLHttpRequest上传文件

......
var formData = new FormData();
formData.append('file', file);
formData.append('size', sizeValue);
var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:3000/post");
xhr.setRequestHeader('X-CSRF-TOKEN', token); // 设置token
xhr.setRequestHeader("content-Type","application/json");//设置content-Type
xhr.send(formData);
xhr.onreadystatechange = function() {
    if(xhr.readyState === 4 && xhr.status ===200){
        console.log(xhr.responseText);
    }
}
xhr.onerror = function (error) {
    console.log(error)
}

使用XMLHttpRequest下载文件

......
var xhr = new XMLHttpRequest();
xhr.open("post","http://127.0.0.1:3000/post");
xhr.setRequestHeader('X-CSRF-TOKEN', token); // 设置token
xhr.responseType = 'blob'; // 返回类型blob

xhr.onload = function (e) {
  if (this.status === 200) {
    const blob = this.response;
    const reader = new FileReader();
    reader.readAsDataURL(blob); // 转换为base64，可以直接放入a表情href
    reader.onload = function (e) {
      const a = document.createElement('a');
      a.download = 'abc.doc';
      a.href = e.target.result;
      document.documentElement.appendChild(a);
      a.click();
      a.remove(); // 等价于document.documentElement.removeChild(a);
    };
  }
};
xhr.send();

以上这篇细说XMLHttpRequest如何使用详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持芦苇派。