AJAX (서버와 클라이언트 통신)

원래는 리액트쿼리에 대해 공부하려 했는데 어느 글에서  리액트쿼리를 알기이전에 AJAX에 알아야 한다고 하여 양심에 찔려 이글을 정리해보려고 한다 

AJAX (Asynchronous Javascript And XML)

 =>자바스크립트를 통해서 서버에 데이터를 요청하는 것

• AJAX는 XML에 기반한 종합 기술로  Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다
• 자바스크립트로 HTTP 요청을 보내서 XML 응답을 받아 사용하는 기술
•  AJAX는 하나의 독립된 기술이 아니다.

AJAX
화면	HTML + CSS 로 구성 및 작성
화면에 대한 조작과 상호 작용	문객체모델(Document Object Model : DOM)로 처리
데이터 교환	XML 형식
데이터 변환과 검색	XML 기술인 XSL과 XPath 를 사용
비동기 통신	웹 브라우저 안에 내장되어 있는 XMLHttpRequest 객체를 사용

 

 

AJAX의 진행과정

 

XMLHttpRequest Object를 만든다

• request를 보낼 준비를 브라우저에게 시키는 과정
• 이것을 위해서 필요한 method를 갖춘 object가 필요하다

callback 함수를 만든다.

• 서버에서 response가 왔을 때 실행시키는 함수
• HTML 페이지를 업데이트 함

Open a request

• 서버에서 response가 왔을 때 실행시키는 함수
• HTML 페이지를 업데이트 함

send the request

 

AJAX의 장점

• 웹페이지의 속도향상
• 서버의 처리가 완료될 때까지 기다리지 않고 처리가 가능하다.
• 서버에서 Data만 전송하면 되므로 전체적인 코딩의 양이 줄어든다.
• 기존 웹에서는 불가능했던 다양한 UI를 가능하게 해준다. ( Flickr의 경우, 사진의 제목이나 태그를 페이지의 리로드 없이 수정할 수 있다.)

AJAX의 단점

• 히스토리 관리가 되지 않는다.
• 페이지 이동없는 통신으로 인한 보안상의 문제가 있다.
• 연속으로 데이터를 요청하면 서버 부하가 증가할 수 있다.
• XMLHttpRequest를 통해 통신하는 경우, 사용자에게 아무런 진행 정보가 주어지지 않는다. (요청이 완료되지 않았는데 사용자가 페이지를 떠나거나 오작동할 우려가 발생하게 된다.)
• AJAX를 쓸 수 없는 브라우저에 대한 문제 이슈가 있다.
• HTTP 클라이언트의 기능이 한정되어 있다.
• 지원하는 Charset이 한정되어 있다.
• Script로 작성되므로 디버깅이 용이하지 않다.
• 동일-출처 정책으로 인하여 다른 도메인과는 통신이 불가능하다. (Cross-Domain문제)

axios &fetch API

 

axios	fetch
구형 브라우저를 지원한다	JavaScript의 내장 라이브러리이기 때문에 import 하지 않고 사용할 수 있다.
응답 시간 초과를 설정하는 방법이 잇다	라이브러리의 업데이트에 따른 에러 방지가 가능하다. (React Native의 경우 업데이트가 잦아서 라이브러리가 쫓아오지 못하는 경우가 많은데, fetch의 경우 이를 방지할 수 있다.)
JSON 데이터 자동변환이 가능하다.	네트워크 에러가 발생했을 때 기다려야한다. (response timeout API 제공X)
node.js에서의 사용이 가능하다.	지원하지 않는 브라우저가 있다.
request aborting(요청 취소)가 가능하다.	return값은 Promise 객체 형태이다.
catch에 걸렸을 때, .then을 실행하지 않고, console창에 해당 에러 로그를 보여준다.
return값은 Promise 객체 형태이다.