[Javascript] 클라이언트와 서버간의 비동기통신에 대해 알아보자. / 1부

ajax 작동방식_시퀀스 다이어그램

 

1. Ajax란?

'Asynchronous JavaScript and XML'의 약자다.
Ajax란 자바스크립트를 사용하여 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다.
 
 
 

2. Ajax통신 과정에서 클라이언트와 서버 간의 상호작용 

클라이언트가 Ajax요청을 시작하여 서버에 데이터를 요청한다.
➡️ 서버가 이 요청을 처리하고 응답을 돌려보낸다. 
➡️ 클라이언트는 이 응답을 받아 UI를 업데이트한다.
이 과정은 비동기적으로 이루어지기때문에 페이지 전체를 새로고침하지 않아도 데이터를 교환할 수 있다.
 
이전의 웹페이지는 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹페이지 전체를 처음부터 다시 렌더링했다.
Ajax의 개념이 등장한 이후로 필요한 부분만 렌더링할 수 있게 되었다.
이전엔 화면 전환이 일어나면 순간적으로 깜빡이는 현상이 있었지만 Ajax 기반으로 동작하는 웹페이지는 부드러운 화면 전환을 보여준다.
 
 

3. 비동기 통신의 개념

클라이언트가 서버에 요청을 보내고, 서버가 응답할 때까지 기다리지 않고 다른 작업을 계속할 수 있는 통신 방식이다.
 

4. JSON

JSON은 'JavaScript Object Notation'의 약자다.
클라이언트와 서버간의 HTTP통신을 위한 텍스트 데이터 포맷이다.

{
  "name": "홍길동",
  "age": 30,
  "isStudent": false,
  "address": {
    "street": "123 Main St",
    "city": "서울"
  },
  "phoneNumbers": ["123-4567", "987-6543"]
}

중괄호{ }로 전체 객체를 묶어준다.
key값은 "큰따옴표"로 묶는다.
value값 중 문자열도 "큰따옴표"로 묶는다.
객체안에 또 다른 객체를 중첩하여 사용할 수 있으며, 배열도 value값으로 사용할 수 있다.
 
1) JSON.stringify
객체를 JSON포맷의 문자열로 변환한다. 
클라이언트가 서버로 객체를 전송할 때, 객체를 문자열화해야하기때문에 사용하는 메서드다.

// JavaScript 객체 예시
var person = {
    name: "홍길동",
    age: 30,
    isStudent: false,
    address: {
        street: "123 Main St",
        city: "서울"
    },
    phoneNumbers: ["123-4567", "987-6543"]
};

// JSON.stringify를 사용하여 객체를 JSON 문자열로 변환
var jsonString = JSON.stringify(person);

console.log(jsonString);

 
2) JSON.parse
JSON 포맷의 문자열을 객체로 변환한다.
서버로부터 클라이언트에 전송된 JSON데이터는 문자열이기 때문에 이 문자열을 객체로서 사용하려면 JSON.parse메서드를 사용해야한다.

// JSON 형식의 문자열
var jsonString = '{"name": "홍길동", "age": 30, "isStudent": false}';

// JSON.parse를 사용하여 문자열을 JavaScript 객체로 변환
var person = JSON.parse(jsonString);

console.log(person);
console.log("이름: " + person.name); // "이름: 홍길동"
console.log("나이: " + person.age);  // "나이: 30"

 

5. XMLHttpRequest

자바스크립트를 사용하여 HTTP 요청을 전송할때 XMLHttpRequest 객체를 사용한다.
 
- 장점 : 대부분 브라우저에서 지원한다. 복잡한 네트워크 작업이 가능하다.
- 단점 : 코드가 다소 복잡하고 오래된 방식이다. (콜백 기반으로 작동하여, 콜백지옥을 야기할 수 있다.)
- 적합한 사용 : 레거시 프로젝트나 매우 복잡한 네트워크 작업이 필요할때.
 
XMLHttpRequest는 다양한 프로퍼티와 메서드를 제공한다.

프로토타입 프로퍼티	설명
readyState	HTTP 요청의 현재 상태를 나타내는 정수. UNSENT : 0 OPENED : 1 HEADERS_RECEIVED : 2 LOADING : 3 DONE : 4
status	HTTP 요청에 대한 응답 상태를 나타내는 정수 ex) 200은 성공, 400번대는 클라이언트 오류, 500번대는 서버 오류  (자세한 오류번호 확인은 아래 링크를 통해 확인) https://developer.mozilla.org/ko/docs/Web/HTTP/Status
statusText	HTTP 요청에 대한 응답 메시지를 나타내는 문자열
responseType	HTTP 응답 타입 ex) document,json, text...
response	HTTP 요청에 대한 응답 몸체, responseType에 따라 타입이 다르다.

 

이벤트 핸들러 프로퍼티	설명
onreadystatechange	readyState 프로퍼티 값이 변경된 경우 (HTTP요청의 현재 상태 값이 변경된 경우)
onerror	HTTP 요청에 에러가 발생한 경우
onload	HTTP 요청이 성공적으로 완료된 경우

 

메서드	설명
open	HTTP 요청 초기화
send	HTTP 요청 전송
abort	이미 전송된 HTTP 요청 중단
setRequestHeader	특정 HTTP 요청 헤더의 값을 설정

 

정적 프로퍼티	값	설명
DONE	4	서버 응답 완료

 

//1. XMLHttpRequest 객체 생성
//이 객체는 HTTP 요청을 전송하고 응답 받는데 사용된다.
var xhr = new XMLHttpRequest();

//2. 요청 초기화
open의 매개변수 (HTTP요청방식, 요청을 보낼 서버의 URL, 비동기 여부)
xhr.open("GET", "http://example.com/api/data", true);

// 서버 응답 처리
//서버의 응답 상태가 변경될때마다 onreadystatechange가 호출됨.
//readyState속성은 요청의 현재 상태 
//XMLHttpRequest.DONE은 요청이 완료됐음을 의미함.
xhr.onreadystatechange = function() { 
  if (xhr.readyState == XMLHttpRequest.DONE) {
    if (xhr.status == 200) { //서버로부터 정상적인 정상적인 응답 받았는지 확인. 200은 성공임.
      console.log(xhr.responseText); // 서버로부터 받은 데이터
    } else {
      console.error("There was a problem with the request.");
    }
  }
};

// 요청을 서버로 보내기
xhr.send();

 
위 예시 코드에서는 setRequestHeader 메서드를 사용하지 않았다.
setRequestHeader는 HTTP 요청 헤더를 설정하는 메서드인데 필요할 때만 쓴다.

무조건 open() 뒤에 씀!
요청 헤더를 설정한다는 의미가 뭐냐면,, HTTP 요청의 성격을 정의한다는 것이다.
1️⃣콘텐츠 타입 지정 
서버에 데이터를 전송할 때, 데이터의 형식을 명시하는 것이다.

(적절한 파싱방법을 정의하는 데 사용된다.)

//JSON 데이터를 보낼 때 아래와 같이 설정한다.
xhr.setRequestHeader("Content-Type", "application/json");

 
2️⃣인증 정보 전송
요청이 인증이 필요한 API나 리소스에 접근할 때, 토큰이나 쿠키 같은 인증 정보를 헤더에 포함시켜야 할 수 있다.

xhr.setRequestHeader("Authorization", "Bearer YOUR_ACCESS_TOKEN");

 
3️⃣캐시 제어
특정 요청에 대해 브라우저 캐시를 피하고 싶을 때 Cache-Control 헤더를 사용할 수 있다.

xhr.setRequestHeader("Cache-Control", "no-cache");
//참고로, 브라우저 캐시를 피한다는 의미는 자원들을 로컬에 저장해두는 '캐싱'을 피한다는 의미다.
//항상 최신의 정보를 표시하고싶을때, 캐시된 데이터가 손상되거나 오류를 일으키는 것을 피하고자 할 때.

 
 

---

1부에서는 Ajax의 개념과 JSON의 개념, JSON 직렬화/역직렬화 그리고 최종적으로 XMLHttpRequest의 개념에 대해 알아보았다.
2부에서는 Promise의 개념과 Fetch API 사용법에 대해 알아보자!  커밍쑨