DOM - XMLHttpRequest ऑब्जेक्ट

XMLHttpRequest ऑब्जेक्ट वेब पेज के क्लाइंट-साइड और सर्वर-साइड के बीच एक माध्यम स्थापित करता है जिसका उपयोग कई स्क्रिप्टिंग भाषाओं जैसे जावास्क्रिप्ट, जेस्क्रिप्ट, वीबीएसस्क्रिप्ट और अन्य वेब ब्राउज़र द्वारा XML डेटा को ट्रांसफर और हेरफेर करने के लिए किया जा सकता है।

XMLHttpRequest ऑब्जेक्ट के साथ पूरे पृष्ठ को फिर से लोड किए बिना वेब पेज के हिस्से को अपडेट करना संभव है, पेज लोड होने के बाद सर्वर से डेटा का अनुरोध और प्राप्त करना और डेटा को सर्वर पर भेजना है।

वाक्य - विन्यास

XMLHttpRequest ऑब्जेक्ट को निम्न प्रकार से संस्थापित किया जा सकता है -

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 ऑब्जेक्ट के तरीकों को सूचीबद्ध करती है -

क्र.सं.	विधि और विवरण
1	abort() किए गए वर्तमान अनुरोध को समाप्त करता है।
2	getAllResponseHeaders() कोई प्रतिक्रिया नहीं मिली है, तो एक स्ट्रिंग, या अशक्त के रूप में सभी प्रतिक्रिया हेडर लौटाता है।
3	getResponseHeader() निर्दिष्ट शीर्ष लेख के पाठ से युक्त स्ट्रिंग लौटाता है, या यदि प्रतिक्रिया अभी तक प्राप्त नहीं हुई है, या शीर्ष लेख में मौजूद नहीं है, तो अशक्त।
4	open(method,url,async,uname,pswd) सर्वर को रिक्वेस्ट भेजने के लिए सेंड मेथड के साथ इसका उपयोग किया जाता है। खुली विधि निम्नलिखित मापदंडों को निर्दिष्ट करती है - method - अनुरोध या पद के प्रकार को निर्दिष्ट करता है। url - यह फ़ाइल का स्थान है। async- इंगित करता है कि अनुरोध को कैसे संभाला जाना चाहिए। यह बूलियन मूल्य है। कहाँ पे, 'सही' का अर्थ है कि अनुरोध को Http प्रतिक्रिया की प्रतीक्षा किए बिना एसिंक्रोनस रूप से संसाधित किया जाता है। 'गलत' का अर्थ है कि अनुरोध को Http प्रतिक्रिया प्राप्त करने के बाद सिंक्रोनाइज़ किया जाता है। uname - उपयोगकर्ता नाम है। pswd - पासवर्ड है।
5	send(string) इसका उपयोग ओपन विधि के साथ संयोजन में काम करने वाले अनुरोध को भेजने के लिए किया जाता है।
6	setRequestHeader() शीर्षलेख में लेबल / मान युग्म है जिसमें अनुरोध भेजा गया है।

गुण

निम्न तालिका XMLHttpRequest ऑब्जेक्ट की विशेषताओं को सूचीबद्ध करती है -

क्र.सं.	विशेषता और विवरण
1	onreadystatechange यह एक घटना आधारित संपत्ति है जो हर राज्य परिवर्तन पर सेट की गई है।
2	readyState यह XMLHttpRequest ऑब्जेक्ट की वर्तमान स्थिति का वर्णन करता है। रेडीस्टेट संपत्ति के पांच संभावित राज्य हैं - readyState = 0 - मतलब अनुरोध को शुरू करना अभी बाकी है। readyState = 1 - अनुरोध सेट है। readyState = 2 - अनुरोध भेजा जाता है। readyState = 3 - अनुरोध प्रसंस्करण है। readyState = 4 - अनुरोध पूरा हो गया है।
3	responseText यह गुण तब उपयोग किया जाता है जब सर्वर से प्रतिक्रिया एक पाठ फ़ाइल होती है।
4	responseXML इस संपत्ति का उपयोग तब किया जाता है जब सर्वर से प्रतिक्रिया एक XML फ़ाइल होती है।
5	status संख्या के रूप में Http अनुरोध ऑब्जेक्ट की स्थिति देता है। उदाहरण के लिए, "404" या "200"।
6	statusText एक स्ट्रिंग के रूप में Http अनुरोध ऑब्जेक्ट की स्थिति देता है। उदाहरण के लिए, "नॉट फाउंड" या "ओके"।

उदाहरण

नोड.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>

क्रियान्वयन

इस फ़ाइल को तत्व पथ के रूप में सहेजेंसमूह_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 के रूप में सहेजें (यह फ़ाइल और नोड। 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