vue2之XMLHttpRequest原生请求与前端发起XML请求，校验下载文件是否可下载

本文链接：https://blog.youkuaiyun.com/weixin_43845137/article/details/129716837

文章详细介绍了在Vue2环境下如何使用XMLHttpRequest进行GET和POST请求，包括校验下载文件是否可下载的方法，以及发送JSON和formData格式的数据。同时提到了使用Content-Type设置及处理含有中文字符的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2之XMLHttpRequest原生请求与前端发起XML请求，校验下载文件是否可下载

vue2之前端发起XML请求，校验下载文件是否可下载

            var xhr = new XMLHttpRequest();
            xhr.withCredentials = true;
            var timeStart = '';
            var timeEnd = '';
            var time = new Date().getTime();
            xhr.addEventListener('readystatechange', function() {
                if (this.readyState == 1) {
                    timeStart = new Date().getTime();
                }
                if (this.readyState === 4) {
                    timeEnd = new Date().getTime();
                    // 若是接口连接不上的 则使用这种骚操作
                    if (timeEnd - timeStart < 3000) {
                        // console.log('可下载', i);
                        that.downloadIP = ip;
                    } else {
                        console.log('不可下载', i);
                    }
                }
            });
            xhr.open('GET', `https://${ip}:8092/curl?t=` + time);
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.send('');

XML发起post请求 json格式

var xhr = new XMLHttpRequest();
var url = "http://example.com/api";
var data = {name: "张三", age: 20}; // 请求数据，包含中文字符
var json = JSON.stringify(data); // 将请求数据转换为json格式

xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(json);

XML发起post请求 formData格式

var xhr = new XMLHttpRequest();
var url = "http://example.com/api";
var data = new FormData(); // 创建一个formData对象
data.append("name", "张三"); // 添加请求参数，包含中文字符
data.append("age", 20);

xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(data);

var xhr = new XMLHttpRequest();
var url = "http://example.com/api";
var params = "name=张三&age=20"; // 请求参数，包含中文字符

var data = new FormData();
params.split("&").forEach(function(param) {
    var parts = param.split("=");
    data.append(parts[0], decodeURIComponent(parts[1])); // 解码并添加请求参数
});

xhr.open("POST", url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send(data);
```
## XML发起get请求
```js
var xhr = new XMLHttpRequest();
var url = "http://example.com/api?name=张三&age=20"; // 请求URL，包含请求参数

xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();
```