최근 한 친구가 Ajax 장기 연결 프로젝트를 진행 중이었습니다. 서버와의 긴 연결을 유지해야 하는 페이지가 있었고 연결 시간이 초과된 후 연결을 다시 요청해야 했습니다. 그 친구가 저에게 무엇을 원하는지 물었습니다. 사용하라고 해서 jQuery에 대해 생각도 하지 않고 사용하라고 했습니다. jQuery에는 ajaxSuccess ajaxError 객체가 없나요? 요청이 완료되거나 요청이 실패한 후에 다시 요청하는 것이 좋지 않을까요?
그런데 그는 jQuery를 사용하지 않고 수동으로 XMLhttprequest를 작성했다고 말했습니다. 처음에는 jquery로 작성했는데 테스트 과정에서는 문제가 없었다고 하더군요. 그러나 나중에 우연히 페이지가 오랫동안 열려 있으면 브라우저 리소스 사용량이 매우 높아 메모리가 부족하고 충돌이 발생한다는 것을 우연히 발견했습니다. 나중에 패킷 캡처 분석에서는 각 jquery Ajax 요청이 xmlHttprequest 객체를 생성한다는 사실을 발견했습니다. 이론적으로 긴 연결에 대한 요청은 무한 반복이며 요청 수가 매우 많습니다. 게다가 jquery는 리소스를 자동으로 재활용하지 않으므로 메모리 오버플로가 발생합니다.
jquery API를 살펴보면 jquery에도 요청 완료 후(요청 성공 또는 실패 후 호출) 콜백 함수인 완전한 객체가 있다는 것을 알았습니다. XMLHttpRequest와 textStatus라는 두 개의 매개변수가 동시에 있습니다. 따라서 요청이 완료된 후 반환된 XMLHttprequest 객체만 수동으로 재활용하면 됩니다. 코드는 다음과 같습니다.