XMLHttpRequest를 정말로 이해하고 계시나요?

브라우저와 서버 간의 통신이라고 하면 가장 먼저 떠오르는 기술은 Ajax일 것이다. ES6은 Ajax를 Promise로 캡슐화하는 것과 동일하고 동기 작업과 더 유사한 fetch API도 제공합니다. 이 두 가지 방법을 간략하게 살펴보겠습니다.

확실히 fetch 방법이 더 간결해 보이고 fetch 자체에도 좋은 기능이 많이 있습니다. fetch의 아동용 신발에 대해 더 자세히 알고 싶다면 Ruan Yifeng 선생님의 블로그인 Fetch API 튜토리얼을 확인하세요. (ps: 프런트 엔드에서 Ruan Yifeng을 모른다면 모든 기술을 배우는 것은 헛된 일입니다.) 본 글에서는 ES5의 Ajax 기술의 핵심인 XMLHttpRequst 객체(이하 XMLHttpRequest 객체를 XHR 객체라 함)의 사용법과 XHR 객체의 일부 속성에 대해 주로 설명한다.

XHR 객체를 사용하고 싶으면 당연히 새로운 XHR 객체를 먼저 생성해야 합니다

Tip: IE7 이전의 브라우저에서는 호환성 문제가 있을 수 있겠지만, 아직도 IE7을 사용하는 사람들이 있나요? 이전 브라우저는 2021년 프로그래머가 작성한 웹페이지를 사용할 자격이 없습니다.

먼저 XHR의 ReadyState 속성에 대해 이야기해 보겠습니다. 이 속성은 요청/응답 프로세스의 현재 단계, 즉 요청/응답 이벤트가 얼마나 진행되었는지를 나타냅니다. 이 속성에는 5개의 값이 있습니다.

ReadyState 값이 한 번 변경되면 onreadystatechange 이벤트가 트리거됩니다. 즉, 실제로 요청/응답은 onreadystatechange 이벤트를 4번 트리거하지만 일반적으로 우리는 ReadyState가 4인 완료 단계에만 관심이 있습니다. 그러면 XHR의 또 다른 속성인 상태에 대해 이야기해 보겠습니다. 이 속성의 값은 http 요청의 응답 코드입니다. 예, 200, 304, 404, 500 등입니다. 응답 본문으로 반환되는 텍스트인 responseText 속성도 있습니다. 이러한 개념을 명확히 한 후 이벤트 응답 함수를 XHR 개체의 onreadystatechange 이벤트에 바인딩할 수 있습니다.

이벤트 응답 함수를 onreadystatechange 이벤트에 바인딩한 후 요청이 시작됩니다. 요청과 관련된 첫 번째 함수는 open() 입니다. 이 함수는 다음 세 가지 매개변수를 받습니다.

하지만 명확히 말하면 open() 메서드를 호출한 후 요청이 실제로 전송되지는 않지만 요청이 준비됩니다.

이때 군대는 open() 메소드를 통해 원정 준비를 마치고 식량, 풀, 장비를 모두 갖추고 소집하라는 총사령관의 명령을 기다리고 있다. send() 메소드.

실제로 요청을 보내는 데는 send() 메서드가 사용됩니다. send() 메소드는 요청 본문(POST 메소드와 GET 메소드의 차이점)으로 서버에 전송되는 객체 매개변수를 수신합니다. get 요청 메소드를 사용하는 경우 직접 비워 둘 수 있지만 일부 브라우저와의 호환성을 위해 null을 전달하는 것이 좋습니다.

지금까지 XHR 객체에 대한 Ajax의 기본 단계는 완료되었습니다. 응답을 받은 후 요청 헤더 및 기타 메소드를 설정하는 것에 대해서는 여기서는 캡슐화된 Ajax를 넣지 않겠습니다. 함수로 이 글을 마무리하겠습니다