Ajax Tutorial

Ajax란? 

Ajax는 Asynchronous JavaScript and XML의 약자이다.

비동기 자바 스크립트와 XML을 의미합니다.

Ajax는 서버와 클라이언트 사이에서 페이지 전체를 새로고침 하지 않고 데이터를 주고 받을 수 있도록 해줍니다. 

페이지가 새로고침이 되지 않기 대문에 페이지에 있는 모든 데이터가 아닌 특정 데이터만을 서버에 전송할 수 있으며 이는 어플리케이션을 더 빠르고 효율적으로 사용하며 운영할 수 있게 해줍니다.

 

Ajax는 JavcScript, DOM, XML, HTML/XHTML, CSS, XMLHttpRequest등과 같이 다양한 기능들과 함께 사용되는 기능입니다. 

** DOM : http://tcpschool.com/javascript/js_dom_concept

** HTML/XHTML, CSS : 뷰 페이지를 구현하는 기능

** XML or JSON : 서버와 데이터를 주고 받을 때 사용되는 기능

                       (JSON - Javascript Object Notation : XML과 비슷하지만 보다 짧고 빠르다)

** XMLHttpRequest : 비동기 통신을 위한 기능 

** JavaScript : 전체적인 기능으로 사용되기도 하지만 개별적으로는 클라이언트(사용자) 페이지의 확인을 

                   위해 사용 (예: 빈칸 확인 등)

 

다양한 웹사트에서 Ajax를 사용하고 있습니다. 예) gmail, facebook, twitter, google map, youtube 등등

---

동기 (Synchronous) & 비동기 (Asynchronous)

Ajax를 공부하기 전에 동기화와 비동기화에 대해 알려드리겠습니다.

 

▶ 동기 (Synchronous / Classic Web-Application Model)

    ** Synchronous의 사전적 의미는 "동시에 발생하는" 입니다.

    클라이언트(사용자)가 서버로 요청을 할 때 (회원가입, 새로고침 등등) 요청이 완료가 될 때까지

   사용자는 다른 요청을 할 수가 없습니다.

    이미지 -> https://www.javatpoint.com/understanding-synchronous-vs-asynchronous

 

▶ 비동기 (Asynchronous / AJAX Web-Application Model)

    ** Asynchronous의 사전적 의미는 "동시에 발생 혹은 존재하지 않는" 입니다.

       클라이언트(사용자)가 서버로 요청을 하여 서버가 요청을 완료할 때 까지 사용자는

       또 다른 요청을 할 수 있습니다.

       예를 들어 회원가입 시 아이디 중복 검사, 이메일 인증 등의 기능은 페이지의 새로고침

       없이 진행되어야 하기 때문에 비동기 통신을 하면 인증, 중복검사의 기능 부분만 따로 서버로

       요청을 보낼 수 있습니다.

      이미지 -> https://www.javatpoint.com/understanding-synchronous-vs-asynchronous

---

XMLHttpRequest 

XMLHttpRequest는 클라이언트와 서버 사이의 비동기 통신을 위해 사용되는 객체입니다.

▶ 객체 작동되는 순서

    1. 백그라운드에서 클라이언트로부터 데이터를 받아서 서버로 전송

    2. 서버로부터 데이터에 대한 답을 받음

    3. 받은 데이터로 웹페이지 업데이트 -> 업데이트 시 페이지가 새로고침/reload 되지 않는다.

 

▶ XMLHttpRequest 객체의 속성

 

속성 (Property)	설명 (Description)
onReadyStateChange	XMLHttp의 상태(readystate)가 변경될 때 마다(onchange) 자동으로 호출되는 함수입니다. 동기 통신에서는 사용할 수 없다
readyState	XMLHttpRequest 객체의 현재 상태를 보여줍니다. 0~4 까지의 상태 변화 0 UNSENT XMLHttpRequest 객체가 생성됨 1 OPENED open() 메소드가 성공적으로 실행됨 2 HEADERS_RECEIVED 모든 요청에 대한 응답이 도착함  3 LOADING 요청한 데이터를 처리중임 4 DONE 요청한 데이터의 처리가 완료되어 응답할 준비가 완료됨
responseText	text 형식으로 응답함
responseXML	XML 형식으로 응답함

 

▶XMLHttpRequest 객체의 메소드

메소드 (Method)	설명 (Description)
void open(전달방식, URL 주소, 동기여부)	전달방식(method) : GET 방식과 POST방식 중 하나 선택
	URL 주소 : 요청을 처리할 서버의 파일 주소
	동기여부 : 동기식(sync), 비동기식(async)일지 확인
void send()	GET 방식으로 서버로 요청 전달
void send(String)	POST 방식으로 서버로 요청 전달
setRequestHeader(header, value)	요청 헤더를 작성할 수 있는 메소드 XMLHttpRequest인스턴스.setRequestHeader(헤더이름, 헤더값) *HTTP 규약에서 사용하는 헤더 이름은 모두 첫 글자가 영문 대문자입니다

---

Ajax서버와 어떻게 통신하나요?

Ajax는 XMLHttpRequest 객체를 통해서 서버와 통신을 합니다.

아래 이미지와 설명을 통해 어떻게 통신이 이루어 지는지 알려드리겠습니다.

이미지 -> https://www.javatpoint.com/how-ajax-works

 

▶ 통신이 이루어지는 순서

   1. 사용자가 홈페이지에서 요청 보냄 -> JavaScript가 호출되며 XMLHttpRequest객체 호출됨

   2. XMLHttpRequest 객체가 서버로 HTTP 요청을 보냄

   3. 서버가 JSP, PHP, Servlet, ASP.net 등을 통해 데이터베이스와 통신함

   4. 데이터를 검색 및 회수

   5. 서버가 XMLHttpRequestdprp XML 데이터 혹은 JSON 데이터를 보냄

   6. 돌아온 데이터를 HTML 과 CSS가 브라우저에 출력해줌