옛날 코드 다시 읽기 3 (XMLHttpRequest)

  ajax라는 단어를 아는가? Asynchronous JavaScript And XML의 약자이다. xml은 json과 마찬가지로 데이터의 포맷 중 하나이다. 요즘이야 일반적으로 사용하지 않는 데이터 형태라서 익숙하지 않을 수 있지만, 뭐 아예 찾아볼 수 없을 정도로 사라진 데이터 형태는 아니다.

 하지만 우리가 axios, fetch, $.ajax등으로 비동기 호출을 할 때, 웬만하면 호출과 응답을 json형태로 보내지 xml 형태로 결과를 받거나 요청 시에 데이터형태로 사용하는 경우는 드믈다. 결론은 XML이라고 표기 되어있지만, 1999년 3월에 처음 만들어진 용어이고, json을 본격적으로 사용 한 건은 2000년대 초이기 때문에, 그저 네이밍의 실패 정도일뿐 xml을 굳이 알아야 할 필요는 없다고 본다.

 XMLHttpRequest

 XMLHttpRequest는 서버와 상호작용 할때 사용하는 수 있는 브라우저 내장객체이다. 2000년대 초에 처음 도입 되었다.

 XMLHttpRequest에서의 xml 또한 ajax처럼 xml이란 단어가 거의 의미가 없어졌다. XMLHttpRequest 서버 호출시 json형태로 호출하는 것이 지금은 지배적이다. 뭐 물론 직접적으로 사용해 본 적이 없는 개발자도 많을 것이다. 특히나 $.ajax가 나온 후부터는 웬만해서는 직접 호출 사용할 일 없었던 객체이다.

 그 이유는 사용법이 꽤나 불편하기 때문인데, 아니 반대로 $.ajax로 호출하는 것이 편했기 때문일 수도 있다. 이건 예시를 보여줄 테니 그때 확인해보자.

 하지만 여러 라이브러리에서 XMLHttpRequest를 사용한다.

 위의 이미지는 https://github.com/jquery/jquery/blob/main/src/ajax/xhr.js 코드의 일부분이다.

 위의 이미지는 https://github.com/axios/axios/blob/v1.x/lib/adapters/xhr.js 코드의 일부분이다.

 위처럼 axios, $.ajax 내부에서는 XMLHttpRequest를 사용하고 있는 것을 볼 수 있기에, 비동기 통신을 여러분이 사용한다면 XMLHttpRequest를 사용하고 있다고 보아도 무방하다.

 XMLHttpRequest 전 세대?

 위에서 말했다시피 ajax는 1999년 3월에 만들어진 용어이고, XMLHttpRequest는 2000년대에 만들어진 내장객체이다. 일반적으로 특정 용어는 이미 사용되어지고 있는 중에 용어가 정립되는 경우가 많다. ajax도 마찬가지이다. 1999년 3월부터 사용되던 기술이 아니라 그 이전에 사용하고 있었지만, 그 후에 이름이 만들어진 것이다.

 그렇다면 XMLHttpRequest가 만들어지기도 전에 개발자들은 비동기 호출을 사용했다는 건데 어떻게 한 것일까?

 FORM과 Frame의 조합

 위의 질문에 대한 내용은 간단하다. 사용자에게 노출이 되지 않는 frame을 만들고 비동기 호출이 필요한 시점에 form의 타겟을 해당 frame으로 지정하고 호출을 한다. 그리고 나서 frame에 로드 되는경우 데이터를 읽어와서, 메인  프레임에서 소비를 하면 그만 인 것이다.

 xml을 html처럼 frame에 작성하는 경우 domTree는 구성을 해줄테니, window.document.body.childNodes로 호출하는 것 만으로 데이터를 파싱 할 필요도 없으니, 간편하게 이용 했을 거라 본다.

 XMLHttpRequest 예제

 XMLHttpRequest의 예제는 적당히 살펴보기만 하도록 하자 굳이 이걸 이 시대에 직접 호출 하는 것은 바람직 하지 않다.  차라리 fetch를 사용 하는 것이 맞다고 본다.

 간단하게 작성해본 XMLHttpRequest를 사용한 호출과 fetch를 이용하여, 차이를 한번 확인해보았다. XMLHttpRequest는 promise를 지원하지 않기에 호출의 응답을 속성에 설정해야 한다. 또한 호출할 api와 호출이 각각의 함수로 지원을 하기에 설정해야 할 것이 꽤나 많다.

 요즘에는 거의 모든 호출을 비동기로 처리하고 있기 때문에 저렇게 코드량이 늘어나는 것은 좋지 않고, 또한 Promise를 지원 하지 않는 것은 많은 부분에서 실이 된다.

 상상해 보라. onreadystatechange내에서 또 XMLHttpRequest객체를 생성하고 응답에 대한 처리함수를 정의하고 url을 셋팅하고 send함수를 호출하게 되는 코드들을....