JavaScript_02. 문법_11_XMLHttpRequest

※ 본 내용은 해당 교재를 참고하여 공부한 내용과 본인의 생각을 정리한 글입니다.

https://www.yes24.com/Product/Goods/105608999

바닐라 자바스크립트 - 예스24

 

 

 XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용된다. 전체 페이지를 새로 고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있다.

 

XMLHttpRequest는 이름에 XML이 붙어서 xml 데이터 통신으로 오해할 수 있는데, 모든 종류의 데이터를 받아올 수 있다.

 

 

● 객체 생성

XHLHttpRequest 객체는 브라우저에서 제공하는 Web API 이기 때문에 브라우저 환경에서만 정상적으로 동작된다. node.js 환경에서는 제공되지 않는다. XHLHttpRequest 생성자 함수를 호출해서 생성 한다.

 

const xhr = new XMLHttpRequest();

 

 

●  요청 전송

클라이언트(브라우저)에서 서버로 요청을 보내기 위해서는 HTTP Method, 요청 URL을 정의하는 것부터 시작한다. XHLHttpRequest의 내장 함수인 open()을 이용한다.

 

 

●  HTTP Method, URL 정의

xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1");

 

HTTP Method	설명
GET	리소스 요청
POST	리소스 생성
PUT	리소스 수정
PATCH	리소스 일부 수정
DELETE	리소스 삭제

 

 

open() 함수로 HTTP 요청 방식과 요청 URL을 정의했다고 해서 바로 실행이 되는 것은 아니다. 클라이언트에서 서버로 HTTP 요청을 하기 전에 요청에 맞는 헤더 값을 설정해야 한다.

 

setRequestHeader() 함수를 통해서 요청 헤더 값을 설정할 수 있다. 일반적으로 요청할 때 서버로 전송하는 데이터의 타입을 선언하기 위한 용도로 많이 사용한다.

헤더 값 중 content-type에 해당한다. 은 서버로 전송할 데이터의 MIME 타입 정보를 설정한다. 웹 개발 시 자주 사용하는 MIME 타입은 크게 3가지다.

 

+ 231122 PATCH에 대해서는 나중에 따로 정리 할 계획.

 

MIME 타입	content-type 값	목적
application	application/json	json 데이터 전송
text	text/plain	텍스트 데이터 전송
multipart	multipart/form-data	파일 전송

다음과 같이 요청을 위한 content-type을 정의할 수 있다.

 

ㆍ헤더 값 중 content-type 정의

xhr.setRequestHeader("content-type", "application/json");

 

open() 함수와 setRequestHeader() 함수로 요청에 필요한 정의가 끝나면 최종적으로 send() 함수를 통해 요청을 보내게 된다. 이때 서버로 전송할 데이터가 있다면 send() 함수에 매개변수로 데이터를 전달하면 됩니다. 전달된 데이터는 request의 body에 담겨 전송된다.

 

 단, HTTP 요청 방법이 GET인 경우는 send() 함수에 매개변수로 데이터를 전달해도 전달한 데이터는 실제로는 전송되지 않는다.

 

HTTP 요청 방식 중 POST를 사용해서 데이터를 전송하는 예제 코드

 

 

●  응답 처리

클라이언트에서 서버로 요청을 전송하면, 서버는 요청한 결과를 응답하게 됩니다. XMLHttpRequest 객체가 발생시키는 이벤트를 통해서 서버가 전송한 응답을 처리할 수 있다.

 

 

●  테스트

 요청 전송에 대한 응답 처리를 해줄 수 있는 가짜 서버를 만들어서 사용 방법을 배워보자. 여기서는  JSONPlaceholder(https://json-placeholder.typicode.com/)라는 테스트를 위한 가짜 서비스를 이용하였다.

 

 JSONPlaceholder 에서는 다음과 같이 테스트를 위한 리소스를 제공한다.

ㆍ/posts

ㆍ/comments

ㆍ/albums

ㆍ/photos

ㆍ/todos

ㆍ/users

 

 다음과 같이 open() 함수의 URL에 " https://json-placeholder.typicode.com/"를 인수로 넘기면 100개의 데이터를 받아오게 된다.

 

해당 주소에서 데이터를 받아오는 예제 코드

 

결과

 

전체 데이터 중 특정 id에 해당하는 데이터만 가져오고 싶다면 요청 URL을 다음과 같이 작성하면 된다.

 

https://json-placeholder.typicode.com/posts/:id

 

만약 id가 1번인 데이터를 가져오고 싶다면, https://json-placeholder.typicode.com/posts/1 로 호출하면 된다.

 

이번에는 데이터를 생성해보록 하자.

 

데이터 생성 예제 코드

 

결과

결과 (201 Created)

 

이번에는 id가 1인 데이터를 수정해보자.

 

데이터 수정 예제 코드

 

결과

 

id가 1인 데이터를 삭제해보자.

 

데이터 삭제 예제 코드

 

결과

 

 요청한 것에 대해 응답이 성공(status: 200)으로 와서 밑에 에러 로그가 아닌 정상적인 로그가 콘솔에 찍힌 것을 볼 수 있다.