XMLHttpRequest 객체
- 이전 페이지 DOM 복제 노드
- 다음 페이지 DOM 매뉴얼 목차
XMLHttpRequest 객체는 웹 페이지가 로드된 후 서버와 통신하는 방법을 제공합니다.
XMLHttpRequest 객체는 무엇인가요?
XMLHttpRequest 객체는개발자의 꿈그러니까, 당신은:
- 페이지를 다시 로드하지 않고 웹 페이지를 업데이트
- 페이지가 로드된 후 서버에서 데이터를 요청
- 페이지가 로드된 후 서버에서 데이터를 수신
- 백그라운드에서 서버로 데이터를 전송
모든 현대 브라우저는 XMLHttpRequest 객체를 지원합니다.
XMLHttpRequest 객체 생성
단一行의 JavaScript 코드로 XMLHttpRequest 객체를 생성할 수 있습니다.
모든 현대 브라우저에서(IE 7 포함):
xmlhttp=new XMLHttpRequest();
Internet Explorer 5와 6에서:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
예제
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// 모든 새로운 브라우저의 코드}
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// IE5와 IE6의 코드}
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("您的浏览器不支持XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"}
if (xmlhttp.status==200)
{// 200 = OK}
// ...여기에 코드...
}
else
{
alert("XML 데이터를 가져오는 문제");
}
}
}
</script>
주석:onreadystatechange은 이벤트 핸들러입니다. 그 값(state_Change)은 함수 이름이며, XMLHttpRequest 객체의 상태가 변경될 때 이 함수가 트리거됩니다. 상태는 0(uninitialized)에서 4(complete)까지 변경됩니다. 상태가 4일 때만 코드를 실행합니다.
Async=true를 사용하는 이유는 무엇인가요?
우리의 예제는 open()의 세 번째 파라미터에서 "true"를 사용했습니다.
이 파라미터는 요청이 동기 처리되는지 비동기 처리되는지를 정의합니다.
True는 스크립트가 send() 메서드 이후에도 서버 응답을 기다리지 않고 계속 실행될 것을 의미합니다.
onreadystatechange 이벤트는 코드를 복잡하게 만듭니다. 그러나 서버로부터 응답을 받지 않았을 때 코드가 중단되지 않도록 가장 안전한 방법입니다.
이 파라미터를 "false"로 설정하면 추가적인 onreadystatechange 코드를 제거할 수 있습니다. 요청이 실패했을 때 추가 코드를 수행할 필요가 없다면 이 파라미터를 사용할 수 있습니다.
XML / ASP
당신은 XML 문서를 열고 서버에 있는 ASP 페이지에 전송하여 이 요청을 분석하고, 그 다음 결과를 반환할 수도 있습니다.
<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
// code for IE7, Firefox, Opera, etc.
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
// code for IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp!=null)
{
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc=xmlHttp.responseText;
xmlHttp.open("POST", "demo_dom_http.asp", false);
xmlHttp.send(xmlDoc);
document.write(xmlHttp.responseText);
}
else
{
alert("您的浏览器不支持XMLHTTP.");
}
</script>
</body>
</html>
VBScript로 작성된 ASP 페이지:
<%
xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
xmldoc.documentElement.childNodes에서 각 x에 대해
if x.NodeName = "to" then name=x.text
next
response.write(name)
%>
response.write 속성을 사용하여 결과를 클라이언트로 전송합니다.
XMLHttpRequest 객체는 W3C의 표준인가요?
W3C 추천 표준 중 어떤 것도 XMLHttpRequest 객체를 규정하지 않습니다.
그러나 W3C DOM Level 3의 "Load and Save" 규격은 일부 유사한 기능을 포함하고 있지만, 아직 어떤 브라우저도 이를 구현하지 않았습니다.
- 이전 페이지 DOM 복제 노드
- 다음 페이지 DOM 매뉴얼 목차
