[JavaScript] HTTP 통신하기(XMLHttpRequest) - 1

JCH27·2023년 12월 28일

JavaScript http

javascript

목록 보기

2/3

JavaScript HTTP 통신 방법을 정리해보는 첫 번째 시간이다.
XMLHttpRequest 객체를 부숴보자

XMLHttpRequest란?

브라우저에서 제공하는 객체로, JavaScript를 사용하여 서버와 비동기 통신을 할 수 있으며, AJAX(Asynchronous JavaScript and XML) 기술을 구현할 수 있다.

XMLHttpRequest 사용법

XMLHttpRequest 객체의 생성자 함수를 사용해 인스턴스를 생성한다.
생성된 인스턴스의 메서드를 사용해 통신을 정의하고 HTTP 통신을 요청한다.

XMLHttpRequest 객체의 주요 메서드와 프로퍼티

open(method, url, async) : XMLHttpRequest(이하 xhr) 객체의 메서드로, HTTP 요청을 초기화하고 전달인자에 메서드와 서버 경로, 통신방법을 정의한다.

send(data) : xhr 객체의 메서드로, open() 메서드에 정의된 방식으로 서버에 요청을 보낸다. POST 요청 시 data를 전달인자로 받는다.

setRequestHeader(header, value) : xhr 객체의 메서드로 open()과 send()사이에 작성하며 HTTP 헤더를 설정한다. 데이터 유형을 정의한다.

거두절미 하고 XMLHttpRequest로 간단한 코드를 작성해보도록 하겠다.
HTTP GET 통신으로 불러온 JSON 텍스트 데이터를 h1 태그로 랜더링하고 버튼 클릭 시 id 값을 하나씩 추가하여 비동기적으로 화면을 랜더링 하는 코드를 작성해 보도록 하겠다.

  // url 경로 선언
  	let num = 1;
  	let url = `https://jsonplaceholder.typicode.com/todos/${num}`;

  // XMLHttpRequest 생성자 함수를 사용해 객체의 인스턴스를 생성한다.
	const xhr = new XMLHttpRequest();
	
	// 생성한 인스턴스의 open 메서드를 사용해 HTTP 요청을 초기화하고 메서드(동작)와 서버 경로를 정의한다.
	// open 메서드의 전달인자는 3개이다.
	// 1. method : 통신 유형 ('GET', 'POST' 등)
	// 2. url : 서버 경로
 	// 3. async : 비동기 여부 (기본값 : true)
	xhr.open('GET', url);

	// serRequestHeader 메서드를 사용해 통신할 데이터의 유형을 정의한다.
	xhr.setRequestHeader('content-type','application/json');
	
	// send 메서드를 사용해 HTTP 통신을 요청한다.
	xhr.send();
	
	// onload 메서드를 사용하면 xhr 객체가 통신에 성공한 경우(200) 콜백함수를 실행한다.
	xhr.onload(()=>{
    	if(request.readyState !== XMLHttpRequest.DONE) return;
      
		// 통신을 성공(200)하면
  		if(request.status === 200){
    		console.log(JSON.parse(request.response));
          	// JSON 문자열을 파싱하여 데이터로 저장한다.
    		const data = JSON.parse(request.response);
    		console.log(data['title']);
          	// 요소에 데이터를 출력한다.
    		document.querySelector('h1').innerText=`${data['title']}(${data['id']})`;
  		}else{
    		console.log('no');
  		}
	 });

	// 버튼 클릭 시 url 매개변수를 바꾸어 다시 요청한다.
	document.querySelector('.btn01').addEventListener('click',()=>{
  		num = num+1;
  		url = `https://jsonplaceholder.typicode.com/todos/${num}`;
  		console.log(url);
  		// 오픈하고 => 데이터 요청 방식 정의
  		request.open('GET',url);
  		// 데이터 타입 정의
  		request.setRequestHeader('content-type','application/json');
  		// 요청 보내기
  		request.send();
	});