Ajax

Ajax 란

Ajax (Asynchronous JavaScript + XML)

 

1. Ajax란

JavaSript와 XML을 사용하여 비동기적으로 서버와 통신을 하는것입니다.

 - 동기적 통신

   보통 동기적 통신이란 순간 전체 화면이 갱신되면서 다시 뿌려주는 통신을 이야기 하며,

   서버로 부터 응답이 돌아올 때까지는 다른 작업은 할 수 없습니다.

   > HTML로부터의 submit 처리에 의해 서버 통신하는 방식(동기 처리 방식)

 

 - 비동기적 통신

   비동기적 통신이란 해당화면 그대로인 상태에서 일부의 정보를 서버에 요청하고

   해당부분이 갱신되어 표시되는것을 말합니다.

   비동기적 통신에서는 서버로 부터 응답이 돌아오지 않아도 다른 작업을 할 수 있습니다.

   > Ajax에 의해 JavaScript로부터 서버 통신하는 방식(비동기 처리 방식)

 

즉, Ajax 일부의 정보를 서버로 전송하고, 그것을 반영시키는 비동기통신을 구현한 것입니다.

 

2. Ajax에 사용되는 기술

   1) XMLHttpRequest

      클라이언트와 서버간 데이터를 전송하는 기능을 클라이언트측에서 제공하는 API

      전체 페이지를 다시로드하지 않고 URL에서 데이터를 읽는 간단한 방법을 제공함

      이 API를 사용하여 사용자의 작업을 중단하지 않고 웹페이지의 일부를 업데이트할 수 있음

   2) JavaScript

      XMLHttpRequest는 JavaScript의 내장객체임  *내장객체 : 미리 정의된 객체

      따라서, Ajax는 JavaScript를 사용하지 않으면 구현할 수 없음 

   3) DOM

      Documet Object Model(DOM)은 HTML 및 XML 문서용 API임

      웹페이지를 스크립트나 프로그래밍 언어와 연결하는 메커니즘임

      즉, Ajax를 사용하여 동적 웹페이지 작성시, HTML 및 XML 어떤 요소를 변경할지 지정함

      여기서 DOM은  HTML이나 XML울 "트리구조"로 전개해 어플리케이션측에 문장의 정보를 전해

      가공이나 변경을 쉽게 하는것임

   4) XML

      약자는 Extensible Markup Language로서, 문서 및 데이터의 의미와 구조를 설명하기 위한 마크업 언어 중 하나임

      (HTML과 유사함)

      XML은 태그를 자유롭게 설정할 수 있으며 태그에 의미를 부여할 수 있음

      데이터의 교환으로 XML 사용시 어느 데이터가 어느 요소인지 바로 확인 가능함

     

      그러나, 요즘 Ajax는 XML대신 JSON이라는 유형을 자주 사용함

 

3. 흐름정리

      1) 사용자의 페이지에서 이벤트 발생(버튼 클릭 등)

      2) JavaScript + XMLHttpReques로 서버에 요청을 송신(비동기 통신)

         원하는 정보, 반환되는 응답을 지정하여 요청함

      3) 서버에서 정보를 처리

         서버가 처리되는 동안에도 클라이언트는 작업을 계속 할 수 있음

      4) 처리결과를 JSON이나 XML등의 형식으로 클라이언트로 응답

      5) 응답을 받아 DOM에서 페이지를 갱신

         업데이트된 부분만 다시 갱신됨