[ AJAX ] Ajax(Asynchronous Javascript And XM

Ajax

---

1. Ajax란

• Ajax는 구현하는 방식을 의미한다. ( 언어나 프레임워크가 아님 )
• 웹에서 화면을 갱신하지 않고 데이터를 서버로부터 가져와 처리하는 방법이다.
• JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회한다.
• 화면 갱신이 없으므로 사용자 입장에서는 편리하다.
• 개발자 입장에서는 동적으로 DOM을 구성해야하기 때문에 구현이 복잡하다.
• 비교

  일반 요청에 대한 응답	Ajax 요청에 대한 응답
  - 데이터 입력 후 event 발생 - 서버에서 data를 이용하여 로직 처리 - 로직 처리 결과에 따라 응답 페이지를 생성하고,   클라이언트에 전송(화면 전환 발생)	- 데이터 입력 후 event 발생 - 서버에서 요청을 처리한 후 Text, XML or JSON으로 응답 - 클라이언트(브라우저)에서는 이 응답 data를 이용하여,   화면 전환없이 현재 페이지에서 동적으로 화면을 재구성

 

2. Server와 Client의 상호작용

• 웹 화면 구성 방식
  • 서버 중심 상호작용 방식
  • 클라이언트 중심 상호작용 방식
• 서버 중심 상호작용 방식
  • 서버에서 화면 구성
  • JSP, PHP, ASP ... 
• 클라이언트 중심 상호작용 방식
  • 클라이언트(웹 브라우저)에서 화면을 구성
  • JavaScript
• Ajax는 클라이언트 중식의 개발 방식이며 비동기 요청보다는 동적 화면 구성이 관건

 

3. JavaScript Ajax

• JavaScript가 Ajax방식으로 통신할 때는 XMLHttpRequest 객체를 사용한다.
• XMLHttpRequest 객체는 전송방식, 경로 등의 전송 정보를 싣는 역할을 한다.
• 실제 서버와의 통신은 브라우저의 Ajax 엔진에서 수행한다.
• httpRequest 속성값
  • status
    

    Value	Status Text	Description
    200	OK	요청 성공
    403	Forbidden	접근 거부
    404	Not Found	페이지 없음
    500	Internal Server Error	서버 오류 발생

  • readyState
    

    Value	ReadyState Text	Description
    0	Uninitialized	객체만 생성(open 메소드 호출 전)
    1	Loading	open 메소드 호출
    2	Loaded	send 메소드 호출 status의 헤더가 도착 전인 상태
    3	Interactive	데이터 일부를 받은 상태
    4	Completed	데이터 전부를 받은 상태

---

 

 

CPDM