Ví dụ sử dụng AJAX với dữ liệu XML trong JavaScript

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

Trong quá trình phát triển web, việc trao đổi dữ liệu giữa trình duyệt và server là một nhu cầu thiết yếu. AJAX (Asynchronous JavaScript and XML) ra đời như một giải pháp giúp thực hiện điều này một cách linh hoạt và không cần tải lại toàn bộ trang. Mặc dù hiện nay JSON là định dạng dữ liệu phổ biến hơn, XML vẫn đóng vai trò quan trọng trong nhiều hệ thống cũ, dịch vụ web hoặc các ứng dụng sử dụng chuẩn dữ liệu phức tạp. Việc hiểu cách sử dụng AJAX để lấy và xử lý dữ liệu XML sẽ giúp lập trình viên tương thích tốt hơn với các hệ thống đang vận hành và có khả năng xử lý đa dạng định dạng dữ liệu.

Trong bài viết này, mình sẽ cùng tìm hiểu cách gửi yêu cầu AJAX và xử lý phản hồi XML bằng JavaScript thông qua các ví dụ minh họa cụ thể.

Giới thiệu về dữ liệu XML trong JavaScript

XML là gì?

XML (Extensible Markup Language) là một ngôn ngữ đánh dấu mở rộng được thiết kế để lưu trữ và vận chuyển dữ liệu. Không giống như HTML – ngôn ngữ dùng để hiển thị nội dung, XML chủ yếu tập trung vào mô tả dữ liệu một cách có cấu trúc và rõ ràng. Mỗi phần dữ liệu được đặt trong các thẻ mở và đóng, cho phép tổ chức thông tin theo dạng cây dễ hiểu và dễ phân tích.

Cấu trúc dữ liệu XML

Dữ liệu XML sử dụng cú pháp thẻ giống như HTML, nhưng không có các thẻ định dạng. Các phần tử có thể được lồng vào nhau, tạo thành cấu trúc phân cấp. Ví dụ:

<products>
  <product>
    <id>101</id>
    <name>Bút bi</name>
    <price>5000</price>
  </product>
  <product>
    <id>102</id>
    <name>Vở kẻ ngang</name>
    <price>10000</price>
  </product>
</products>

Trong ví dụ trên, <products> là phần tử cha chứa nhiều phần tử <product>, mỗi sản phẩm lại có các thuộc tính con như <id>, <name>, và <price>.

So sánh sơ bộ XML với JSON

Tiêu chí	XML	JSON
Cú pháp	Dài dòng, sử dụng thẻ mở/đóng	Ngắn gọn, dễ đọc
Phân tích	Yêu cầu thao tác DOM hoặc XPath	Dễ dàng chuyển sang đối tượng JS
Trình bày dữ liệu	Có thể kết hợp với các thuộc tính	Chỉ bao gồm cặp key-value
Ứng dụng hiện tại	Giảm dần, vẫn dùng trong các hệ thống cũ	Được sử dụng rộng rãi trong API hiện đại

Ứng dụng thực tế của XML trong JavaScript

XML từng là định dạng phổ biến cho việc truyền dữ liệu trong web và hệ thống doanh nghiệp. Dù hiện nay JSON đã thay thế phần lớn vai trò của XML, nhưng XML vẫn được sử dụng trong:

Web Services dạng SOAP – nơi XML là định dạng mặc định để trao đổi thông tin.
RSS / Atom Feeds – cung cấp nội dung cập nhật từ trang web.
Các hệ thống quản lý doanh nghiệp cũ – đặc biệt trong ngân hàng, viễn thông, logistics…
Lưu trữ cấu hình và cấu trúc dữ liệu phức tạp – nhờ khả năng mô tả dữ liệu lồng nhau tốt.

Việc nắm rõ cách sử dụng và xử lý XML là điều cần thiết khi làm việc với các dự án có tính kế thừa hoặc tích hợp với hệ thống truyền thống.

Trong ví dụ trên, <products> là phần tử cha chứa nhiều phần tử <product>, mỗi sản phẩm lại có các thuộc tính con như <id>, <name>, và <price>.

So sánh sơ bộ XML với JSON

Tiêu chí	XML	JSON
Cú pháp	Dài dòng, sử dụng thẻ mở/đóng	Ngắn gọn, dễ đọc
Phân tích	Yêu cầu thao tác DOM hoặc XPath	Dễ dàng chuyển sang đối tượng JS
Trình bày dữ liệu	Có thể kết hợp với các thuộc tính	Chỉ bao gồm cặp key-value
Ứng dụng hiện tại	Giảm dần, vẫn dùng trong các hệ thống cũ	Được sử dụng rộng rãi trong API hiện đại

Ứng dụng thực tế của XML

Web Services dạng SOAP – nơi XML là định dạng mặc định để trao đổi thông tin.
RSS / Atom Feeds – cung cấp nội dung cập nhật từ trang web.
Các hệ thống quản lý doanh nghiệp cũ – đặc biệt trong ngân hàng, viễn thông, logistics…
Lưu trữ cấu hình và cấu trúc dữ liệu phức tạp – nhờ khả năng mô tả dữ liệu lồng nhau tốt.

Việc nắm rõ cách sử dụng và xử lý XML là điều cần thiết khi làm việc với các dự án có tính kế thừa hoặc tích hợp với hệ thống truyền thống.

const xhr = new XMLHttpRequest();

Bước 2: Cấu hình yêu cầu bằng .open()

Sử dụng phương thức .open() để thiết lập loại yêu cầu (GET/POST), URL và chế độ bất đồng bộ:

xhr.open("GET", "data.xml", true); // Gửi GET request tới file data.xml

Bước 3: Gửi yêu cầu đến server bằng `.send()`

Sau khi cấu hình, gọi .send() để gửi yêu cầu:

xhr.send();

Bước 4: Xử lý phản hồi với `.onreadystatechange` hoặc `.onload`

Có thể sử dụng sự kiện onreadystatechange để theo dõi trạng thái yêu cầu:

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // Xử lý dữ liệu XML tại đây
  }
};

Hoặc dùng sự kiện onload (đơn giản hơn):

xhr.onload = function () {
  if (xhr.status === 200) {
    // Xử lý dữ liệu XML
  }
};

Bước 5: Truy cập dữ liệu XML qua `.responseXML`

Sau khi phản hồi được nhận thành công, bạn có thể truy cập nội dung XML bằng thuộc tính xhr.responseXML, đây là một Document object:

const xmlDoc = xhr.responseXML;

Sử dụng DOM để truy xuất dữ liệu XML

Dữ liệu XML nhận được có thể được xử lý giống như DOM của HTML. Bạn có thể sử dụng các phương thức như getElementsByTagName, getAttribute, hoặc textContent để lấy dữ liệu.

Ví dụ:

Giả sử server trả về XML như sau:

<books>
  <book>
    <title>JavaScript Cơ bản</title>
    <author>Nguyễn Văn A</author>
  </book>
  <book>
    <title>Học AJAX</title>
    <author>Trần Thị B</author>
  </book>
</books>

Đoạn JavaScript để lấy và hiển thị dữ liệu:

xhr.onload = function () {
  if (xhr.status === 200) {
    const xmlDoc = xhr.responseXML;
    const books = xmlDoc.getElementsByTagName("book");

    for (let i = 0; i < books.length; i++) {
      const title = books[i].getElementsByTagName("title")[0].textContent;
      const author = books[i].getElementsByTagName("author")[0].textContent;
      console.log(`Sách: ${title} - Tác giả: ${author}`);
    }
  }
};

Kết quả trên console:

Sách: JavaScript Cơ bản - Tác giả: Nguyễn Văn A  
Sách: Học AJAX - Tác giả: Trần Thị B

Ví dụ minh họa cơ bản của XML trong JavaScript

Giả sử có file `products.xml` như sau:

<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>

Yêu cầu:

Gửi AJAX request để lấy file XML.
Truy xuất danh sách các sản phẩm từ XML.
Hiển thị tên và giá lên giao diện HTML.

Bước 1: Tạo khung HTML

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <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="loadProducts.js"></script>
</body>
</html>

Bước 2: Viết file `loadProducts.js` sử dụng XMLHttpRequest

// Tạo đối tượng XMLHttpRequest
const xhr = new XMLHttpRequest();

// Mở kết nối GET tới file XML
xhr.open("GET", "products.xml", true);

// Xử lý khi nhận được phản hồi
xhr.onload = function () {
  if (xhr.status === 200) {
    // Lấy dữ liệu XML
    const xml = xhr.responseXML;

    // Lấy danh sách các thẻ <product>
    const products = xml.getElementsByTagName("product");

    // Truy cập thẻ <ul> để hiển thị kết quả
    const productList = document.getElementById("productList");

    // Duyệt qua từng sản phẩm và tạo phần tử HTML
    for (let i = 0; i < products.length; i++) {
      const name = products[i].getElementsByTagName("name")[0].textContent;
      const price = products[i].getElementsByTagName("price")[0].textContent;

      // Tạo phần tử <li> cho mỗi sản phẩm
      const li = document.createElement("li");
      li.textContent = `${name} - Giá: ${Number(price).toLocaleString()}đ`;

      // Thêm vào danh sách
      productList.appendChild(li);
    }
  } else {
    alert("Không thể tải dữ liệu sản phẩm!");
  }
};

// Gửi yêu cầu
xhr.send();

Kết quả hiển thị trên giao diện

Danh sách sản phẩm
• Chuột không dây - Giá: 200,000đ  
• Bàn phím cơ - Giá: 800,000đ

Truy xuất và xử lý dữ liệu XML trong JavaScript

Khi nhận dữ liệu XML từ server bằng AJAX (thường thông qua XMLHttpRequest), bạn có thể sử dụng các phương thức DOM để truy xuất và xử lý nội dung bên trong XML. Việc xử lý này tương tự như thao tác trên một tài liệu HTML vì XML cũng là một dạng cây DOM (Document Object Model).

Một số phương thức DOM phổ biến để xử lý XML:

Phương thức / Thuộc tính	Mô tả
`getElementsByTagName()`	Tìm tất cả các phần tử theo tên thẻ XML. Trả về một danh sách (NodeList).
`childNodes`	Lấy danh sách các node con (có thể là phần tử, văn bản, comment,...)
`textContent`	Lấy nội dung văn bản của một node.
`nodeValue`	Giá trị của node (thường dùng với text node).

Ví dụ minh họa xử lý dữ liệu XML

Giả sử bạn đã nhận được dữ liệu XML như sau từ server:

<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>

Cách xử lý dữ liệu bằng JavaScript:

// Giả sử responseXML là đối tượng XML đã nhận được
const xmlDoc = xhr.responseXML;

// Lấy danh sách các thẻ <product>
const productNodes = xmlDoc.getElementsByTagName("product");

for (let i = 0; i < productNodes.length; i++) {
  const product = productNodes[i];

  // Truy xuất thẻ <name> và <price> bên trong <product>
  const nameNode = product.getElementsByTagName("name")[0];
  const priceNode = product.getElementsByTagName("price")[0];

  // Cách 1: Dùng textContent để lấy nội dung
  const name = nameNode.textContent;
  const price = priceNode.textContent;

  // Cách 2 (ít dùng hơn): Dùng nodeValue qua childNodes
  // const name = nameNode.childNodes[0].nodeValue;
  // const price = priceNode.childNodes[0].nodeValue;

  // Hiển thị ra console
  console.log(`Sản phẩm: ${name} - Giá: ${price}đ`);

  // Hoặc thêm vào DOM HTML
  const li = document.createElement("li");
  li.textContent = `${name} - Giá: ${Number(price).toLocaleString()}đ`;
  document.getElementById("productList").appendChild(li);
}

Lưu ý

Nên kiểm tra xem phần tử XML có tồn tại trước khi truy cập textContent để tránh lỗi:

if (nameNode && nameNode.textContent) { ... }

Có thể sử dụng parseInt() hoặc Number() để chuyển giá từ chuỗi sang số.
textContent là cách đơn giản và hiệu quả nhất để lấy dữ liệu trong hầu hết các trường hợp.

Ứng dụng thực tế của XML trong JavaScript

Dù hiện nay định dạng JSON được sử dụng phổ biến hơn trong các ứng dụng web hiện đại, XML vẫn giữ vai trò quan trọng trong nhiều hệ thống và dịch vụ web. Dưới đây là một số ứng dụng thực tế khi sử dụng AJAX để xử lý dữ liệu XML trong JavaScript:

Nạp dữ liệu sản phẩm từ XML trong hệ thống cũ

Nhiều hệ thống quản lý tồn kho, thương mại điện tử hoặc phần mềm nội bộ doanh nghiệp vẫn sử dụng XML để lưu trữ và trao đổi dữ liệu.
AJAX có thể được dùng để gửi yêu cầu và lấy danh sách sản phẩm, sau đó hiển thị lên giao diện người dùng mà không cần tải lại toàn trang.
Đây là cách phổ biến để hiện đại hóa giao diện mà vẫn giữ được phần backend cũ.

Đọc RSS feed từ blog hoặc trang tin tức

Các website tin tức, blog cá nhân hay trang chuyên môn thường cung cấp RSS feeds dưới dạng XML.
Bạn có thể sử dụng AJAX để truy vấn và hiển thị tự động tiêu đề bài viết mới, mô tả ngắn, hoặc đường dẫn bài viết từ các RSS feed như:

https://vnexpress.net/rss/tin-moi-nhat.rss

Ứng dụng này được dùng để tạo widget tin tức hoặc khu vực cập nhật blog tự động.

Phân tích cấu trúc phản hồi từ API kiểu XML

Một số hệ thống Web Service sử dụng chuẩn SOAP hoặc API đời cũ vẫn phản hồi dữ liệu dưới dạng XML.
AJAX giúp bạn gửi các request XML, nhận dữ liệu dạng XML, và phân tích nội dung như trạng thái giao dịch, kết quả xử lý, mã lỗi,...
Đây là tình huống thường gặp khi tích hợp với hệ thống ngân hàng, các cổng thanh toán truyền thống hoặc hệ thống logistics cũ.

Một số lưu ý khi xử lý XML với AJAX của XML trong JavaScript

Khi làm việc với XML trong môi trường AJAX, bạn cần lưu ý các yếu tố kỹ thuật sau để đảm bảo dữ liệu được xử lý đúng và hiệu quả:

responseXML chỉ hoạt động khi server trả về đúng kiểu dữ liệu

Để xhr.responseXML hoạt động, server phải trả về Content-Type hợp lệ như:

Content-Type: application/xml

hoặc

Content-Type: text/xml

Nếu server trả về dạng text/plain, trình duyệt sẽ không phân tích cú pháp XML, và responseXML sẽ trả về null.

Cần kiểm tra dữ liệu trước khi xử lý

Trước khi thao tác trên responseXML, nên kiểm tra xem nó có tồn tại hay không:

if (xhr.responseXML) {
    // xử lý dữ liệu
} else {
    console.error("Dữ liệu XML không hợp lệ hoặc không tồn tại");
}

Điều này giúp tránh lỗi JavaScript khi truy cập DOM XML, đặc biệt nếu server gặp lỗi hoặc dữ liệu bị sai định dạng.

XML không còn phổ biến như JSON nhưng vẫn quan trọng

Trong các hệ thống hiện đại, JSON thường được lựa chọn do nhẹ hơn và dễ sử dụng trong JavaScript.
Tuy nhiên, XML vẫn cần thiết khi:
- Tích hợp hệ thống cũ (legacy).
- Làm việc với chuẩn giao tiếp SOAP, WSDL.
- Đọc tài liệu cấu trúc như RSS/Atom hoặc SAML.
Vì vậy, việc hiểu và xử lý XML bằng AJAX vẫn là một kỹ năng hữu ích đối với lập trình viên web.

Kết bài

Mặc dù ngày nay JSON đã trở thành định dạng dữ liệu phổ biến hơn trong các ứng dụng web hiện đại, nhưng XML vẫn giữ một vai trò quan trọng trong nhiều hệ thống truyền thống và các dịch vụ đặc thù như RSS, SOAP, hoặc các hệ thống doanh nghiệp cũ. Việc sử dụng AJAX kết hợp với XMLHttpRequest để truy vấn và xử lý dữ liệu XML giúp các lập trình viên có thể xây dựng các giao diện động, mượt mà mà vẫn đảm bảo tương thích với backend hiện có.

Nắm vững cách thao tác với XML qua AJAX không chỉ giúp bạn mở rộng phạm vi ứng dụng thực tế mà còn trang bị thêm kỹ năng cần thiết để xử lý dữ liệu linh hoạt trong nhiều môi trường khác nhau. Trong tương lai, dù xu hướng thiên về API dạng JSON và sử dụng Fetch, nhưng hiểu rõ cách hoạt động với XML vẫn là một lợi thế đáng giá với bất kỳ lập trình viên nào.