JS Ajax

강정우·2022년 8월 11일
0

JavaScript

목록 보기
7/53
post-thumbnail

동기, 비동기

동기(Synchronous)통신

  • request가 있으면 해당 reponse가 전달될 때까지 다른 request를 요청할 수 없는 통신방법이다.

비동기(Asynchronous) 통신

  • request를 보내더라도 response를 언제 받아도 상관없이 다른 request를 요청할 수 있는 통신방법이다.
  • 예시로 검색창에 검색 시 바로바로 추천 검색단어를 바꿔주는 것이다.

Ajax

  • 서버와 브라우저 간 비동기 방식으로 데이터를 교환할 수 있는 통신기능이다. 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 테이터를 로드하는 기법이다.

Ajax의 특징

  1. 웹 페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있다.
  2. 서버 처리를 기다리지 않고 비동기 요청이 가능하다.
  3. 동일출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.
  4. 과도한 요청 시 서버에 부하가 걸릴수 있다.
  5. 동적으로 화면을 구성하는 만큼 개발자의 구현은 복잡해진다.

API란?

async, await, fetch

fetch

  • 비동기 방식의 통신기술 ES6의 최신 문법이다.
  • URL을 먼저 넣어줘야한다!! 요청할 서버 주소
  • API를 활용한 fetch 알아보기

.then()

  • 요청결과를 접근하는 함수, 데이터 반환

response.text() : 문자열로 반환

response.json() : 요청결과값을 json형태로 반환

  • data의 흐름

다음 포스팅 예고

profile
智(지)! 德(덕)! 體(체)!

0개의 댓글