Ajax

Ajax(Asynchronous JavaScript and XML)

페이지를 다시 로드할 필요 없이 서버와 비동기 요청을 만드는 기법

XMLHttpRequest (XHR) 객체로 구현

 

 

* XHR 인스터스 생성하기

var xhr;

if( window.XMLHttpRequest ) {  ← XHR이 정의되었는지 검사
  xhr = new XMLHttpRequest();
}
else if( window.ActiveXObject ) {  ← ActiveX를 제공하는 검사, IE
  xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
else {
  throw new Error("Ajax 지원 안하는 가봐요");
}

 

 

* XHR 메서드와 프로퍼티

메서드	설명
abort()	현재 실행하는 요청을 취소
getAllResponseHeaders()	응답 헤더의 모든 이름과 값을 포함하는 문자열을 반환
getResponseHeader(name)	응답 헤더에서 name에 해당하는 값을 반환
open(method, url, async, username, password)	요청 메서드와 호출할 URL을 설정.  선택적으로 요청은 동기 방식으로 선언할 수 있으며,  컨테이너 기반 인증이 필요하면 사용자명과 암호를 제공
send(content)	요청을 선택사항인 본문 콘텐츠와 함께 전송
setRequestHeader(name,value)	name에 해당하는 요청 헤더에 value를 설정

 

프로퍼티	설명
onreadystatechange	요청의 상태가 변경될 때 사용하는 이벤트 핸들러를 할당
readyState	요청의 상태를 나타내는 정수 값  0 - 초기화 되지 않은 상태 (Uninitialized)  1 - 로드되지 않은 상태(Loading)       send() 메서드가 호출되지 않은 상태  2 - 로드된 상태(Loaded)       헤더와 상태는 받았지만, 응답은 받지 못한 상태  3 - 상호작용 상태(Interactive)       데이터의 일부만 받은 상태  4 - 완료상태(Complete)       모든 데이터를 받아서 완료된 상태
responseText	응답에 반환된 본문 콘텐츠
responseXML	본문 콘텐츠가 XML이라면, 본문 콘텐츠에서 XML DOM을 생성
status	서버에서 반환한 응답상태코드.  성공은 200, 찾을 수 없음은 404 등
statusText	응답으로 반환된 상태 메시지

 

 

* 요청 보내기

XHR의 open() 메서드를 호출

xhr.open( 'GET', '/some/resource/url', Boolean값 );

 

요청을 서버로 전송하지 않는다.

URL과 HTTP메서드를 설정하는 데 사용

Boolean값이 true이거나 생략하면 비동기 호출, false면 동기 호출

 

GET요청은

xhr.send(null);

 

POST요청은

send() 메서드에 전달된 문자열은 반드시 이름과 값이 올바르게 URL로 인코딩된 쿼리 문자열 형태여야

xhr.send( 'a=1&b=2&c=3' );

 

 

* 진행 상태 확인하기

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {  ← 완료상태
    if (xhr.status >= 200 && xhr.status < 300) {  ← 성공상태
      document.getElementById('someContainer').innerHTML = xhr.responseText;
    }
  }
}

 

* 응답 얻기

Ajax 요청의 응답은 일반텍스트, HTML, JSON(JavaScript Object Notation)형태의 자바스크립트 객체나 배열일 수 있다.

응답의 본문은 .responseText 프로퍼티를 사용

MIME타입이 'text/xml'등의 XML형태는 .responseXML 프로퍼티를 사용