AJAX – XMLHttpRequest 객체

AJAX의 핵심은 XMLHttpRequest 객체입니다.


XMLHttpRequest 객체

최신의 모든 브라우저는 XMLHttpRequest 객체를 지원합니다.

XMLHttpRequest 객체는 백그라운드에서 웹 서버와 데이터를 교환하기 위해 사용할 수 있습니다. 이것은, 전체 페이지를 다시 로드하지 않고도, 웹 페이지의 일부를 업데이트할 수 있다는 의미입니다.


XMLHttpRequest 객체 생성하기

모든 최신 브라우저 (Chrome, Firefox, IE7 +, Edge, Safari, Opera)에는 내장(built-in ) XMLHttpRequest 객체가 있습니다.

XMLHttpRequest 객체를 생성하는 구문:

Example

The XMLHttpRequest Object

AJAX로 이 텍스트를 변경해 보십시오.


도메인 간 액세스 (Access Across Domains)

보안상의 이유로 최신 브라우저는 도메인 간 액세스(access across domains)를 허용하지 않습니다.

이것은, 웹 페이지와 로드하려는 XML 파일은 모두, 동일한 서버에 있어야 한다는 의미입니다.

W3Schools의 모든 오픈 XML 파일(all open XML files) 예제는 W3Schools 도메인에 있습니다.

위의 예를 자신의 웹 페이지에서 사용하려면, 로드하는 XML 파일을 자신의 서버에 위치시켜야 합니다.


이전 브라우저 (IE5 및 IE6)

이전 버전의 Internet Explorer (5/6)는 XMLHttpRequest 객체 대신 ActiveX 객체를 사용합니다:

IE5 및 IE6을 처리하려면, if 문에서 브라우저가 XMLHttpRequest 객체를 지원하는지 확인하고, else 문에서 ActiveX 객체를 만듭니다:

The XMLHttpRequest Object

AJAX로 이 텍스트를 변경해 보십시오.


XMLHttpRequest 객체 메소드(Method)

Method Description
new XMLHttpRequest() 새 XMLHttpRequest 객체 생성
abort() 현재 request 취소
getAllResponseHeaders() header 정보 반환
getResponseHeader() 지정한 header 정보 반환
open(method, url, async, user, psw) Specifies the request

method: 요청 유형(type) GET or POST
url: 파일 위치
async: true (비동기(asynchronous)) 또는 false (동기(synchronous))
user: 선택적 사용자 이름
psw: 선택적 비밀번호

send() request를 서버에 보냄
GET requests를 위해 사용
send(string) request를 서버에 보냄
GET requests를 위해 사용
setRequestHeader() 전송될 헤더에 레이블/값 쌍(label/value pair)을 추가함

XMLHttpRequest 객체 속성(Property)

Property Description
onreadystatechange readyState 속성이 변경 될 때, 호출 할 함수를 정의함
readyState XMLHttpRequest의 상태를 보유.
0: request가 초기화되지 않음
1: 서버 연결됨
2: request 수신
3: request 처리중
4: request 완료 및 response 준비됨
responseText response data를 문자열로 반환
responseXML response data를 XML data로 반환
status request의 상태-번호를 반환
200: "OK"
403: "Forbidden"
404: "Not Found"
전체 목록은 Http
Messages Reference
를 참조
statusText status-text (예. "OK" 또는 "Not Found")를 반환

출처: AJAX – The XMLHttpRequest Object

댓글 남기기