XMLHttpRequest 개체를 재사용하시겠습니까? 아니면 새 개체를 만드시겠습니까?

XMLHttpRequest 개체를 재사용하시겠습니까? 아니면 새 개체를 만드시겠습니까?

스택 오버플로를 검색했지만 모순되는 답변을 받았습니다.

XmlHttpRequest 개체를 재사용해야 하는 이유는 무엇입니까?

Ajax-intensive 페이지: 동일한 XMLHtpRequest 개체를 재사용하거나 매번 새 개체를 생성하시겠습니까?

또한 w3schools.com 에 추천할 만한 것이 있습니다.

웹 사이트에 둘 이상의 AJAX 작업이 있는 경우 XMLHttpRequest 개체를 만들기 위한 하나의 표준 함수를 만들고 각 AJAX 작업에 대해 이 함수를 호출해야 합니다.

이 추천 이유는?나는 대신 모든 Ajax 작업을 처리하기 위해 내 페이지의 글로벌 XMLHtpRequest 개체를 사용하고 있습니다.

W3스쿨의 추천을 오해하셨습니다.관련 부분을 강조하겠습니다.

웹 사이트에 둘 이상의 AJAX 작업이 있는 경우 XMLHttpRequest 개체를 만들기 위한 하나의 표준 함수를 만들고 각 AJAX 작업에 대해 이 함수를 호출해야 합니다.

요청을 가져올 때 AJAX 함수 하나를 사용한다고 나와 있습니다.이 기능은 IE와 다른 브라우저 간의 불일치 문제를 다룰 것입니다.XMLHttpRequest표준 호환 브라우저 및ActiveXObjectIE에서

여러 개의 XHR 객체를 사용하는 것을 추천합니다.하나의 전역 xhr 개체를 사용하면 응용 프로그램은 한 번에 하나의 요청만 처리할 수 있습니다.또한 오류가 발생하기 쉽습니다(예: XMLHtpRequest가 onready state changes 기능을 시작하지 않고 여러 번 실행됨).

W3 학교는 다음과 같은 의미가 있었습니다.

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();

와 같이 요청을 처리하는 기능을 만드는 것이 더 좋습니다.

만드는 XHR마다 다른 개체를 사용하는 것이 좋습니다.방법이 있다 하더라도 피하세요!요청할 때마다 새 개체를 생성하는 데 문제가 없습니다.메모리 누수 등이 우려된다면 걱정하지 마십시오. 모두 적절한 GC입니다.

---

웹 사이트에 둘 이상의 AJAX 작업이 있는 경우 XMLHttpRequest 개체를 만들기 위한 하나의 표준 함수를 만들고 각 AJAX 작업에 대해 이 함수를 호출해야 합니다.

이는 실제로 새로운 객체를 생성하고 부를 때마다 이를 반환하는 하나의 기능이 있다는 것을 의미합니다.다음과 같습니다.

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

강조 표시하는 권장 사항은 XMLHTTPRequest 개체가 아닌 AJAX를 처리하는 기능이 하나 있어야 한다는 것입니다.

저는 질문마다 다른 것을 사용할 것입니다.

이에 반대하는 일반적인 주장은 XHR 설정에 관련된 오버헤드에 관한 것입니다.그러나 이는 의도한 대로 AJAX를 사용하는 사이트에서는 거의 무시할 수 있으며(즉, 웹 소켓의 작업 대체물이 아님), 어떤 경우에도 XHR을 재사용할 때 동일한 오버헤드의 대부분이 적용됩니다.연결을 열고 발사하고 청취자를 부착하는 등의 작업을 계속해야 합니다.

브라우저는 특정 시간에 허용되는 연결 게이트웨이의 수에 따라 다르므로 XHR이 무엇을 할 수 있는지는 브라우저에 달려 있습니다.다시 말해, 이 측면을 관리하는 것에 대해 걱정할 필요가 없습니다.

마지막으로 XHR이 삭제 가능한 경우(변수가 아닌 객체의 속성) 사용 후 수동으로 XHR을 삭제하는 것을 막을 수 없습니다.

MDN 웹 문서에서:

httpRequest 변수가 전역적으로 사용되는 경우 makeRequest()라는 경쟁 함수가 서로 덮어쓰기되어 경합 조건이 발생할 수 있습니다.httpRequest 변수 local을 AJAX 함수를 포함하는 폐쇄로 선언하면 이 문제가 방지됩니다.

출처 : https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

이런 패턴으로 하고 있습니다.

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를 사용하여 얼마나 바쁜지 확인할 수 있습니다. 하지만 아직 문제가 되지 않았습니다.

언급URL : https://stackoverflow.com/questions/11502244/reuse-xmlhttprequest-object-or-create-a-new-one