Ajax

기존 방식

- 사용성 측면

페이지를 바꿀 때마다 URL이 바뀌고 HTML 파일이 바뀜. 리로드됨.

HTML 속 Image, JS 파일이 많으면 로드하기 느리고 비효율적.

내용만 바꾸고 싶다면?

 

- 코드 재사용성 측면

콘텐츠마다 HTML 파일이 있어 관리하기 힘듦. 중복되는 코드.

HTML template이 있고 그 안에 들어갈 내용만 동적으로 변경하고 싶다면?

 

 

Ajax란?

리로드 없이 웹서버에게 정보를 요청해서 부분적으로 정보를 갱신하는 기술

 

리로드 할때마다 모든 정보를 다운로드하는 비효율을 회피!

예) 자동완성 - 글자 입력시 마다 브라우저와 웹 서버가 통신. 이때 전체 페이지가 리로드 되는 것이 아님!

 

장점

1. 부분적 갱신
   일부 정보가 달라졌음에도 전체 페이지를 리로드 하는 비효율 개선
   -> 사용자: 사용성 증가 / 서버: 비용 절감
   
   
2. 확장성 있는코드, SPA
   
   콘텐츠만을 콤팩트하게 동적으로 변경할 수 있는 구조
   -> 한 페이지로 여러 정보 표현 가능! (Single Page Application)

fetch API - Ajax 구현 기술

Ajax를 구현하는 여러 기술 중 하나

 

• 사용 예

fetch api의 사용 예시

버튼을 클릭하면 URL이 변하지 않고, 'css' 라는 파일만 브라우저가 추가로 다운 받는 것을 볼 수 있다.

버튼 클릭 후 네트워크 탭 변화

 

• fetch API의 요청과 응답

• fetch('파일') : 서버에게 파일 요청 (비동기)
• .then(callback) : 작업이 끝나면 실행. 콜백 함수에 response 객체 전달

'css' 파일을 요청하고 다 받으면 callback 함수 호출

비동기적으로 작동하므로 1,2가 먼저 찍혔다.

 

• Response 객체
  fetch로 요청 -> 응답한 내용을 Response 객체로 callback 함수에 전달한다.

요청 완료 후 Response 객체를 전달

 

Response 객체의 내용

---

실사용 예

버튼을 눌러 movieDB에 영화 정보 요청하기

response 객체에 전달된 1위 영화 제목을 <article>에 출력

Response 객체를 json으로 바꿔 활용

결과

---

Ajax를 적용해 SPA 만들기

간단한 예)

main page에서 링크를 클릭할 때마다 data를 fetch 해서 <article>을 채운다.

나아가 navigator 까지도 동적으로 생성할 수 있다.

---

참고

생활코딩