[ javascript ] 자바스크립트에서 네트워크 통신하는 법 (XMLHttpRequest)

*두서없음 주의, 손가락으로 기억할려고 두서없이 적고, 그냥 외우려고 기록

 

XMLHttpRequest(XHR)

XMLHttpRequest(XHR) 객체는 서버와 인터랙트하는 것에 사용된다.

웹 페이지를 리로딩 하지 않고(without having to do a full page refresh),

URL로부터 데이터를 가지고 올 수 있다[얻을 수 있다]. XMLHttpRequest 객체는

사용자가 하는 중인 것을 방해하지 않고, 웹 페이지가 페이지의 일부만을 업데이트하는 것을 가능하게 한다.

XMLHttpRequest의 이름에도 불구하고 XMLHttpRequest는

XML이 아닌 어떤 타입의 데이터라도 가지고 오는 것에 사용될 수 있다.

네트워크 통신에서 서버로부터 event 데이터 또는 메시지 데이터를 받는 것이

(필수요소로써) 수반되어야만 한다면 EventSource 인터페이스를 통해서 server-sent events를 사용하는 것을 고려해라

For full-duplex communication, WebSockets may be a better choice. 양방향 통신에서는 웹 소켓이 더 나은 선택일 것이다.

 

XMLHttpRequest() 생성자는 XMLHttpRequest를 초기화한다.

 

XMLHttpRequest Instance properties

XMLHttpRequest 인터페이스를 구현한 객체는 XMLHttpRequestEventTarget의 속성과 EventTarget의 속성을 사용할 수 있다.

XMLHttpRequest 인터페이스가 XMLHttpRequestEventTarget을 상속받았고,

XMLHttpRequestEventTarget이 EventTarget을 상속받았기 때문이다.

 

XMLHttpRequest.readyState는 Read only(읽기 전용)로

XMLHttpRequest 객체가 현재 어떤 상태에 있는지를 숫자로 반환한다.

 

XMLHttpRequest.response도 읽기 전용 속성,

XMLHttpRequest 객체의 responseType 속성 값에 따라 (서버로부터 반환되는 응답 데이터의 형식이 결정되며)

그 형식은 ArrayBuffer, Blob, Document, 자바스크립트 객체, 또는 문자열중 하나로 반환한다.

응답 본문은 XMLHttpRequest.response 속성에서 확인할 수 있다.

 

XMLHttpRequest.status는 클라이언트의 요청에 대한 HTTP response status code를 반환한다.

HTTP response status codes(클라이언트의 요청에 대한 서버로부터 전달받은 응답 객체의 상태를 나타내는 코드들은)

지정한 HTTP 요청이 성공적으로 완료되었지에 대한 여부를 가리킨다.

XMLHttpRequest.status의 값이 200에서 299사이라면 클라이언트의 요청에 성공적으로 응답이 왔다는 것을 의미한다.

400번대는 클라이언트의 오류, 500번대는 서버의 오류다.

---

AJAX는 Asynchronous Javascript And XML의 약어로 서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술을 의미한다.

AJAX는 서버와 통신하는 기술, 서버는 클라이언트가 데이터를 요청할 때 요청에 맞는 데이터를 보내주는 프로그램을 의미한다.

클라이언트는 서버에 데이터를 요청할 때 원하는 데이터 1. URL로 2. GET 요청을 해야한다. GET요청을 하는 법은 1. 브라우저의 주소창에 url을 입력하거나 2. 버튼을 누름으로써 get요청이 가능한 경우도 있다 3. 또는 AJAX로 get요청을 할 수도 있다. AJAX로 서버에게 GET요청을 하는 경우 새로고침 없이 데이터를 가져올 수 있다. AJAX는 새로고침 없이 데이터를 가져다주므로 부드러운 웹사이트를 만들 수 있다는 장점이 있다.

 

XMLHttpRequest객체가 갖는 속성에 대해 먼저 정리할 필요가 있다.

readyState 프로퍼티는 XMLHttpRequest 객체의 현재 상태를 나타낸다.

즉 클라이언트의 요청에 대한 정보가 담긴 XMLHttpRequest 객체의 상태가

어떠한지 0부터 4까지의 값으로 나타낸다.

XMLHttpRequest객체의 readyState의 값이 0이면 상태는 UNSENT, XMLHttpRequest객체가 생성되었지만 아직 open() 메서드가 호출되지 않았다는 의미다. 1이면 상태는 OPENED, open() 메서드가 호출되었다는 의미다. 2면 상태는 HEADERS_RECEIVED, send() 메서드가 호출되었고(서버는 응답 본문을 보내기 위해 이 메서드를 호출한 상태라는 것이다),

그리고 HTTP 응답 headers와 status가 수신되어 사용가능하다는 것을 의미한다.

3이면 상태가 LOADING, HTTP 요청을 처리하는 과정에서 응답을 비동기적으로 다운로드하는 중에 발생하는 상태를 설명하는 메시지다. responseText가 부분적인 데이터를 포함하고 있다는 것을 나타낸다. 즉 서버 응답이 아직 완전히 전송되지 않았고,

일부 데이터만 현재까지 클라이언트 측에서 받을 수 있음을 의미한다. 즉, 클라이언트가 서버로부터 응답을 받고 있는 중이며,

응답 본문이 아직 전부 내려받지 않았다는 것을 의미한다. 4면 상태가 DONE,  요청이 성공적으로 처리되어 응답이 다 도착했으며

이제 응답을 사용할 수 있다는 상태다.

 

XMLHttpRequest객체의 onreadystatechange는 요청의 상태(XMLHttpRequest객체의 readyState)가 변경될 때마다

호출되는 이벤트 핸들러다. 주로 onreadystatechange 함수를 정의하여 요청이 완료되었을 때 동작할 로직을 작성한다.

```

ajax.onreadystatechange = function() {

   if(this.readyState == 4 && this.status == 200 ) {

      console.log(ajax.responseText);

   }

};

```

 

XMLHttpRequest.responseText는 읽기 전용으로(read-only) 클라이언트의 요청으로 수신된 서버로부터 전달받은 텍스트로 나타내는 string을 반환한다. 요청이 실패했거나 아직 전송하지 않은 경우에는 null을 반환한다.

 

XMLHttpRequest.open()

open() 메서드는 새롭게 생성된 요청을 초기화하거나 기존에 존재하는 XMLHttpReqeust 객체가 지니는 값을 재할당한다.

 

```

ajax.open("GET", "클라이언트가 서버에게 데이터를 요청할 때 전달하는 url",  true);

데이터를 요청하기 때문에 method는 "GET", 클라이언트가 요청하는 데이터가 서버의 어떤 경로에 있는데 그 주소를 url,

true는 요청을 비동기적으로 처리해달라는 것임. false를 준다면 동기적으로 요청을 처리하게 된다.

 

```

open() 메서드로 클라이언트가 서버에게 데이터를 요청할 준비를 할 수 있다.

데이터를 요청하는 건지("GET"),  클라이언트가 서버로 데이터를 보내는 건지("POST") 등을 설정하는 method와

서버에 요청을 보낼 주소인 url, 그리고 클라이언트측에서 서버로부터 요청한 데이터를 응답받을 때까지 아무것도 안하고

기다릴 건지(동기적 처리) 아니면 다른 작업을 하고 있을 건지의 여부를 boolean 값으로 설정하는 것, 즉 open() 메서드는

서버에 대한 요청을 준비하는 단계다. 이 메서드를 호출한다고 해서 데이터가 서버로 전송되는 것은 아니다.

 

XMLHttpRequest.send()는 open() 메서드 호출을 통해 클라이언트의 요청 설정이 완료되면 설정된 요청이 서버로 전달된다.

```

ajax.send();

```

 

fetch() 함수를 호출하면서 url을 매개변수로 전달하면 서버로부터 응답을 가져온다.

전달받은 응답에 .then() 메서드를 호출하면서 콜백함수를 작성한다. 콜백함수는 매개변수로 응답을 전달받고,

그 응답을 json으로 입력받아 자바스크립트 객체로 반환하고, 반환된 자바스크립트 객체에 .then() 함수를 통해

다시 콘솔에 찍으면 결과를 얻을 수 있다.

 

코드 실습

// 옛날 방식

const ajax = new XMLHttpRequest();

ajax.onreadystatechange = function() {
	if(this.readyState == 4 && this.state == 200) {
    	console.log(ajax.responseText);    
    }
};

ajax.open(method, url, true);
ajax.send();

// 요즘 JS방식
fetch(url)
	.then((response) => {
    	if(!response.ok) {
        	throw new Error('400 아니면 500 에러남');
        }
    	return response.json();
    })
    .then((결과) => {
    	console.log(결과);
    })
    .catch(() => {
    	console.log('에러남');
    });
    
 
 // await을 쓴 버전
 async function 데이터가져오는함수() {
 	const response = await fetch(url);
    if(!response.ok) {
        throw new Error('400 아니면 500 에러남');
    }
    
    const result = await response.json();
    console.log(result);
 }
 
 데이터가져오는함수().catch(()=> {
 	console.log('에러남');
 });
 
 // 외부라이브러리 방식 axios
 axios.get(url)
 .then((result) => {
 	console.log(result);
 }).catch(()=> {
  	console.log('에러남');
 })

 

---

Response 인터페이스의 json() 메서드는 Response 스트림을 받아 모두 읽어들인 뒤 JSON 형태로 반환한다.

Promise 형태가 반환된다. Response.json()은 Promise를 반환한다. 1. fetch() 함수를 사용해서 반환된 값은 Promise다.

2. fetch() 함수의 반환 값인 Promise객체에서 .then() 함수를 사용하고, then() 함수는 콜백함수를 받는데, 이 콜백함수의 매개 값으로 전달되는 게 HTTP 응답을 나타내는 Response 객체다. 그리고 이 콜백함수가 이 Response객체에서 json() 메서드를 호출함으로써 응답 본문을 JSON으로 변환하는 Promise를 만들어내고, 이 Promise를 반환한다. 그리고 이 반환된 Promise객체에 다시 .then() 함수를 사용하게 되고, 이 then() 메서드는 콜백함수를 받고, 이 콜백함수는 data를 받아 이 data를 콘솔에 찍으면 변환된 JSON 데이터가 출력된다.

 

await 키워드는 async 키워드가 붙은 함수 내부에서만 사용이 가능하다.

 

JSON.stringfy() 메서드는 자바스크립트 객체 메서드로 Javascript 객체나 배열을 JSON 문자열로 변환한다.

---

 

참고

Ajax가 무엇인지 설명하는 영상 (+CORS, fetch 어쩌구)

https://www.youtube.com/watch?v=nKD1atl6cAw&t=188s