XML HttpRequest

모든 현대 브라우저는 데이터를 서버에서 요청할 수 있는 내장된 XMLHttpRequest 객체를 가지고 있습니다.

XMLHttpRequest 객체

XMLHttpRequest 객체는 웹 서버에서 데이터를 요청할 수 있습니다.

XMLHttpRequest 객체는개발자의 꿈그러니까, 당신은:

• 웹페이지를 업데이트 - 페이지를 다시 로드하지 않고
• 데이터를 서버에서 요청 - 페이지가 로드된 후
• 데이터를 서버에서 수신 - 페이지가 로드된 후
• 데이터를 서버로 전송 - 백그라운드에서

XMLHttpRequest 예제

아래의 입력 필드에서 문자를 입력하면 XMLHttpRequest가 서버로 전송되어 서버에서 이름 추천(서버에서)을 반환합니다:

예제

이름을 입력하려면 아래의 입력 필드에 입력하세요:

XMLHttpRequest를 전송

아래는 XMLHttpRequest 객체를 사용하는 일반 JavaScript 문법입니다:

예제

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // 문서가 준비되었을 때 수행되는 표준 작업:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();

직접 시도해보세요

예제 설명

위의 예제의 첫 번째 줄은 다음과 같은 객체를 생성합니다: XMLHttpRequest 객체:

var xhttp = new XMLHttpRequest();

onreadystatechange 속성은 각 XMLHttpRequest 객체의 상태가 변경될 때마다 실행되는 함수를 지정합니다:

xhttp.onreadystatechange = function()

어떤 경우에 readyState 속성이 4이고 status 속성이 200일 때, 응답이 준비되었습니다:

if (this.readyState == 4 && this.status == 200)

responseText 속성은 텍스트 문자열 형식으로 서버 응답을 반환합니다。

텍스트 문자열을 사용하여 웹 페이지를 업데이트할 수 있습니다：

document.getElementById("demo").innerHTML = xhttp.responseText;

이 튜토리얼의 AJAX 장에서 XMLHttpRequest 객체에 대해 더 많이 배울 것입니다.