---
title: "XML and JavaScript for client-side web apps"
subject: "Internet and Intranet"
chapter: 6
key: "semester_8/internet_and_intranet:xml-javascript-client-side"
source: https://www.bctengineer.com/q/semester_8/internet_and_intranet/xml-javascript-client-side
site: BCT Engineering
---

# XML and JavaScript for client-side web apps

Internet and Intranet · Chapter 6: Internet and Intranet Systems Development

- Asked in: 2072 Asoj, 2+8 marks
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_8/internet_and_intranet/xml-javascript-client-side
- Whole chapter: https://www.bctengineer.com/md/semester_8/internet_and_intranet/chapter-6

## Question

How are XML and JAVA SCRIPTS used together to develop client-side web applications?

## Short answer

JavaScript fetches XML data asynchronously with XMLHttpRequest, parses it into an XML DOM, then reads nodes and updates the HTML DOM to display content without a page reload. XML carries structured data while JavaScript manipulates it client-side; JSON is a common alternative.

## Answer

**XML (eXtensible Markup Language)** stores and carries data in a structured, self-describing way. **JavaScript** runs in the browser and can read and change a web page. Together they allow a page to get data, process it and show it on the client without a page reload.

#### How they are used together

1. **Data in XML.** The server holds or sends data as XML.
2. **Fetch the XML.** JavaScript requests it using `XMLHttpRequest` (AJAX) or loads a file.
3. **Parse.** The browser builds an XML DOM tree from the response (`responseXML` or `DOMParser`).
4. **Process.** JavaScript walks the tree with `getElementsByTagName`, reads values and does calculations or filtering.
5. **Display.** JavaScript writes the result into the HTML DOM (`innerHTML`, creating table rows) or applies an XSLT style sheet.

#### Example

Data file `books.xml`:

```xml
<library>
  <book><title>Networks</title><price>450</price></book>
  <book><title>Internet</title><price>380</price></book>
</library>
```

HTML and JavaScript:

```html
<div id="out"></div>
<script>
var x = new XMLHttpRequest();
x.onreadystatechange = function () {
  if (x.readyState == 4 && x.status == 200) {
    var books = x.responseXML.getElementsByTagName("book");
    var s = "";
    for (var i = 0; i < books.length; i++) {
      s += books[i].getElementsByTagName("title")[0].textContent +
           " - Rs " +
           books[i].getElementsByTagName("price")[0].textContent + "<br>";
    }
    document.getElementById("out").innerHTML = s;
  }
};
x.open("GET", "books.xml", true);
x.send();
</script>
```

```text
 XML file/server --HTTP--> [JavaScript XHR] --> XML DOM
                                  |
                       read nodes, process
                                  |
                          update HTML DOM
```

#### Uses and advantages

- Product lists, news feeds (RSS), form validation lists and menus loaded without reloading.
- Sorting and filtering done on the client, reducing server load.
- XML is platform independent and readable, so the same data can feed many applications.
- XSLT can transform XML to HTML in the browser.
- Today JSON is often used instead of XML, but the method is the same.

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. What is the role of XML in a client-side web application?
   A. It runs calculations in the browser
   B. It stores and carries data in a structured, self-describing form
   C. It draws the page layout
   D. It replaces HTTP
   Answer: B. XML carries data; JavaScript fetches, processes and displays it. (Key point: Roles of XML and JavaScript)

2. Which is the correct order of steps?
   A. Display, parse, fetch, process
   B. Fetch with XMLHttpRequest, parse into an XML DOM, process nodes, then display in the HTML DOM
   C. Process, fetch, display, parse
   D. Parse, display, fetch, process
   Answer: B. The XML must be fetched and parsed into a DOM tree before nodes can be read and shown. (Key point: Step order)

3. In the example, how does JavaScript read the XML response?
   A. Using x.responseXML.getElementsByTagName("book")
   B. Using document.write on the file name
   C. Using only innerHTML on the XML file
   D. Using alert()
   Answer: A. responseXML gives the XML DOM, and getElementsByTagName walks the book nodes. (Key point: Reading XML in JavaScript)

4. Why does the example check readyState == 4 and status == 200?
   A. To ensure the request is complete and successful before using the data
   B. To start the request
   C. To close the browser
   D. To sort the books
   Answer: A. State 4 means done and status 200 means success, so the response is safe to process. (Key point: Condition for using response)

## Related in Internet and Intranet

- [AJAX features; CGI, Perl, JavaScript helpers](https://www.bctengineer.com/question.md?key=semester_8%2Finternet_and_intranet%3Aajax-features-cgi-perl-js) — Internet and Intranet, chapter 6
- [Web-mail to POP3 message transfer protocols](https://www.bctengineer.com/question.md?key=semester_8%2Finternet_and_intranet%3Aalice-bob-email-protocols) — Internet and Intranet, chapter 3

## Related in other subjects

- [Server-side programming and Java Servlet](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Aserver-side-programming-servlet) — Web Technology, chapter 3
- [How the Internet and Web work together](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Ainternet-and-web-together) — Web Technology, chapter 1
- [Client-side versus server-side scripting](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Aclient-vs-server-side-scripting) — Web Technology, chapter 3, asked 3×
- [XML and its significance in the Web](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Axml-significance-web) — Web Technology, chapter 7