XML HttpRequest
모든 최신 브라우저에는 서버에서 데이터를 요청하는 내장 XMLHttpRequest 객체가 있습니다.
XMLHttpRequest 객체
XMLHttpRequest 객체는 웹 서버에서 데이터를 요청하는 데 사용할 수 있습니다.
XMLHttpRequest 객체는 개발자의 꿈 입니다 .
- 페이지를 새로고침하지 않고 웹페이지 업데이트
- 서버에서 데이터 요청 - 페이지가 로드된 후
- 서버에서 데이터 수신 - 페이지가 로드된 후
- 서버에 데이터 보내기 - 백그라운드에서
XMLHttpRequest 예제
아래 입력 필드에 문자를 입력하면 XMLHttpRequest가 서버로 전송되고 일부 이름 제안이 (서버에서) 반환됩니다.
예시
위의 예는 이 튜토리얼의 AJAX 장에서 설명합니다.
XMLHttpRequest 보내기
XMLHttpRequest 객체를 사용하기 위한 일반적인 JavaScript 구문은 다음과 같습니다.
예시
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Typical action to be performed when the document is ready:
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 객체에 대해 더 많이 배울 것입니다.
Internet Explorer의 이전 버전(IE5 및 IE6)
Internet Explorer의 이전 버전(IE5 및 IE6)은 XMLHttpRequest 개체를 지원하지 않습니다.
IE5 및 IE6을 처리하려면 브라우저가 XMLHttpRequest 객체를 지원하는지 확인하거나 ActiveXObject를 생성하십시오.
예시
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}