AJAX [ node.js 교과서]

본 게시글은 node.js 교과서 강의를 듣고 정리한 글입니다.

 

AJAX doc : https://developer.mozilla.org/ko/docs/Web/Guide/AJAX

AJAX - 웹 개발자 안내서 | MDN

- 서버로 요청을 보내는 코드

- 라이브러리 없이는 브라우저가 지원하는 XMLHttpRequest 객체를 이용해야 한다.

- AJAX 요청시 Axios 라이브러리를 사용하는게 편하다.

- HTML에 스크립트를 추가하면 사용할 수 있다.

<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

---

GET 요청 보내기

 

- axios.get 함수의 인수로 요청을 보낼 주소를 넣으면 된다.

- 프로미스 기반 코드라 async / await 를 사용 가능하다.

axios.get(’https://www.zerocho.com/api/get’).then().catch();

 

POST 요청 보내기

 

- 전체적인 구조는 비슷하나 두번째 인수로 데이터를 넣어서 보낸다.

 

FormData

- html form 태그에 담긴 데이터를 AJAX 요청으로 보내고 싶은 경우 FormData 객체를 이용한다.

   > Append 로 데이터를 하나씩 추가

   > Has 로 데이터 존재여부 확인

   > Get 으로 데이터 조회

   > getAll 로 데이터 모두 조회

   > delete 로 데이터 삭제

   > set 으로 데이터 수정

 

encodeURIComponent, decodeURIComponent

- 가끔 주소창에 한글을 입력하면 서버가 처리하지 못하는 경우 발생

- encodeURIComponent 로 한글을 감싸줘서 처리한다.

- decodeURIComponent 로 서버에서 한글 해석

 

HTML 태그에 데이터를 저장하는 방법

- 서버의 데이터를 프론트엔드로 내려줄 때 사용

- 태그 속성으로 data-속성명

- 자바스크립트에서 태그.dataset.속성명 으로 접근가능

   > data-user-job -> 태그.dataset.userJob

   > data-id -> 태그.dataset.id

- 반대로 자바스크립트에 dataset 에 값을 넣으면 data-속성이 생김

   > dataset.monthSalary = 10000 -> data-month-salary="10000"

- 단점은 공개된 데이터만 저장할 수 있다. (누구나 꺼내갈 수 있기 때문)