DOM-XMLHttpRequest 객체
XMLHttpRequest 객체는 JavaScript, JScript, VBScript 및 기타 웹 브라우저와 같은 많은 스크립팅 언어에서 XML 데이터를 전송하고 조작하는 데 사용할 수있는 웹 페이지의 클라이언트 측과 서버 측 사이에 매체를 설정합니다.
XMLHttpRequest 객체를 사용하면 전체 페이지를 다시로드하지 않고 웹 페이지의 일부를 업데이트하고 페이지가로드 된 후 서버에서 데이터를 요청 및 수신하고 데이터를 서버로 보낼 수 있습니다.
통사론
XMLHttpRequest 객체는 다음과 같이 instatiated 수 있습니다-
xmlhttp = new XMLHttpRequest();IE5 및 IE6을 포함한 모든 브라우저를 처리하려면 브라우저가 다음과 같이 XMLHttpRequest 객체를 지원하는지 확인하십시오.
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}XMLHttpRequest 객체를 사용하여 XML 파일을로드하는 예제는 여기에서 참조 할 수 있습니다 .
행동 양식
다음 표는 XMLHttpRequest 객체의 방법을 나열합니다-
| S. 아니. | 방법 및 설명 |
|---|---|
| 1 | abort() 현재 요청을 종료합니다. |
| 2 | getAllResponseHeaders() 모든 응답 헤더를 문자열로 반환하거나, 응답이 수신되지 않은 경우 null을 반환합니다. |
| 삼 | getResponseHeader() 지정된 헤더의 텍스트를 포함하는 문자열을 반환하거나 응답이 아직 수신되지 않았거나 헤더가 응답에없는 경우 null을 반환합니다. |
| 4 | open(method,url,async,uname,pswd) 요청을 서버로 보내기 위해 Send 메서드와 함께 사용됩니다. open 메소드는 다음 매개 변수를 지정합니다.
|
| 5 | send(string) Open 메서드와 결합하여 작동하는 요청을 보내는 데 사용됩니다. |
| 6 | setRequestHeader() 헤더에는 요청이 전송되는 레이블 / 값 쌍이 포함됩니다. |
속성
다음 표는 XMLHttpRequest 객체의 속성을 나열합니다-
| S. 아니. | 속성 및 설명 |
|---|---|
| 1 | onreadystatechange 상태가 변경 될 때마다 설정되는 이벤트 기반 속성입니다. |
| 2 | readyState 이것은 XMLHttpRequest 객체의 현재 상태를 설명합니다. readyState 속성에는 다섯 가지 상태가 있습니다.
|
| 삼 | responseText 이 속성은 서버의 응답이 텍스트 파일 인 경우 사용됩니다. |
| 4 | responseXML 이 속성은 서버의 응답이 XML 파일 인 경우 사용됩니다. |
| 5 | status Http 요청 개체의 상태를 숫자로 제공합니다. 예 : "404"또는 "200". |
| 6 | statusText Http 요청 개체의 상태를 문자열로 제공합니다. 예 : "찾을 수 없음"또는 "확인". |
예
node.xml 내용은 다음과 같습니다-
<?xml version = "1.0"?>
<Company>
<Employee category = "Technical">
<FirstName>Tanmay</FirstName>
<LastName>Patil</LastName>
<ContactNo>1234567890</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Non-Technical">
<FirstName>Taniya</FirstName>
<LastName>Mishra</LastName>
<ContactNo>1234667898</ContactNo>
<Email>[email protected]</Email>
</Employee>
<Employee category = "Management">
<FirstName>Tanisha</FirstName>
<LastName>Sharma</LastName>
<ContactNo>1234562350</ContactNo>
<Email>[email protected]</Email>
</Employee>
</Company>리소스 파일의 특정 정보 검색
다음 예제는 getResponseHeader () 메소드 와 readState 속성을 사용하여 리소스 파일의 특정 정보를 검색하는 방법을 보여줍니다 .
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getResponseHeader("Content-length");
}
}
}
</script>
</head>
<body>
<button type = "button" onclick="makerequest('/dom/node.xml', 'ID')">Click me to get the specific ResponseHeader</button>
<div id = "ID">Specific header information is returned.</div>
</body>
</html>실행
이 파일을 서버 경로에 elementattribute_removeAttributeNS.htm 으로 저장 합니다 (이 파일과 node_ns.xml은 서버의 동일한 경로에 있어야 함). 아래와 같이 출력을 얻습니다.
Before removing the attributeNS: en
After removing the attributeNS: null리소스 파일의 헤더 정보 검색
다음 예제는 메소드를 사용하여 리소스 파일의 헤더 정보를 검색하는 방법을 보여줍니다. getAllResponseHeaders() 속성 사용 readyState.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<script>
function loadXMLDoc() {
var xmlHttp = null;
if(window.XMLHttpRequest) // for Firefox, IE7+, Opera, Safari, ... {
xmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) // for Internet Explorer 5 or 6 {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlHttp;
}
function makerequest(serverPage, myDiv) {
var request = loadXMLDoc();
request.open("GET", serverPage);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
document.getElementById(myDiv).innerHTML = request.getAllResponseHeaders();
}
}
}
</script>
</head>
<body>
<button type = "button" onclick = "makerequest('/dom/node.xml', 'ID')">
Click me to load the AllResponseHeaders</button>
<div id = "ID"></div>
</body>
</html>실행
이 파일을 서버 경로에 http_allheader.html 로 저장 합니다 (이 파일과 node.xml은 서버의 동일한 경로에 있어야 함). 아래와 같이 출력을 얻습니다 (브라우저에 따라 다름)-
Date: Sat, 27 Sep 2014 07:48:07 GMT Server: Apache Last-Modified:
Wed, 03 Sep 2014 06:35:30 GMT Etag: "464bf9-2af-50223713b8a60" Accept-Ranges: bytes Vary: Accept-Encoding,User-Agent
Content-Encoding: gzip Content-Length: 256 Content-Type: text/xml