Ajax

Asynchronous JavaScript and XML의 약자로 JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식 데이터 형식은 XML 뿐만 아닌 Text, HTML, JSON, CSV 등 다양한 형식 사용가능하다.

 

   동기 : 클라이언트가 서버로 데이터를 요청 시 응답이 올때 까지 다른 작업은 대기해야함.

비동기 : 클라이언트가 서버로 데이터 요청 후 응답을 기다리지 않고 다른 작업 수행이 가능함.

 

특징

전체 페이지를 갱신하지 않고 일부분만 업데이트가 가능하며 ActiveX나 플러그인 프로그램 설치 없이 이용 가능하다.

사용자에게 즉각적인 반응과 풍부한 UI경험 제공 가능함.

javascript Ajax 단점
연속적인 데이터 요청 시 서버 부하 증가하여 페이지가 느려짐
오픈 소스로 차별화가 어려움

Ajax는 JavaScript이므로 브라우저에 따른 크로스 브라우저 처리 필요
페이지 내 복잡도가 증가하여 에러 발생 시 디버깅이 어려움

 

jquery Ajax 장점.
크로스 브라우저 처리를 jQuery가 자동으로 해결
직관적이며 다양한 방법의 코딩 가능

코드 길이가 감소하여 JavaScript방식보다 구현 방법 간단
( JavaScript방식 XMLHttpRequest 객체 생성 시 브라우저 검사 생략가능 )

 

jquery Ajax 단점.

콜백 지옥 

 

javascript 길다 가독성이 떨어진다. 

jquery 콜백함수 반복으로 인해 가독성이 떨어진다. 

위 문제를 해결하기 위해

promise, async, await, fetch 가 나왔다.