[JavaScript] AJAX에 대해

비동기

1. XMLHttpRequest

2. fetch

3. JQuery, ajax

4. axios

AJAX(Asynchronous Javascript and XML)

HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법

웹(Web)에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법

JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과 조회

화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡

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

 

이런 구현이 복잡한 AJAX를 쉽게 관리하는 : Prototype, jQuery

사용방식

1. XMLHttpRequest 객체 이용

2. fetch() 이용

3. jQuery 같은 라이브러리

 

** DOM(Document Object Model)

HTML, XML 문서의 프로그래밍 Interface

문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 

서버와 클라이언트의 상호작용

서버 중심의 개발방식은 화면 구성이 서버에서 이루어 진다(JSP, PHP, ASP)

클라이언트 중심의 개발방식은 클라이언트(웹 브라우저)에서 화면을 구성한다(JavaScript)

 

fetch()

브라우저에서 fetch() 함수를 지원나기 이전에는 XMLHttpRequest를 이용하여 직접  HTTP 요청하고 응답을 직접 구현했다. 이러한 복잡한 구현때문에 jQuery, axios 등과 같은 라이브러리 사용

 

브라우저가 fetch() 함수를 지원하면서 위와 같은 라이브러리를 쓰지 않아도 간단히 구현 가능