비동기식 처리 모델과 Ajax

📚 Traditional Web Page Lifecyle & AJAX Lifecycle

---

HTML, CSS, JS 파일은 각각의 파일 단위로 Request, Response된다. (한번에 X)

클라이언트의 요청에 따라 서버로부터 웹페이지가 반환되면 브라우저는 이를 렌더링하여 화면 전체를 갱신해야 한다.

네트워크 요청을 통해 페이지 새로고침 없이 필요한 데이터를 받아오는 과정을 가능하게 하는 것이 AJAX(Asynchronous JavaScript And XML)이다.

📚 AJAX

---

: Asynchronous JavaScript And XML. 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 XML 데이터를 교환할 수 있는 통신 방식이다.

브라우저가 가진 XMLHttpRequest 객체를 이용해 전체 페이지를 새로 고치지 않고도 페이지 일부만을 위한 데이터를 로드할 수 있다.

갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.

📚 JSON

---

: JavaScript Object Notation. 클라이언트와 서버 간 데이터 교환을 위한 규칙 즉, 데이터 포맷

{
  "name": "Lee",
  "age": 20,
  "alive": true
}

객체 리터럴과 매우 흡사하지만, JSON은 순수한 텍스트로 구성된 규칙이 있는 데이터 구조이다.

📌 장점

• 일반 텍스트 포맷보다 효과적인 데이터 구조화가 가능
• XML 포맷보다 가볍고 편하며 가독성이 좋음

➖ JSON.stringify(value[, replacer[, space]])

: 객체를 JSON 형식의 문자열로 변환한다.

• 객체 ➡ JSON 형식의 문자열

const o = { name: 'Lee', age: 20 };
strObject = JSON.stringify(o);
console.log(typeof(strObject), strObject) // string { "name":"Lee", "age": 20 }

• 배열 객체 ➡ 문자열

const arr = [1, 5, 'false'];
const strArray = JSON.stringify(arr);
console.log(typeof strArray, strArray); // string [1,5,"false"]

➖ JSON.parse()

: JSON 데이터를 가진 문자열을 객체로 변환한다.

역직렬화(Deserializing)
: 문자열인 JSON 데이터를 객체화하는 것

📚 XMLHttpRequest

---

브라우저는 XMLHttpRequest 객체를 이용해 Ajax 요청을 생성하고 전송한다. 서버가 응답을 반환하면 같은 객체가 그 결과를 처리한다.

💡 Ajax request

const xhr = new XMLHttpRequest(); // XHLHttpRequest 객체 생성
xhr.open('GET', '/users');
xhr.send();

➖ XMLHttpRequest.open(method, url[, async])

: 서버로의 요청을 준비한다.

async
: 비동기 조작 여부, default = true (비동기 방식)

➖ XMLHttpRequest.send()

: 준비된 요청을 서버에 전달한다.

📌 전송방식

• GET: 데이터를 query string으로 전송한다. (send 메소드의 인수는 무시, request body = null)
• POST: 데이터를 Request Body에 담아 전송한다.

➖ XMLHttpRequest.setRequestHeader()

: HTTP Request Header의 값을 설정한다.

📌 자주 사용 하는 Request Header

• Content-type
  : request body에 담아 전송할 데이터의 MIME-type의 정보를 표현한다.

xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

• Accept
  : 서버가 샌드백할 데이터의 MIME-type을 지정한다. 만약 Accept 헤더를 설정하지 않으면, send 메소드가 호출될 때 Accept 헤더가 /으로 전송된다.

xhr.setRequestHeader('Accept', 'application/json');

💡 Ajax response

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function (e) {
  if (xhr.readyState !== XMLHttpRequest.DONE) return;

  if(xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.log('Error!');
  }
};

➖ XMLHttpRequest.onreadystatechange()

:XMLHttpRequest.readyState 프로퍼티가 변경(이벤트 발생)될 때마다 onreadystatechange 이벤트 핸들러가 호출된다.

➖ XMLHttpRequest.readyState

: response가 클라이언트에 도달했는지를 추적할 수 있는 프로퍼티를 제공한다.

➖ XMLHttpRequest.onload()

: 서버 응답 완료 상태에만 반응한다.

📚 Load JSONP

---

https://poiemaweb.com/js-ajax