Ajax란 '비동기 자바스크립트와 XML(Asynchronous JavaScript and XML)'을 말하며 기존의 동기식으로 웹을 구성했던 방식과 다르게 비동기식으로 만들 수 있는 기술입니다. 웹 통신에 대한 다양한 방법 들 중에 하나입니다.
비동기식으로 서버와 통신하기 위해 기본적으로
XMLHttpRequest 객체를 사용합니다. jquery에서는 $.ajax, es6에서는 promise 기반인 fetch, axios 사용도 가능합니다. 브라우저 javascript를 사용해 데이터를 로드할 때에는 fetch, node나 리엑트 사용자라면 axios를 권합니다.기존 웹 페이지를 표현하기 위해서는
비동기 통신으로서 웹 페이지 전체를 다시 로딩할 필요없이, 웹 페이지의 일부분만을 업데이트 하는 기법을 이야기합니다. 만약 작은 텍스트만 변경하고 싶을 때 기존에 웹 페이지 기술을 적용한다면 페이지 전체를 새로고침(재로딩) 해야 하지만, ajax를 사용하면 필요한 데이터만 서버에 요청하여 받은 후 변경될 부분만 반영해주면 됩니다.
‼️여기서 잠깐
- 동기 : 요청을 보낸 후 응답을 받아야 다음 동작을 실행하는 방식입니다. 순차적으로 실행되며, 어떤 작업이 수행 중이라면 이 후 작업들은 현재 작업이 완료될 때까지 중단됩니다.
- 비동기 : 요청을 보낸 후 응답과 상관없이 다음 동작을 실행합니다. 병렬적으로 실행되며, 현재 작업이 종료되지 않더라도, 다음 작업들은 응답(현재 작업에 대한)을 대기하지 않고 현재 작업이 실행된 후 즉시 실행됩니다.
서버와는 다음과 같은 다양한 형태의 데이터를 주고받을 수 있습니다.
- JSON
- XML
- HTML
- 텍스트 파일 등