[JavaScript] AJAX란? (feat. XMLHttpRequest, Fetch API , Axios)

✅ AJAX

Asynchronous Javascript and XML 의 약자로 ,  웹 애플리케이션에서 필요한 부분만 비동기적으로 데이터를 주고받을 수 있는 기술.

Ajax는 요청이 있을 때 웹페이지 전체를 리로드하지 않고도 , 일부만을 갱신할 수 있다. 즉, Ajax를 이용해서 백그라운드 영역에서 서버와 통신하고 브라우저 일부에 표시할 수 있다. (=  새로고침 없이 서버에게 GET 요청하는 조그만한 JS 코드 )

 

🔸어디에 사용?

예를 들어 추천 검색어를 보여주는 포털 검색 창, 인피니트 스크롤 등에 ajax를 적용하여 페이지 리로드 없이 필요한 부분만 요청 및 화면에 표시할 수 있다. 

사용자가 AJAX가 적용된 UI와 상호작용하면, 서버에 AJAX 요청을 보내게 된다. 서버는 DB에서 데이터를 가져와서 JS 파일에 정의되어 있는 대로 HTML/CSS와 데이터를 융합하여 만든 DOM 객체를 UI에 업데이트 시킨다. 비동기로 이루어지며, 기존의 페이지를 전부 로딩하는 방식이 아닌 일부만 업데이트 하는 방식이다.

 

🔸Ajax Engine

 - Ajax 요청을 처리하기 위한 소프트웨어나 라이브러리. 일반적으로 브라우저에 내장된 Ajax 엔진을 가지고 있다. 이 엔진이 클라이언트 측에서 Ajax 요청을 생성하고 서버에 전송하며 필요한 경우 페이지의 일부를 업데이트 한다.

 

요청방법 

- XMLHttpRequest (XHR) ,  Fetch API , JQuery의 Ajax 메서드 , Axios

 

Ajax는 다음과 같은 파일을 주고받음 

-JSON  ,  XML,  HTML , txt

 

 

🔸Ajax 프레임워크

Ajax를 이요해서 개발을 손쉽게 할 수 있도록 여러 기능을 미리 포함해 놓은 개발환경을 Ajax 프레임워크라고 한다. 

- Prototype

- script.aculo.us

- dojo

- jQuery

 

http://www.tcpschool.com/ajax/ajax_intro_basic

코딩교육 티씨피스쿨

 

Ajax 요청 방식 

 

 

 

 +참고영상 

---

 

이벤트 버블링과 캡쳐링 

버블링과 캡처링

이벤트 버블링과 캡처링에 대한 정리

 

XML (Extensible Markup Language)

 

XML이란 무엇인가요? - Extensible Markup Language(XML) 설명 - AWS

JSON (JavaScript Object Notation)

 

JSON 파일 형식 - JSON 파일이란?