★Ajax & XHR introduction

Ajax 란?

- Asynchronous(비동기) JavaSciprt And Xml의 약자이다.

- 자바스크립트의 라이브러리 중 하나로 브라우저가 가지고 있는 XmlHttpRequest 객체를 이용해서 전체 페이지를 새로고침 할 필요 없이 필요한 일부분의 데이터만을 갱신할 수 있게 도와준다.

- 비동기(async) 방식이란? 웹 페이지를 리로드하지 않고 데이터를 불러오는 방식을 말한다. Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다.

- Ajax는 아래와 같은 기술들이 혼합적으로 사용되며, 서버와 [JSON, XML, HTML, 텍스트 파일] 등을 주고 받을 수 있게된다.

• HTML
• DOM
• JavaScript
• XmlHttpRequest
• etc

Ajax 가 필요한 이유?

- HTTP는 클라이언트에서 서버에 요청(Request)을 보내고 서버는 요청을 처리해서 응답(Response)하는 방식으로 이루어진다.

- HTTP는 connectionless, Stateless하게 이뤄지기 때문에 서버에 연결하고, 요청해서 응답을 받고나면 연결이 끊어진다. 연결이 끊어지게 되면 클라이언트의 이전 상태를 알 수 없기 때문에 클라이언트가 과거에 로그인을 성공하더라도 로그 정보를 유지할 수 없게 되는 등 웹 서비스를 하는데 상당한 문제가 생긴다.

- 따라서 서버와 계속 통신이 필요한 경우 Ajax와 같은 방법을 사용하는 것이다. 

- Ajax 네트워크 기술을 이용하여 클라이언트에서 서버로 데이터를 요청하고 그에 대한 결과를 돌려 받을 수 있다.

Ajax 동작원리

- Ajax를 이용한 웹 응용 프로그램은 자바스크립트 코드를 통해 웹 서버와 통신을 하며 사용자의 동작에 영향을 주지 않으면서 백그라운드에서 지속해서 서버와 통신할 수 있다.

1. 사용자에 의한 요청 이벤트가 발생한다.
2. 요청 이벤트가 발생하면 이벤트 핸들러에 의해 자바스크립트가 호출된다.
3. 자바스크립트는 XmlHttpRequest 객체를 사용하여 서버에 요청을 보낸다. (이때 웹 브라우저는 요청을 보내고 나서 서버의 응답을 기다릴 필요가 없이 다른 작업을 처리할 수 있다. => 비동기식 장점)
4. 서버는 전달받은 XmlHttpRequest 객체를 가지고 Ajax 요청을 처리한다.
5. 서버는 처리한 결과를 HTML, XML, JSON, 또는 텍스트파일의 형태의 데이터로 웹 브라우저에 전달한다. (이때 전달되는 응답은 새로운 페이지를 전부 보내는 것이 아니라 필요한 데이터만을 전달한다.)
6. 5번과 함께 작동한다.
7. 서버로부터 전달받은 데이터를 가지고 웹 페이지의 일부분만을 갱신하는 자바스크립트를 호출한다.
8. 결과적으로 웹 페이지의 일부분만이 다시 로딩되어 표시된다.

Ajax 진행과정

1. XmlHttpRequest 객체를 만든다.
2. 처리 결과를 받을 이벤트 리스너를 등록한다.
3. 서버로 보낼 데이터를 생성한다.
4. 클라이언트와 서버 간의 연결 요청을 준비한다. (open() 메서드 이용)
   1. 서버로 보낼 데이터 전동방식을 설정한다.(get, post)
   2. 서버 응답 방식을 설정한다.(동기, 비동기)
5. 실제 데이터를 전송한다.
6. 응답을 처리한다.
7. 데이터를 처리한다.

XHR 이란?

- XmlHttpRequest의 약자이다.

- XHR 객체는 서버와 상호작용하기 위하여 사용된다.

- 전체 페이지의 새로고침 없이도 URL로 부터 데이터를 받아올 수 있다.

- Ajax 프로그래밍에 주로 사용된다.

 

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

AJAX란 무엇인가?