AJAX

브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 갱신이 발생한다. 이것은 브라우저와 서버와의 통신에 의한 것이다.

[이미지 출처 : poiemaweb]

01. 웹페이지 렌더링

[이미지 출처 : poiemaweb]

1. 서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML에서 로드하는 CSS나 JavaScript 파일들도 같이 반환된다.
2. 클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다.
3. 서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링하여 화면에 표시한다.

02. Ajax ?

• 페이지 전체를 렌더하지 않고 필요한 부분만 부분적으로 업데이트하기 위해 필요하다.
• 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미한다.

02-1. dynamic web page

단순한 web page가 아닌, 보다 애플리케이션다운, web appp의 등장
1. 서버와 자유롭게 통신할 수 있다.
- 서버와 자유롭게 통신을 해서 데이터를 받아오는 XMLHttpRequest(XHR)의 등장
2. 페이지 깜빡임 없이 seamless하게 작동한다.
- 페이지를 새로 받아와서 렌더링 하는것이 아니라 필요한 부분만 변경하기를 원한다.
- JavaScript를 이용해서 DOM을 건드리는 방식을 사용한다.

위의 1,2번을 합쳐서 AJAX(Asynchronous JavaScript and XML)라고 한다.

03. Ajax의 특징

[이미지 출처 : poiemaweb]

• 서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 볼 수 있다.
• 페이지 전체를 로드하여 렌더링할 필요가 없고 갱신이 필요한 일부만 로드하여 갱신하면 되므로 빠른 퍼포먼스와 부드러운 화면 표시 효과를 기대할 수 있다.

fetch 사용

서버에서 자원을 가져오기위해 fetch를 사용한다.

🤔 서버에서 자원을 가져오는 여러 방법중 fetch를 사용하는 이유

1. XMLHttpRequest : 요즘도 많이 쓰고있는 기술이지만, 복잡하다.(콜백방식)

   	function reqListener () {
         console.log(this.responseText);
       }
   
       var oReq = new XMLHttpRequest();
       oReq.addEventListener("load", reqListener);
       oReq.open("GET", "http://www.example.org/example.txt");
       oReq.send();

2. jQuery ajax : 복잡하고, 가동성이 좋지 않다(체이닝 방식)

   	$.ajax({
         url: 'http://example.com',
         method: 'GET',
         dataType: 'json'
       })
         .done(function(json) {
           console.log(json)
         })
         .fail(function(xhr, status, errorThrown) {
   
         })
         .always(function(xhr, status) {
           console.log('요청완료')
         });

3. fetch

• Fetch API는 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스가 정의되어 있다.

• XMLHttpRequest와 비슷한 역할을 하지만 좀더 강력하고 유연한 조작이 가능한 API이다.

• mdn링크

  	```js

  fetch('http://example.com') // 서버의 주소
  .then(res => res.json()) // json을 javascript object로 바꿔주는 코드
  .then(data => {
  console.log(data);
  })
  .catch(err=>{ // error가 catch될 수 있는 함수
  console.error(err)
  });

  	```

👨‍🏫 참고 블로그