一页面多XMLHttpRequest对象

一页面多XMLHttpRequest对象是指在同一个页面中，使用多个XMLHttpRequest对象来向服务器同时发送多个异步请求。这样可以加快页面的加载速度，提升用户体验，但要注意控制并发请求的数量，避免过度消耗服务器资源。

一页面多XMLHttpRequest对象是指在同一个页面中，使用多个XMLHttpRequest对象来向服务器同时发送多个异步请求。这样可以加快页面的加载速度，提升用户体验，但要注意控制并发请求的数量，避免过度消耗服务器资源。

下面是一些实现多XMLHttpRequest对象的方法和示例：

方法一：手动创建多个XMLHttpRequest对象

在JavaScript中，可以通过手动创建多个XMLHttpRequest对象来实现一页面多XMLHttpRequest对象的效果。每个XMLHttpRequest对象都可以执行一个异步请求，通过监听onreadystatechange事件，可以判断请求是否成功，并把返回的数据添加到页面中。

示例代码如下：

var xhr1 = new XMLHttpRequest();
xhr1.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 处理数据
        document.getElementById("result1").innerHTML = this.responseText;
    }
};
xhr1.open("GET", "http://example.com/api1", true);
xhr1.send();

var xhr2 = new XMLHttpRequest();
xhr2.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 处理数据
        document.getElementById("result2").innerHTML = this.responseText;
    }
};
xhr2.open("GET", "http://example.com/api2", true);
xhr2.send();

在示例代码中，通过创建xhr1和xhr2两个XMLHttpRequest对象，同时向服务器发送两个异步请求。在onreadystatechange事件中判断请求是否成功，成功则把返回的数据添加到id为result1和result2的元素中。

方法二：使用Promise和async/await

另一种方法是使用ES6中的Promise对象和async/await函数来处理多XMLHttpRequest对象。通过将每个请求封装为一个Promise对象，再使用async/await函数执行这些Promise对象，可以在代码中比较清晰地展示多个异步请求的执行过程。

示例代码如下：

function makeRequest(url) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                resolve(this.responseText);
            }
        };
        xhr.onerror = function() {
            reject(new Error("Request failed: " + url));
        };
        xhr.send();
    });
}

async function getData() {
    try {
        var data1 = await makeRequest("http://example.com/api1");
        document.getElementById("result1").innerHTML = data1;
        var data2 = await makeRequest("http://example.com/api2");
        document.getElementById("result2").innerHTML = data2;
    } catch (e) {
        console.log(e);
    }
}

getData();

在示例代码中，makeRequest函数用于封装每个异步请求，返回一个Promise对象。在getData函数中，通过await关键字来执行每个Promise对象，等待异步请求的完成并处理返回的数据。若请求失败，则会抛出一个异常，可以通过捕获异常来处理错误。最终，页面中id为result1和result2的元素将展示返回的数据。

总之，实现一页面多XMLHttpRequest对象可以采用多种方法，手动创建多个XMLHttpRequest对象和使用Promise与async/await是最常用、最简单的方法之一。在实际应用中，需要注意控制并发请求的数量和请求间的优先级，以达到更好的性能和用户体验。