AJAX를 설계할 때 사용되는 중요한 기술(도구)은 XMLHTTPRequest 객체입니다. XMLHttpRequest 개체는 오늘날 모든 AJAX 및 Web 2.0 응용 프로그램의 기술 기반입니다. 이제 소프트웨어 공급업체와 오픈 소스 커뮤니티가 XMLHttpRequest 개체의 사용을 더욱 단순화하기 위해 다양한 AJAX 프레임워크를 제공하고 있지만 여전히 이 개체의 속성과 메서드를 이해하는 것이 필요합니다.
1. XMLHTTPRequest 객체란 무엇입니까?
가장 일반적인 정의는 다음과 같습니다. XmlHttp는 JavaScript, VbScript, Jscript 및 기타 스크립팅 언어에서 http 프로토콜을 통해 XML 및 기타 데이터를 전송하거나 수신할 수 있는 API 세트입니다. XmlHttp의 가장 큰 용도는 전체 페이지를 새로 고치지 않고도 웹 페이지 내용의 일부를 업데이트할 수 있다는 것입니다. (이 기능은 AJAX의 주요 기능 중 하나입니다.)
MSDN의 설명: XmlHttp는 클라이언트가 http 서버와 통신할 수 있는 프로토콜을 제공합니다. 클라이언트는 XmlHttp 개체(MSXML2.XMLHTTP.3.0)를 통해 http 서버에 요청을 보내고 Microsoft XML 문서 개체 모델 Microsoft? XML 문서 개체 모델(DOM)을 사용하여 응답을 처리할 수 있습니다.
여기서 좀 더 이야기하자면, 사실 이 기능은 아주 초기에 등장했지만, 예전에는 브라우저 지원이 부족해서 IE에서만 지원이 되어서 대부분의 WEB 프로그래머들이 많이 사용하지 않는 상황입니다. 많은 변화가 있었고 Mozilla와 Safari는 이를 사실상의 표준으로 채택했으며 주류 브라우저는 XMLHTTPRequest 객체를 지원하기 시작했습니다. 하지만 여기서 강조해야 할 점은 XMLHTTPRequest가 아직 W3C 표준이 아니기 때문에 브라우저에 따라 성능이 약간 다르다는 점입니다.
2. XMLHTTPRequest 객체 생성
차이점을 말하자면, 어떻게 선언(사용)하는지 살펴보겠습니다. XMLHTTPRequest 객체를 사용하여 요청을 보내고 응답을 처리하기 전에 먼저 javascript를 사용하여 XMLHTTPRequest 객체를 생성해야 합니다. (IE는 XMLHTTPRequest를 ActiveX 객체로 구현하고 다른 브라우저(예: Firefox/Safari/Opear)는 이를 기본 javascript 객체로 구현합니다.) JavaScript를 사용하여 이를 생성하는 방법을 살펴보겠습니다.
다음은 인용문입니다.
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
var xmlhttp;
//XMLHTTPRequest 객체 생성
함수 createXMLHTTPRequest(){
if(window.ActiveXObject){ // ActiveX 컨트롤 지원 여부 확인
xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); // ActiveXObject의 새 인스턴스를 인스턴스화하여 XMLHTTPRequest 개체를 만듭니다.
}
else if(window.XMLHTTPRequest){ // XMLHTTPRequest를 로컬 자바스크립트 객체로 구현할지 여부를 결정합니다.
xmlhttp = new XMLHTTPRequest(); // XMLHTTPRequest 인스턴스 생성(로컬 자바스크립트 객체)
}
}
//-->
</script>3. 속성과 메소드가 너무 많기 때문에 이 페이지를 사용하여 메소드와 속성을 나열하겠습니다(주로 저도 배우고 있기 때문입니다).
<html>
<머리>
<title>XMLHTTPRequest 객체 DEMO 설명</title>
<스크립트 언어="자바스크립트" 유형="텍스트/자바스크립트">
<!--
var xmlhttp;
//XMLHTTPRequest 객체 생성
함수 createXMLHTTPRequext(){
if(window.ActiveXObject) {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
else if(window.XMLHTTPRequest){
xmlhttp = 새로운 XMLHTTPRequest();
}
}
함수 PostOrder(xmldoc)
{
createXMLHTTPRequext();
// 메소드: 열기
//새 http 요청을 생성하고 요청 방법, URL 및 확인 정보를 지정합니다.
// 구문: oXMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
//매개변수
// bstr 메소드
//POST, GET, PUT 및 PROPFIND와 같은 http 메소드. 대소문자를 구분하지 않습니다.
// bstrUrl
//요청된 URL 주소는 절대 주소일 수도 있고 상대 주소일 수도 있습니다.
// varAsync[선택 사항]
// 부울 유형, 이 요청이 비동기인지 여부를 지정합니다. 기본값은 true입니다. true인 경우 상태가 변경될 때 onreadystatechange 속성으로 지정된 콜백 함수가 호출됩니다.
// bstr사용자[선택사항]
// 서버에서 인증이 필요한 경우 여기에 사용자 이름을 지정합니다. 지정하지 않으면 서버에서 인증이 필요할 때 인증 창이 나타납니다.
// bstr비밀번호[선택사항]
// 확인 정보 중 비밀번호 부분입니다. 사용자 이름이 비어 있으면 이 값은 무시됩니다.
// 참고: 이 메서드를 호출한 후 send 메서드를 호출하여 서버에 데이터를 보낼 수 있습니다.
xmlhttp.Open("get", " http://localhost/example.htm ", false);
// var book = xmlhttp.responseXML.selectSingleNode("//book[@id='bk101']");
// 경고(book.xml);
// 속성: onreadystatechange
//onreadystatechange: ReadyState 속성이 변경될 때 이벤트 핸들러를 지정합니다.
// 구문: oXMLHttpRequest.onreadystatechange = funcMyHandler;
// 다음 예제에서는 XMLHTTPRequest 객체의 ReadyState 속성이 변경될 때 HandleStateChange 함수를 호출하는 방법을 보여줍니다.
// 데이터가 수신되면(readystate == 4) 이 페이지의 버튼이 활성화됩니다.
// 참고: 이 속성은 쓰기 전용이며 W3C 문서 개체 모델의 확장입니다.
xmlhttp.onreadystatechange= HandleStateChange;
// 메소드: 전송
//http 서버에 요청을 보내고 응답을 받습니다.
// 구문: oXMLHttpRequest.send(varBody);
// 매개변수: varBody (이 요청을 통해 전송할 데이터입니다.)
// 참고: 이 메서드의 동기 또는 비동기 모드는 open 메서드의 bAsync 매개 변수에 따라 달라집니다. bAsync == False이면 이 메서드는 요청이 완료되거나 시간 초과될 때까지 기다린 후 반환됩니다. 즉시 돌아올 것입니다.
// 이 메서드는 사용할 requestBody인 하나의 선택적 매개 변수를 사용합니다. 허용되는 VARIANT 입력 유형은 BSTR, UI1(부호 없는 바이트)의 SAFEARRAY, XML DOM(문서 개체 모델) 개체에 대한 IDispatch 및 IStream *입니다. IStream * 입력 유형을 보낼 때 청크 분할 인코딩(전송용)만 사용합니다. 구성 요소는 IStream * 입력 유형을 제외한 모든 항목에 대해 Content-Length 헤더를 자동으로 설정합니다.
// 전송된 데이터가 BSTR인 경우 응답은 utf-8로 인코딩되며 문자 세트가 포함된 문서 유형 헤더를 적절한 위치에 설정해야 합니다.
// 입력 유형이 UI1의 SAFEARRAY인 경우 추가 인코딩 없이 응답이 그대로 전송됩니다. 호출자는 적절한 콘텐츠 유형으로 Content-Type 헤더를 설정해야 합니다.
// 전송된 데이터가 XML DOM 개체인 경우 응답은 xml 문서에 선언된 인코딩으로 인코딩됩니다. xml 문서에 인코딩이 선언되지 않으면 기본 UTF-8이 사용됩니다.
// 입력 유형이 IStream *인 경우 추가 인코딩 없이 응답이 그대로 전송됩니다. 호출자는 적절한 콘텐츠 유형으로 Content-Type 헤더를 설정해야 합니다.
xmlhttp.Send(xmldoc);
// 메소드: getAllResponseHeaders
// 응답의 모든 http 헤더를 가져옵니다.
// 구문: strValue = oXMLHttpRequest.getAllResponseHeaders();
// 참고: 각 http 헤더 이름과 값은 콜론으로 구분되고 rn으로 끝납니다. 이 메소드는 send 메소드가 완료된 후에만 호출할 수 있습니다.
경고(xmlhttp.getAllResponseHeaders());
// 메소드: getResponseHeader
// 응답 정보에서 지정된 http 헤더를 가져옵니다.
// 구문: strValue = oXMLHttpRequest.getResponseHeader(bstrHeader);
// 참고: 이 메서드는 send 메서드가 성공한 후에만 호출할 수 있습니다. 서버에서 반환된 문서 유형이 "text/xml"인 경우 이 문장은
// xmlhttp.getResponseHeader("Content-Type"); 문자열 "text/xml"을 반환합니다. getAllResponseHeaders 메소드를 사용하여 완전한 http 헤더 정보를 얻을 수 있습니다.
Alert(xmlhttp.getResponseHeader("Content-Type")); // http 헤더에 Content-Type 열(현재 웹 서버의 버전 및 이름)을 출력합니다.
document.frmTest.myButton.disabled = true;
// 메소드: 중단
//현재 요청 취소
// 구문: oXMLHttpRequest.abort();
// 참고: 이 메서드를 호출한 후 현재 요청은 UNINITIALIZED 상태를 반환합니다.
//xmlhttp.abort();
// 메소드: setRequestHeader
// 요청의 특정 http 헤더를 별도로 지정
// 구문: oXMLHttpRequest.setRequestHeader(bstrHeader, bstrValue);
// 매개변수: bstrHeader(문자열, 헤더 이름.)
// bstrValue(문자열, 값.)
// 참고: 이 이름을 가진 http 헤더가 이미 존재하는 경우 덮어쓰게 됩니다. 이 메소드는 open 메소드 다음에 호출되어야 합니다.
// xmlhttp.setRequestHeader(bstrHeader, bstrValue);
}
함수 HandleStateChange()
{
//속성: ReadyState
// XMLHTTP 요청의 현재 상태를 반환합니다.
// 구문: lValue = oXMLHttpRequest.readyState;
// 비고: 변수, 이 속성은 읽기 전용이며 상태는 길이 4의 정수로 표시됩니다. 정의는 다음과 같습니다.
// 0 (초기화되지 않음) 객체가 생성되었지만 초기화되지 않았습니다. (open 메서드가 아직 호출되지 않았습니다.)
// 1 (초기화) 객체가 생성되었으며 send 메서드가 아직 호출되지 않았습니다.
// 2 (데이터 보내기) 보내기 메소드를 호출했지만 현재 상태와 http 헤더를 알 수 없습니다.
// 3 (데이터가 전송 중입니다.) 응답 및 http 헤더가 불완전하므로 responseBody 및 responseText를 통해 데이터의 일부를 가져오는 경우 오류가 발생합니다.
// 4 (Complete) 데이터 수신이 완료되면 responseBody와 responseText를 통해 완전한 응답 데이터를 얻을 수 있습니다.
if (xmlhttp.readyState == 4){
document.frmTest.myButton.disabled = false;
// 속성: responseBody
// 서버 응답 데이터를 특정 형식으로 반환합니다.
// 구문: strValue = oXMLHttpRequest.responseBody;
// 비고: 변수, 이 속성은 읽기 전용이며 서버에서 직접 반환된 디코딩되지 않은 바이너리 데이터를 부호 없는 배열 형식으로 나타냅니다.
경고(xmlhttp.responseBody);
//속성: responseStream
//Ado Stream 객체 형태로 응답 정보를 반환합니다.
// 구문: strValue = oXMLHttpRequest.responseStream;
// 비고: 변수, 이 속성은 읽기 전용이며 Ado Stream 개체 형식으로 응답 정보를 반환합니다.
경고(xmlhttp.responseStream);
//속성: responseText
// 응답 정보를 문자열로 반환합니다.
// 구문: strValue = oXMLHttpRequest.responseText;
// 비고: 변수, 이 속성은 읽기 전용이며 응답 정보를 문자열로 반환합니다. XMLHTTP는 응답 정보를 유니코드 문자열로 디코딩하려고 시도합니다.
// XMLHTTP는 기본적으로 응답 데이터의 인코딩을 UTF-8로 설정합니다. 서버에서 반환한 데이터에 BOM(바이트 순서 표시)이 포함되어 있으면 XMLHTTP는
// UCS-2(빅 또는 리틀 엔디안) 또는 UCS-4 데이터를 디코딩합니다. 서버가 xml 문서를 반환하는 경우 이 속성은
// 속성은 xml 문서의 인코딩 선언을 처리하지 않습니다. 이를 처리하려면 responseXML을 사용해야 합니다.
경고(xmlhttp.responseText);
//속성: responseXML
//응답 정보를 Xml Document 객체로 포맷하고 반환합니다.
// 구문: var objDispatch = oXMLHttpRequest.responseXML;
// 비고: 변수, 이 속성은 읽기 전용입니다. 응답 정보를 Xml Document 개체로 형식화하고 반환합니다. 응답 데이터가 유효한 XML 문서가 아닌 경우
// 이 속성 자체는 XMLDOMParseError를 반환하지 않으며, 처리된 DOMDocument 객체를 통해 오류 정보를 얻을 수 있습니다.
Alert("결과 = " + xmlhttp.responseXML.xml);
//속성: 상태
// 현재 요청의 http 상태 코드를 반환합니다.
// 구문: lValue = oXMLHttpRequest.status;
// 반환 값: 긴 표준 http 상태 코드, 다음과 같이 정의됨:
//번호:설명
// 100:계속
// 101: 프로토콜 전환
// 200:확인
// 201:생성됨
// 202:수락됨
// 203: 신뢰할 수 없는 정보
// 204:내용 없음
// 205:컨텐츠 재설정
// 206: 부분 콘텐츠
// 300:다중 선택
// 301:영구적으로 이동됨
// 302:찾음
// 303: 기타 참조
// 304: 수정되지 않음
// 305:프록시 사용
// 307: 임시 리디렉션
// 400: 잘못된 요청
// 401: 인증되지 않음
// 402:결제 필요
// 403:금지됨
// 404: 찾을 수 없음
// 405:허용되지 않는 메서드
// 406: 허용되지 않음
// 407: 프록시 인증 필요
// 408:요청 시간 초과
// 409:충돌
// 410: 사라짐
// 411:길이 필수
// 412: 전제조건 실패
// 413:요청 엔터티가 너무 큼
// 414:요청-URI가 너무 깁니다.
// 415:지원되지 않는 미디어 유형
// 416: 요청한 범위가 적합하지 않습니다.
// 417:예상 실패
// 500: 내부 서버 오류
// 501: 구현되지 않음
// 502: 잘못된 게이트웨이
// 503: 서비스를 사용할 수 없음
// 504:게이트웨이 시간 초과
// 505:HTTP 버전은 지원되지 않습니다.
// 참고: 긴 정수, 이 속성은 읽기 전용이며 현재 요청의 http 상태 코드를 반환합니다. 이 속성은 데이터를 보내고 받은 후에만 얻을 수 있습니다.
경고(xmlhttp.status);
//속성: statusText
// 현재 요청의 응답 행 상태를 반환합니다.
// 구문: strValue = oXMLHttpRequest.statusText;
// 비고: 문자열, 이 속성은 읽기 전용입니다. BSTR에서 현재 요청의 응답 행 상태를 반환합니다. 이 속성은 데이터를 보내고 받은 후에만 얻을 수 있습니다.
경고(xmlhttp.statusText);
}
}
//-->
</script>
</head>
<본문>
<양식 이름="frmTest">
<input name="myButton" type="button" value="나를 클릭하세요" onclick="PostOrder('http://localhost/example.htm');">
</form>
</body>
</html>