Ajax, json

AJAX

(Asynchronous Javascript And XML)

서버와 비동기적으로 데이터를 주고받는 자바스크립트 기술

XMLHttpRequest 객체를 사용해 구현하는 비동기 통신 방법

 

요청 / 응답 과정을 통해 불필요한 부분까지 처리하지 않는다

필요한 부분만 별도로 요청하고 응답 받아 처리할 수 있다

불필요한 대역폭 감소가 가능 > 비용 절감

 

페이지를 새로고침 하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 할 수 있음

= 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있음

= 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있음

(예 : 티켓예매 사이트, 검색어 자동 완성)

>장점

새로고침이 없으니 페이지전환이 부드러움

 

 

JSON, XML, HTML, 텍스트 파일 등 다양한 형태의 데이터를 주고 받을 수 있음

JSON(JavaScript Object Notation)

자바스크립트 객체 형태로 정보를 표현하는 파일 형식

데이터를 보기에 XML보다 깔끔함

> 문법 오류에 취약함, 괄호나 콤마 하나로 문서 전체가 해석 불가능해짐 

 

아작스로 읽는 사람도 많지만 에이젝스로 읽는게 맞다고 함

---

Ajax 통신 방법들

XMLHttpRequest

브라우저에서 제공하는 객체

모던 웹 개발에서는 잘 사용되지 않음

 

$.ajax()

제이쿼리에서 XMLHttpRequest 객체를 사용하기 편하게 만든 메소드

모던 웹 개발에서는 잘 사용되지 않음

 

Fetch

Fetch API

async / await도 함께 쓸 수 있음

json 파싱을 함

 

axios

promise기반으로 동작하는 라이브러리

리액트나 뷰에서 사용

json 파싱을 할 필요 없음

---

Ajax통신 할 때 자주 뜨는 에러

CORS policy ~

이유

네이버 > 카카오 ajax요청 불가능, 보안 이슈 문제

해결방법

코드를 추가하거나

CORS 정책 관련 기능을 끄면 됨