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 메소드는 다음 매개 변수를 지정합니다.

  • method − 요청 유형 (예 : Get 또는 Post)을 지정합니다.

  • url − 파일의 위치입니다.

  • async− 요청을 처리하는 방법을 나타냅니다. 부울 값입니다. 어디,

    • 'true'는 요청이 Http 응답을 기다리지 않고 비동기 적으로 처리됨을 의미합니다.

    • 'false'는 Http 응답을받은 후 요청이 동 기적으로 처리됨을 의미합니다.

  • uname − 사용자 이름입니다.

  • pswd − 비밀번호입니다.

5

send(string)

Open 메서드와 결합하여 작동하는 요청을 보내는 데 사용됩니다.

6

setRequestHeader()

헤더에는 요청이 전송되는 레이블 / 값 쌍이 포함됩니다.

속성

다음 표는 XMLHttpRequest 객체의 속성을 나열합니다-

S. 아니. 속성 및 설명
1

onreadystatechange

상태가 변경 될 때마다 설정되는 이벤트 기반 속성입니다.

2

readyState

이것은 XMLHttpRequest 객체의 현재 상태를 설명합니다. readyState 속성에는 다섯 가지 상태가 있습니다.

  • readyState = 0 − 요청이 아직 초기화되지 않았 음을 의미합니다.

  • readyState = 1 − 요청이 설정되었습니다.

  • readyState = 2 − 요청이 전송됩니다.

  • readyState = 3 − 요청이 처리 중입니다.

  • readyState = 4 − 요청이 완료되었습니다.

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