重复使用XMLHttpRequest对象还是创建一个新的对象？

Question

我搜索了stackoverflow，但得到了矛盾的答案:

为什么应该重用XmlHttpRequest对象？

Ajax密集页面：重用同一个XMLHttpRequest对象还是每次创建一个新的对象?

w3schools.com还有一个建议：

如果您的网站上有多个AJAX任务，您应该创建一个标准函数来创建XMLHttpRequest对象，并为每个AJAX任务调用此函数。

为什么会有这种建议？与此相反，我正在使用全局XMLHttpRequest对象来处理所有Ajax任务。

- gom

Answer 1

你误解了W3School的建议。以下是相关部分：

  

如果您在网站上有多个AJAX任务，则应创建一个标准的函数来创建XMLHttpRequest对象，并为每个AJAX任务调用此函数。

它说你可以使用一个AJAX函数来获取请求。这个函数会处理IE和其他浏览器之间的不一致性。在符合标准的浏览器中，使用XMLHttpRequest，在IE中使用ActiveXObject。

我建议您使用多个XHR对象。使用全局xhr对象，您的应用程序只能处理一个请求。 这也容易出错（例如：XMLHttpRequest启动多次而未触发onreadystatechange函数）。

W3schools的意思是:

function createXHR() {
    try {
        return new XMLHttpRequest();
    } catch (e) {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            return new ActiveXObject("Msxml2.XMLHTTP");
        }
    }
}
var xhr = createXHR();
xhr.open('get', '/test', true);
xhr.send();

虽然最好创建一个处理请求的函数，比如jQuery.ajax。

- Rob W

---

我认为他理解了建议，除非自那时起他编辑了他的问题。引用：“我正在替代使用一个全局XMLHttpRequest对象”——“替代”意味着与建议相反，显然他理解为不是单个全局而是多个实例。 - nafg

Answer 2

最好为每个XHR使用不同的对象。即使有一种方法可以做到，也要避免这样做！每个请求创建新的对象没有问题。如果您担心内存泄漏或类似问题，请不必担心，它们都会被正确地垃圾回收。

---

如果您的网站上有多个AJAX任务，则应创建一个标准函数来创建XMLHttpRequest对象，并为每个AJAX任务调用它。

这实际上意味着您有一个函数，每次调用该函数时都会创建一个新对象并返回它。就像这样：

function newXHR(){
    return a new instance of XHR();
}

- UltraInstinct

Answer 3

推荐的建议是你应该有一个处理AJAX的函数，而不是特定的XMLHTTPRequest对象。

我会为每个问题使用不同的XHR。

反对这种方法的常见论点涉及设置XHR的开销。然而，在任何使用AJAX的站点中，这几乎可以忽略不计（即不作为Web套接字的劳动替代品），而且无论如何，重复使用XHR会有相同的开销。您仍然需要打开连接、触发它、附加侦听器等操作。

浏览器在允许同时进行多少连接网关方面存在差异，因此由浏览器控制XHR可以做什么。换句话说，您不必担心管理此方面。

最后，只要它们是可删除的（对象的属性而不是变量），就没有阻止您手动删除XHRs。

- Mitya

Answer 4

来自MDN Web Docs：

如果全局使用httpRequest变量，调用makeRequest()的竞争函数可能会相互覆盖，导致竞态条件。将httpRequest变量声明为包含AJAX函数的闭包的本地变量可以避免这种情况。

来源：https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAX/Getting_Started

- gom

Answer 5

我正在使用这样的模式。

var xhrSendBuffer = new Object();
function sendData(url, model) {
    if (!xhrSendBuffer[url]) {
        let xhr = new XMLHttpRequest();
        xhr.onloadend = xhrDone;
        xhr.error=xhrError;
        xhr.onabort = xhrAbborted;
        xhr.open('POST', url, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhrSendBuffer[url] = xhr;
    }

    xhrSendBuffer[url].send(JSON.stringify(model));
}

function xhrDone(e) {
    console.log(e);
}
function xhrError(e) {
    console.error(e);
}
function xhrAbborted(e) {
console.warn(e);
}

如果我在自己的网站上发送多个请求到同一URL时，可能会因此导致DOS攻击，那么我可以使用xhr.readyState来查看它有多忙，然后再发送下一个请求。不过，我还没有遇到这个问题。

- Walter Verhoeven