HTTP구조, AJAX란?

참고:  https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

https://www.youtube.com/watch?v=avfIUwDG2d8

https://www.youtube.com/watch?v=ZFlnrGgdekI

 

 

AJAX란? 여러기술들(DOM, HTML, XmlHttpRequest, JS 등)이 합쳐져 만들어진 클라이언트와 서버간의 비동기 방식으로 데이터를 교환하는 웹페이지 동적갱신 프로그래밍 방식(통신방식). 비동기 방식으로 데이터를 교환하여 동적으로 데이터가 갱신되게 하는 가장 큰 요인이 XMLHttpRequest라는 비동기 통신을 가능케하는 Web API이다(메서드와 프라퍼티 제공).

즉, Ajax란 다양한 기술들(HTTP, CSS, JS, DOM, XmlHttpRequest, etc)을 이용하여 싱글 스레드인 JS를 보완하기 위한 비동기 통신 방식이다.

• Asynchronous Javascript And XmlHTTPRequest(비동기식 자바스크립트와 XMLHTTPRequest)의 약자
• 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
  • 즉, JS를 사용해 서버에 데이터를 비동기 방식으로 요청하는 것( 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다)

XmlHttpRequest가 바로 HTTP비동기 통신을 위한 메서드와 프라퍼티를 제공하는 Web API이다!!

HTML태그로 시작해서 HTML태그로 끝나는 완전한 HTML을 서버로 부터 받고 웹페이지 전체를 처음부터 다시 랜더링하는 방식으로 동작하였음

 

블로킹이란? 처리되어야 하는 작업 하나가 전체적인 작업의 흐름을 막는것

웹페이지의 변경에 필요한 데이터만 서버로부터 비동기 방식으로 전송받음. 잘보면 서버가 JSON파일을 보낸것을 확인할 수 있다.

위XML파일과 같은 내용을 담은 JSON파일이지만 가독성이 훨씬 좋다. 가독성 뿐 아니라 XML을 지양하고 JSON을 사용해야 하는 이유는 더 있다.

 

동기와 비동기의 차이는 요청을 보낸후 그에 대한 응답을 기다리는지 여부로 구분한다. 동기는 요청을 받아야지 다음 동작을 실행함. 반면 비동기는 요청 후 응답을 받지 않아도 다음 동작을 실행(즉, 기존에 내가 생각한 각각의 흐름을 독립적으로 수행해가면 비동기, 서로에게 영향을 미치면 동기다)

블로킹/논블로킹? 제어권이 어느 함수에 있는가. 처리되어야 하는 작업 하나가 전체적인 작업의 흐름을 막는지로 구분.

https://www.youtube.com/watch?v=ZFlnrGgdekI   5:30초

 

Ajax를 통해 위와같은 장점을 누릴 수 있는 것은 HTML , DOM , JavaScript , XMLHttpRequest, Etc의 혼합적인 사용으로 가능해 졌다. 즉, Ajax란 여러기술들이 합쳐진 서버와 클라이언트간의 비동기 통신 방식이다.

 

이전에 JS가 Web API를 이용하여 웹 프로그래밍을 한다고 배웠다(예를들면 Web API의 하나인 DOM(Document Object Model), BOM(Browser Object Model)의 API는 프로그래밍 언어인 JS가 이용한다. 마찬가지로 Web API의 하나인 XmlHttpRequest역시 js가 이용하는 Web API중 하나이다.

 

여기서 의문!!!! JS는 싱글스레드로 동작하는데 어떻게 비동기적으로 동작할 수 있게 되었나?

XmlHttpRequest가 바로 HTTP비동기 통신을 위한 메서드와 프라퍼티를 제공하는 Web API이다!!

 

Ajax의 코드를 간단히 구현한 것으로 Web API인 XmlHttpRequest(줄여서 xhr)의 메서드와 프라퍼티를 사용한 것을 확인 할 수 있다). 여기서 onload는 xhr의 Event Handler property임. 그리고 화살표함수인 EventHandler를 onload에 바인딩한것임. Http요청이 성공적으로 완료되어야 onload Event가 발생한다. 이렇게 모든 과정을 마친 get함수는 undefined를 반환하면서 종료됨.

ES6이전 비동기 통신 방법. 요청에 대해 성공적인 답변을 받으면 1번째 함수가 실행되고 실패하면 2번째 함수가 실행되는 것임

 

이벤트 루프(Event Loop)와 브라우저 환경. 이 슬라이드 설명 다시보기 https://www.youtube.com/watch?v=avfIUwDG2d8 7:00

 

Ajax는 기술도, Framework도, Library도 아니다. Ajax는 여러기술들(DOM, HTML, XmlHttpRequest, JS 등)이 합쳐져서 만들어진 서버와 클라이언트간 비동기 방식으로 데이터 교환을 위한 통신방법이다.

 

Ajax와 함께 많이 언급되는 fetch와 axios!!! 이거 정말 중요!!!!(내 프로젝트의 핵심기술)

ES6이전에 XHR API를 사용했었고 XHR을 사용한 것이 AJAX였다. 따라서 내 생각에는 AJAX와 Fetch는 구분되어야 하는 것이다. AJAX는 ES6이전 서버와의 비동기 통신 방법이었다면 Fetch API는 ES6이후 서버와의 비동기 통신 방법인것이다.

ES6이전에 XHR API를 사용했었고 XHR을 사용한 것이 AJAX였다. 따라서 내 생각에는 AJAX와 Fetch는 구분되어야 하는 것이다. AJAX는 ES6이전 서버와의 비동기 통신 방법이었다면 Fetch API는 ES6이후 서버와의 비동기 통신 방법인것이다.

Fetch는 xhr(XmlHttpRequest)처럼 http요청 전송기능을 제공하는 클라이언트 사이드 Web API이다!!! Fetch는 XmlHttpRequest와는 달리 추가적으로 Promise까지 지원한다.

Axios는 Node.js와 브라우저를 위한 Promise기반 HTTP클라이언트이다.

Axios의 클라이언트에서 XmlHttpRequest를 사용한다. 반면 Axios의 서버에서는 네이티브 Node.js의 http모듈을 사용한다.

개발자도구의 Network를 보면 Axios를 사용할 때에도 네트워크 type이 xhr로 오는 것을 확인할 수 있다.

 

HTTP구조: https://scshim.tistory.com/30

GET ⇒ 데이터 조회 HTTP 메서드

POST ⇒ 서버측에 새로운 리소스를 생성하거나 서버측의 프로세스를 처리하기 위한 데이터를 전송할 때 쓰이는 HTTP메서드(내용을 던지므로 해당내용은 pay load부분에 실린다. 여기서 말하는 pay load는 http의 message body를 말함)

HEAD ⇒ GET메서드와 같은 기능을 하는 메서드로 Message body를 뺀 상태줄(Status line)과 헤더만 반환

PUT ⇒리소스를 대체하는 HTTP메서드. 클라이언트가 리소스를 식별하는 특징이 있음(말 그대로 PUT 덮어 쓴다는 뜻으로 화끈한 수정기능이다. 보통 온건한 수정의 의미의 HTTP메서드는 PATCH이다)

DELETE ⇒ 서버쪽의 URL 주소에 있는 내용을 지우는 메서드(PUT과는 정반대 기능의 메서드)

출처: 내가 정리한 "모든 개발자를 위한 HTTP 웹 기본 지식 "( https://docs.google.com/document/d/1yAr2U4ZY_7Cowvmd82JDYjSNXP34_ZDx-V0UOg9sIcg/edit  )