← Back to JavaScript Course | Chapter 9: Async & Web APIs | Lesson 15 of 26

JS का AJAX XML

जहाँ modern AJAX भारी मात्रा में JSON इस्तेमाल करता है, वहीं कुछ servers और legacy APIs अभी भी असली XML return करते हैं -- और browsers उस XML response को एक navigable document में parse करने के लिए built-in tools देते हैं (XMLHttpRequest पर responseXML, या fetch-based requests के लिए DOMParser), वही DOM structure जो एक HTML page खुद इस्तेमाल करता है।

In this page:

  1. XMLHttpRequest से responseXML पढ़ना
  2. fetch और DOMParser से XML Parse करना
  3. एक Parsed XML Document में Navigate करना
  4. XML और JSON Responses की तुलना
  5. एक Practical XML AJAX Example
Syntax
javascript 
const xmlDoc = xhr.responseXML;
const nodes = xmlDoc.getElementsByTagName("tag");
nodes[0].childNodes[0].nodeValue;

XMLHttpRequest से responseXML पढ़ना

XMLHttpRequest एक XML response body को अपने आप एक Document object में parse कर देता है, जो xhr.responseXML के रूप में उपलब्ध होता है, बशर्ते server ने एक XML-appropriate Content-Type header भेजा हो -- fetch के उलट, कोई manual parsing step नहीं चाहिए।

Note: अगर body साफ तौर पर XML text होने के बावजूद responseXML अनपेक्षित रूप से null आता है, तो पुष्टि करें कि server असल में एक XML content type भेज रहा है।
Warning: अगर server का Content-Type header XML नहीं दिखाता, तो responseXML null ही रहता है, भले ही raw response text valid, well-formed XML हो।

उदाहरण: Reading responseXML from XMLHttpRequest

javascript 
const xhr = new XMLHttpRequest();
xhr.onload = () => console.log(xhr.responseXML); // parsed automatically
xhr.open("GET", "data.xml");
xhr.send();

fetch और DOMParser से XML Parse करना

fetch के पास responseXML जैसा कुछ नहीं है -- एक XML response को response.text() से plain text के रूप में पढ़ना होगा, फिर new DOMParser().parseFromString(text, 'text/xml') इस्तेमाल करके manually एक Document में parse करना होगा।

Note: parseFromString को हमेशा MIME type argument के रूप में 'text/xml' (या 'application/xml') बताएं, ताकि DOMParser जाने कि इसे HTML के बजाय XML के रूप में parse करना है।
Warning: DOMParser malformed XML पर कोई catchable exception throw करने के बजाय resulting document में एक खास <parsererror> element डाल देता है -- इसे explicitly जांचें।

उदाहरण: Parsing XML with fetch and DOMParser

javascript 
// Define the method `fetch` taking `"data.xml"`
// Define the method `fetch` taking `"data.xml"`
fetch("data.xml")
  // On success, run this with the resolved value as `response`
  // On success, run this with the resolved value as `response`
  .then(response => response.text())
  // On success, run this with the resolved value as `text`
  // On success, run this with the resolved value as `text`
  .then(text => new DOMParser().parseFromString(text, "text/xml"))
  // On success, run this with the resolved value as `doc`
  // On success, run this with the resolved value as `doc`
  .then(doc => console.log(doc));

एक Parsed XML Document में Navigate करना

एक बार parse हो जाने पर (responseXML या DOMParser के ज़रिए), एक XML response किसी भी दूसरे DOM document की तरह व्यवहार करता है -- querySelector(), querySelectorAll(), और getElementsByTagName() सभी बिल्कुल वैसे ही काम करते हैं जैसे किसी HTML page पर करते हैं।

Note: किसी parsed XML document के साथ काम करते समय HTML pages से पहले से जाने-पहचाने वही DOM traversal methods इस्तेमाल करें -- सीखने के लिए कोई अलग XML-specific API नहीं।
Warning: HTML के उलट, XML tag names case-sensitive होते हैं, इसलिए querySelector("Title") और querySelector("title") किसी XML document में बिल्कुल अलग-अलग elements से मैच कर सकते हैं।

उदाहरण: Navigating a Parsed XML Document

javascript 
// Declare the constant `xmlText`, set to "<root><item>Test</item></root>"
// Declare the constant `xmlText`, set to "<root><item>Test</item></root>"
const xmlText = "<root><item>Test</item></root>";
// Declare the constant `doc` as a new `DOMParser` instance
// Declare the constant `doc` as a new `DOMParser` instance
const doc = new DOMParser().parseFromString(xmlText, "text/xml");
// Print `doc.querySelector("item").textContent` to the console
// Print `doc.querySelector("item").textContent` to the console
console.log(doc.querySelector("item").textContent);

XML और JSON Responses की तुलना

किसी मौजूदा XML-based endpoint के response को JSON में बदलना नए features के लिए अक्सर करने लायक होता है, क्योंकि JSON अपने आप plain JavaScript objects/arrays में parse हो जाता है, XML को चाहिए मैनुअल DOM-style navigation की कोई ज़रूरत नहीं -- पर मौजूदा XML endpoints को पढ़ना अभी भी एक असली, कभी-कभी ज़रूरी काम है।

Note: किसी बिल्कुल नए endpoint के लिए जिसे आप control करते हैं, JSON को prefer करें; XML-handling code को खासतौर पर उन endpoints के लिए रखें जहाँ XML पहले से established format है।
Warning: किसी मौजूदा, काम कर रहे XML-based system को JSON में बदलना पहली नज़र में लगने से बड़ा काम है, खासतौर पर अगर उस XML endpoint के दूसरे consumers को एक साथ नहीं बदला जा सकता।

उदाहरण: Comparing XML and JSON Responses

javascript 
// Declare the constant `doc` as a new `DOMParser` instance
// Declare the constant `doc` as a new `DOMParser` instance
const doc = new DOMParser().parseFromString("<root><item>1</item></root>", "text/xml");
// Print `doc.getElementsByTagName("item")[0].textContent` to the console
// Print `doc.getElementsByTagName("item")[0].textContent` to the console
console.log(doc.getElementsByTagName("item")[0].textContent);
// Print `JSON.parse('{"item": 1}').item` to the console
// Print `JSON.parse('{"item": 1}').item` to the console
console.log(JSON.parse('{"item": 1}').item);

एक Practical XML AJAX Example

टुकड़ों को मिलाकर: एक RSS-style XML feed को fetch करना, DOMParser से इसे parse करना, और headlines की एक साधारण list बनाने के लिए इसके दोहराए गए <item> elements पर loop करना -- एक असली, पूरा उदाहरण है कि किसी XML-based AJAX endpoint को शुरू से आखिर तक कैसे consume करें।

Note: XML-parsing code को धीरे-धीरे बनाएं और test करें: पहले confirm करें कि fetch और parse सफल हैं, फिर बाद में loop और rendering logic जोड़ें।
Warning: किसी बाहरी source से आया RSS या XML feed आपके control से बाहर है और कभी-कभी structure बदल सकता है -- defensive checks (किसी expected element के पढ़ने से पहले उसके मौजूद होने की पुष्टि करना) एक अनपेक्षित format बदलाव से टूटे हुए page से बचने में मदद करते हैं।

उदाहरण: A Practical XML AJAX Example

javascript 
// Define the method `fetch` taking `"feed.xml"`
// Define the method `fetch` taking `"feed.xml"`
fetch("feed.xml")
  // On success, run this with the resolved value as `r`
  // On success, run this with the resolved value as `r`
  .then(r => r.text())
  // On success, run this with the resolved value as `text`
  // On success, run this with the resolved value as `text`
  .then(text => {
    // Declare the constant `doc` as a new `DOMParser` instance
    // Declare the constant `doc` as a new `DOMParser` instance
    const doc = new DOMParser().parseFromString(text, "text/xml");
    // Call `doc.querySelectorAll("item").forEach(item => console.log(item.textContent))`
    // Call `doc.querySelectorAll("item").forEach(item => console.log(item.textContent))`
    doc.querySelectorAll("item").forEach(item => console.log(item.textContent));
  });
Live Example
Related Topics

JS JSON बनाम XML · JS AJAX रिस्पॉन्स · JS का AJAX PHP · JS AJAX रिक्वेस्ट

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी XML response पर response.json() इस्तेमाल करने की कोशिश करना, जो fail होता है क्योंकि body valid JSON नहीं है -- XML responses को text की तरह पढ़ना और अलग से parse करना ज़रूरी है।
  2. यह भूल जाना कि responseXML (XMLHttpRequest पर) सिर्फ तब automatically populate होता है जब server XML के लिए सही Content-Type header भेजता है।
  3. resulting document में किसी parser error को check न करना, जिसे DOMParser एक catchable exception throw करने के बजाय एक special element की तरह insert करता है।
चैप्टर सारांश
  • अगर server का Content-Type header XML बताता है तो XMLHttpRequest एक XML response को automatically responseXML में parse कर देता है।
  • fetch के लिए, एक XML response को response.text() से पढ़ना और फिर built-in DOMParser से manually parse करना ज़रूरी है।
  • parse होने के बाद, एक XML response को किसी HTML document पर इस्तेमाल होने वाले same DOM methods (querySelector, getElementsByTagName) से navigate किया जा सकता है।
ब्राउज़र सपोर्ट

XMLHttpRequest.responseXML और DOMParser API दोनों हर modern browser में supported हैं।

🔒

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS AJAX Response Next Lesson → JS AJAX PHP

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.