Các ứng dụng của XML trong JavaScript

Javascript nâng cao | 07/05/2025 by Học Javascript

Trong thế giới phát triển web hiện đại, việc trao đổi và xử lý dữ liệu giữa client và server đóng vai trò vô cùng quan trọng. Bên cạnh JSON – định dạng phổ biến hiện nay, XML (Extensible Markup Language) vẫn giữ một vị trí nhất định, đặc biệt trong các hệ thống cũ hoặc các ứng dụng đòi hỏi cấu trúc dữ liệu phức tạp. Kết hợp với JavaScript, XML cho phép trình duyệt truy xuất, phân tích và hiển thị dữ liệu động mà không cần tải lại toàn bộ trang, mang đến trải nghiệm mượt mà hơn cho người dùng.

Bài viết này sẽ đi sâu vào các ứng dụng thực tế của XML trong JavaScript, từ việc hiển thị danh sách sản phẩm, đọc RSS feed đến tích hợp với các web service dựa trên SOAP. Đồng thời, chúng ta cũng sẽ thấy rõ vai trò của XML trong các tình huống cần truyền dữ liệu phức tạp, cũng như cách JavaScript có thể tương tác hiệu quả với các tài liệu XML.

Tổng quan về XML trong JavaScript

Cách JavaScript đọc và xử lý file XML

JavaScript có thể tương tác và xử lý tài liệu XML một cách trực tiếp trong trình duyệt thông qua các công cụ tích hợp sẵn. Khi cần truy xuất dữ liệu từ một tài liệu XML, JavaScript thường sử dụng các đối tượng như XMLHttpRequest, Fetch API để gửi yêu cầu đến server, sau đó dùng responseXML hoặc DOMParser để phân tích và trích xuất thông tin từ tài liệu XML đó.

Dùng `XMLHttpRequest` hoặc `Fetch API` để lấy file XML

XMLHttpRequest:

const xhr = new XMLHttpRequest();
xhr.open("GET", "data.xml", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const xmlDoc = xhr.responseXML;
        // xử lý xmlDoc tại đây
    }
};
xhr.send();

Fetch API kết hợp với DOMParser:

fetch("data.xml")
  .then(response => response.text())
  .then(str => {
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(str, "application/xml");
    // xử lý xmlDoc tại đây
  });

Sử dụng `responseXML` hoặc `DOMParser` để xử lý

responseXML: Trả về tài liệu XML đã được phân tích cú pháp (dưới dạng Document object) khi sử dụng XMLHttpRequest.
DOMParser: Được sử dụng phổ biến hơn trong môi trường hiện đại với Fetch API. DOMParser cho phép bạn chuyển đổi chuỗi XML thành đối tượng Document, từ đó có thể sử dụng các phương thức DOM như getElementsByTagName(), querySelector() để truy xuất dữ liệu.

So sánh cơ bản giữa XML và JSON khi dùng với JavaScript

Tiêu chí	XML	JSON
Cú pháp	Dài dòng, nhiều thẻ mở/đóng	Ngắn gọn, dễ đọc
Phân tích	Cần dùng DOMParser hoặc `responseXML`	Dễ dàng với `JSON.parse()`
Khả năng lồng dữ liệu	Cao, hỗ trợ cấu trúc phức tạp	Cao nhưng ít rườm rà hơn
Tính phổ biến hiện nay	Ít phổ biến hơn, dùng nhiều trong hệ thống cũ	Được sử dụng rộng rãi trong các API hiện đại
Tương thích ngược	Tốt trong các hệ thống dùng SOAP, RSS	Phổ biến trong RESTful API

Ứng dụng 1: Hiển thị dữ liệu XML từ server trong JavaScript

Trong nhiều hệ thống cũ hoặc ứng dụng nội bộ, dữ liệu vẫn được lưu trữ dưới dạng XML thay vì JSON. Một ví dụ điển hình là việc hiển thị danh sách sản phẩm, bài viết hoặc tin tức trên trang web bằng cách đọc từ một file XML. Việc sử dụng JavaScript để xử lý file XML giúp người dùng xem được thông tin một cách linh hoạt mà không cần tải lại toàn bộ trang.

Demo luồng xử lý

Mục tiêu: Tải dữ liệu từ một file products.xml chứa danh sách sản phẩm và hiển thị lên giao diện người dùng.

Bước 1: Cấu trúc XML mẫu (`products.xml`)

<products>
    <product>
        <name>Chuột không dây</name>
        <price>200000</price>
    </product>
    <product>
        <name>Bàn phím cơ</name>
        <price>800000</price>
    </product>
</products>

Bước 2: HTML cơ bản để hiển thị

<!DOCTYPE html>
<html>
<head>
    <title>Danh sách sản phẩm</title>
</head>
<body>
    <h2>Danh sách sản phẩm</h2>
    <ul id="productList"></ul>

    <script src="loadXML.js"></script>
</body>
</html>

Bước 3: JavaScript xử lý dữ liệu XML (`loadXML.js`)

const xhr = new XMLHttpRequest();
xhr.open("GET", "products.xml", true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const xmlDoc = xhr.responseXML;
        const products = xmlDoc.getElementsByTagName("product");

        let output = "";
        for (let i = 0; i < products.length; i++) {
            const name = products[i].getElementsByTagName("name")[0].textContent;
            const price = products[i].getElementsByTagName("price")[0].textContent;

            output += `<li>${name} - ${price} VND</li>`;
        }

        document.getElementById("productList").innerHTML = output;
    }
};
xhr.send();

Giải thích một số phương thức DOM quan trọng

getElementsByTagName(tag): Truy xuất tất cả các phần tử có tên thẻ được chỉ định trong một tài liệu XML.
textContent: Lấy ra nội dung văn bản bên trong thẻ XML.
childNodes: Duyệt qua các nút con (bao gồm cả khoảng trắng, xuống dòng), dùng khi cần kiểm soát toàn bộ cấu trúc XML.
responseXML: Trả về đối tượng Document đã phân tích cú pháp từ nội dung XML của phản hồi (chỉ áp dụng cho XMLHttpRequest).

Kết quả đầu ra

Khi người dùng truy cập trang, trình duyệt sẽ tự động gửi yêu cầu đến products.xml, xử lý dữ liệu, và hiển thị danh sách sản phẩm lên trình duyệt như sau:

Danh sách sản phẩm
- Chuột không dây - 200000 VND
- Bàn phím cơ - 800000 VND

Ứng dụng 2: Tích hợp XML với Web Services (SOAP) trong JavaScript

Trong các hệ thống doanh nghiệp hoặc ứng dụng cũ, SOAP Web Service vẫn được sử dụng rộng rãi để trao đổi dữ liệu giữa các hệ thống khác nhau. SOAP sử dụng XML làm định dạng chuẩn để truyền thông tin. Việc tích hợp SOAP với JavaScript không đơn giản như REST API, nhưng vẫn có thể thực hiện thông qua:

Gửi request SOAP dưới dạng XML.
Trích xuất và xử lý kết quả phản hồi cũng là XML.

Cách JavaScript gọi Web Service SOAP

Lưu ý:

Do giới hạn về CORS và bảo mật, JavaScript thuần không thể gọi trực tiếp đến SOAP Web Service từ trình duyệt trừ khi server cho phép CORS. Thông thường, ta sẽ:

Gửi request đến proxy server (PHP, Node.js…) từ JavaScript.
Proxy server sẽ gọi SOAP Web Service.

Proxy trả kết quả XML về cho frontend xử lý.

Cách thực hiện (qua PHP làm trung gian):

Bước 1: Giao diện HTML và JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Gọi SOAP Web Service</title>
</head>
<body>
    <button onclick="callSoap()">Gọi dịch vụ</button>
    <div id="result"></div>

    <script>
        function callSoap() {
            fetch("soap-proxy.php", {
                method: "POST"
            })
            .then(response => response.text())
            .then(str => {
                const parser = new DOMParser();
                const xml = parser.parseFromString(str, "text/xml");

                // Trích xuất dữ liệu từ phản hồi XML
                const resultNode = xml.getElementsByTagName("Result")[0];
                const result = resultNode ? resultNode.textContent : "Không có kết quả";

                document.getElementById("result").innerText = result;
            })
            .catch(err => {
                document.getElementById("result").innerText = "Lỗi gọi dịch vụ";
                console.error(err);
            });
        }
    </script>
</body>
</html>

Bước 2: File proxy PHP gọi SOAP Service (soap-proxy.php)

<?php
// SOAP request gửi đi
$request = <<<XML
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
               xmlns:xsd="https://www.w3.org/2001/XMLSchema"
               xmlns:soap="https://schemas.xmlsoap.org/soap/envelope/">
  <soap:Body>
    <HelloWorld xmlns="https://tempuri.org/" />
  </soap:Body>
</soap:Envelope>
XML;

$headers = [
    "Content-type: text/xml; charset=utf-8",
    "Content-length: " . strlen($request),
    "SOAPAction: \"https://tempuri.org/HelloWorld\""
];

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://example.com/Service.asmx");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, $request);

$response = curl_exec($ch);
curl_close($ch);

echo $response; // trả về XML để JS xử lý
?>

Trích xuất và phân tích phản hồi XML

Trong JavaScript, sau khi nhận được phản hồi dạng XML, ta có thể sử dụng các công cụ như:

DOMParser: để biến chuỗi XML thành Document.
getElementsByTagName, textContent: để đọc dữ liệu.

Ví dụ xử lý đoạn XML phản hồi:

<soap:Envelope>
  <soap:Body>
    <HelloWorldResponse>
      <HelloWorldResult>
        <Result>Xin chào từ dịch vụ SOAP!</Result>
      </HelloWorldResult>
    </HelloWorldResponse>
  </soap:Body>
</soap:Envelope>

Trong JavaScript:

const result = xml.getElementsByTagName("Result")[0].textContent;

Ứng dụng 3: Đọc và xử lý RSS feeds trong JavaScript

Trong các website tin tức, blog cá nhân hoặc ứng dụng đọc báo, RSS (Really Simple Syndication) là một định dạng dữ liệu XML phổ biến để cung cấp thông tin cập nhật liên tục. Sử dụng JavaScript để lấy và hiển thị tiêu đề từ RSS feed giúp:

Tăng khả năng cập nhật tin tức thời gian thực.
Không cần tải lại toàn bộ trang web.
Tích hợp nhiều nguồn tin khác nhau vào một trang.

Cấu trúc cơ bản của RSS

RSS là một file XML có cấu trúc cụ thể, ví dụ:

<rss version="2.0">
  <channel>
    <title>Trang tin tức ABC</title>
    <link>https://abc.com</link>
    <description>Tin tức mới nhất</description>
    
    <item>
      <title>Tin tức 1</title>
      <link>https://abc.com/tin1</link>
      <description>Mô tả tin 1...</description>
    </item>
    
    <item>
      <title>Tin tức 2</title>
      <link>https://abc.com/tin2</link>
      <description>Mô tả tin 2...</description>
    </item>
  </channel>
</rss>

Xử lý RSS bằng JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Đọc RSS</title>
</head>
<body>
  <h2>Tin mới</h2>
  <ul id="rss-feed"></ul>

  <script>
    fetch("rss.xml") // hoặc URL RSS thực tế
      .then(response => response.text())
      .then(str => {
        const parser = new DOMParser();
        const xml = parser.parseFromString(str, "text/xml");

        const items = xml.getElementsByTagName("item");
        let html = "";

        for (let i = 0; i < items.length; i++) {
          const title = items[i].getElementsByTagName("title")[0].textContent;
          const link = items[i].getElementsByTagName("link")[0].textContent;

          html += `<li><a href="${link}" target="_blank">${title}</a></li>`;
        }

        document.getElementById("rss-feed").innerHTML = html;
      })
      .catch(error => {
        console.error("Lỗi đọc RSS:", error);
      });
  </script>
</body>
</html>

Lưu ý khi sử dụng RSS

Nếu RSS feed đến từ domain khác, cần server proxy hoặc CORS hỗ trợ.
Một số RSS dùng định dạng Atom (tương tự XML, nhưng khác cấu trúc), cần tùy chỉnh code.

Ứng dụng 4: Cấu hình và lưu trữ dữ liệu trong XML trong JavaScript

Một số ứng dụng nhỏ hoặc ứng dụng không cần cơ sở dữ liệu phức tạp thường lưu trữ cấu hình (config) dưới dạng file XML, ví dụ:

Giao diện: màu sắc, font chữ, chế độ sáng/tối.
Ngôn ngữ hiển thị.
Các thông số API hoặc server.

Ví dụ file cấu hình XML

<config>
  <theme>dark</theme>
  <language>vi</language>
  <fontSize>16</fontSize>
</config>

Đọc cấu hình bằng JavaScriptư

<!DOCTYPE html>
<html>
<head>
  <title>Đọc cấu hình XML</title>
</head>
<body>
  <div id="output"></div>

  <script>
    fetch("config.xml")
      .then(response => response.text())
      .then(str => {
        const parser = new DOMParser();
        const xml = parser.parseFromString(str, "text/xml");

        const theme = xml.getElementsByTagName("theme")[0].textContent;
        const language = xml.getElementsByTagName("language")[0].textContent;
        const fontSize = xml.getElementsByTagName("fontSize")[0].textContent;

        document.body.style.background = theme === "dark" ? "#333" : "#fff";
        document.body.style.color = theme === "dark" ? "#fff" : "#000";
        document.body.style.fontSize = fontSize + "px";

        document.getElementById("output").innerText = `Ngôn ngữ: ${language}, Chủ đề: ${theme}`;
      })
      .catch(err => console.error("Không đọc được config:", err));
  </script>
</body>
</html>

Lưu ý về bảo mật và quyền truy cập file

Trình duyệt không cho phép truy cập file cục bộ (local XML) nếu không chạy từ server (localhost hoặc hosting).
Không nên lưu thông tin nhạy cảm như mật khẩu hoặc API key trong file XML phía client.
Nên xử lý và xác thực các cài đặt cấu hình nhạy cảm ở phía server.

Ứng dụng 5: Truyền dữ liệu giữa iframe hoặc các widget trong JavaScript

Trong các trang web hiện đại, việc nhúng các iframe hoặc widget là phổ biến, đặc biệt trong các hệ thống:

Quảng cáo hiển thị động.
Hệ thống tích hợp như chatbot, biểu mẫu, thống kê.
Các dashboard quản trị nhúng module khác.

Các thành phần này thường truyền dữ liệu qua lại, và XML là một trong những định dạng được sử dụng để đảm bảo tính chuẩn hóa, có cấu trúc rõ ràng và dễ mở rộng.

Cách truyền và xử lý dữ liệu XML trong iframe

Một iframe có thể nhận dữ liệu từ parent (trang cha) bằng postMessage. Nội dung được truyền có thể là chuỗi XML, sau đó JavaScript trong iframe sẽ phân tích (parse) và sử dụng.

Trang cha:

const xmlData = `
  <user>
    <name>Nguyễn Văn A</name>
    <email>[email protected]</email>
  </user>
`;

const iframe = document.getElementById("myFrame");
iframe.contentWindow.postMessage(xmlData, "*");

Trang trong iframe:

window.addEventListener("message", function(event) {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(event.data, "text/xml");

  const name = xmlDoc.getElementsByTagName("name")[0].textContent;
  const email = xmlDoc.getElementsByTagName("email")[0].textContent;

  document.getElementById("result").innerText = `Xin chào ${name} - ${email}`;
});

Ưu điểm khi dùng XML trong iframe/widget

Dễ mở rộng cấu trúc dữ liệu.
Tương thích tốt với hệ thống cũ và nền tảng không hỗ trợ JSON.
Có thể chứa metadata trong thuộc tính XML hoặc phân cấp sâu.

So sánh và vai trò hiện tại của XML trong JavaScript

So sánh XML và JSON

Tiêu chí	XML	JSON
Cấu trúc	Dạng thẻ, phân cấp phức tạp	Dạng key-value, đơn giản hơn
Kích thước	Thường lớn hơn do nhiều thẻ đóng/mở	Nhỏ gọn hơn, ít ký tự dư thừa
Đọc và ghi	Dùng DOMParser hoặc XML DOM	Dễ dàng với `JSON.parse()`
Metadata/Schema	Hỗ trợ tốt qua XML Schema	Yếu hơn về mặt ràng buộc dữ liệu
Phổ biến hiện tại	Hạn chế trong API mới	Rất phổ biến trong REST/GraphQL

Vai trò hiện tại của XML

Dù JSON đang là chuẩn mặc định trong nhiều ứng dụng hiện đại, XML vẫn có những vai trò không thể thay thế trong một số trường hợp:

Hệ thống cũ (legacy) sử dụng SOAP hoặc Web Services XML-based.
Cấu hình hệ thống lớn/phức tạp cần mô tả rõ bằng cấu trúc thẻ.
Dữ liệu cần định dạng nghiêm ngặt, có kiểm tra schema (như dữ liệu tài chính, y tế).
Hệ thống in ấn, bản vẽ kỹ thuật vẫn ưa chuộng XML do khả năng diễn tả chi tiết.

Kết bài

XML, dù không còn là lựa chọn phổ biến nhất trong các ứng dụng web hiện đại, vẫn giữ một vai trò quan trọng trong nhiều tình huống xử lý dữ liệu phức tạp và có cấu trúc rõ ràng. Việc kết hợp XML với JavaScript giúp các nhà phát triển dễ dàng thao tác với dữ liệu từ phía client, đặc biệt trong các trường hợp như tích hợp web service, xử lý RSS feeds, cấu hình hệ thống, hay giao tiếp giữa các thành phần web như iframe và widget.

Qua các ứng dụng đã trình bày, có thể thấy XML vẫn là một công cụ hữu ích khi cần mô tả dữ liệu có tính phân cấp sâu và cần mở rộng linh hoạt. Việc nắm vững cách đọc, phân tích và hiển thị XML trong JavaScript sẽ giúp lập trình viên làm chủ được nhiều mô hình hệ thống, đặc biệt là khi làm việc với các nền tảng lớn, hoặc cần xử lý dữ liệu theo chuẩn cũ trong các hệ thống kế thừa.