[WEB : Ajax] Ajax 들어가기

 

Ajax란?

: Asynchronous Javascript And XML 의 줄임말로, 에이젝스라고 읽는다. XML 기반의 데이터를 클라이언트인 웹 브라우저와 서버 사이에서 교환하는 기법이다.

Asynchronous는 우리말로 '비동기적'이란 뜻으로, 비동기적이란 페이지의 이동 없이 웹 브라우저 화면을 동적으로 변경하는 것이다. 또는, 페이지 이동 없이 한 페이지 내에서 여러 동작을 동시에 수행할 수 있는 것이다.

 

 

Ajax 구성 기술 요소

-- Javascript : 사용자 이벤트가 발생하면 XMLHttpRequest 객체를 사용해서 웹 서버에 요청 전달

/ XMLHttpRequest 객체로부터 응답이 오면 DOM, CSS 등으로 화면을 조작

-- XMLHttpRequest : 웹 서버와 통신

/ 사용자의 요청을 웹 서버에 전달 & 웹 서버로부터 받은 결과를 브라우저에 전달

-- DOM : 문서의 구조

/ 동적인 화면 출력 및 표시 정보와의 상호작용
** HTML DOM(Document Object Model) : HTML 문서의 각 요소를 객체화한 것

-- HTML, CSS : 표현정보

/ 글자색, 배경색, 위치, 투명도 등 UI와 관련된 부분

-- XML, XSLT : 웹 서버와 비동기적으로 데이터를 교환하고 조작

 

 

 

XMLHttpRequest(xhr) 객체

-- Ajax에서 서버와 클라이언트 간에 통신을 담당
-- 웹 브라우저의 종류나 버전에 따라 지원되지 않을 수도 있음
----- 웹브라우저가 IE5.0/6.0은 ActiveX객체 사용
----- >> var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
----- 웹브라우저가 IE7.0, 파이어폭스, 사파리, 오페라 등의 경우에는 자바스크립트 내장객체 사용
----- >> var httpRequest = new XMLHttpRequest();

 

XMLHttpRequest(xhr) 메소드

메소드명	설명
abort()	현재의 요청을 취소
getAllResponseHeaders()	현재의 요청을 취소(중단)한다
getResponseHeader(headerName)	HTTP 요청에 대한 응답 헤더들을 키와 값의 쌍으로 리턴한다
open(method, url, async)	매개변수로 주어진 HTTP 헤더의 값을 리턴한다
send(content)	요청을 서버로 보낸다
setRequestHeader(header, value)	헤더의 값을 설정하는 것으로, 헤더명이 header인 값을 value로 설정한다

 

XMLHttpRequest(xhr) 프로퍼티

메소드명	설명
onreadystatechange	상태의 변경이 발생했을 때, 이벤트를 처리하기 위한 이벤트 핸들러를 기술한다
readyState	요청 객체의 상태를 리턴한다
responseText	문자열로 이루어진 서버의 응답을 받는다
responseXML	XML로 이루어진 서버의 응답을 받는다
responseBody	이진코드 문자열로 서버의 응답을 받는다. ActiveX컴포넌트를 사용해서 생성한 XMLHttpRequest 객체에서만 사용된다
status	서버로부터 응답받는 HTTP 상태코드로, 숫자로 리턴된다.
statusText	서버로부터 HTTP 상태를 문자열로 리턴받는다