Tìm hiểu ví dụ về AJAX XML

AJAX có thể được sử dụng cho giao tiếp tương tác với một tệp XML.

Ví dụ về AJAX XML

Ví dụ sau sẽ minh hoạ cách một trang web có thể lấy thông tin từ một tệp tin XML với AJAX:

Giải thích ví dụ

Khi người dùng nhấp vào nút “Get CD Info” ở trên, hàm loadDoc() được thực thi. Hàm loadDoc() tạo ra một đối tượng XMLHttpRequest, thêm hàm sẽ được thực hiện khi đáp ứng của máy chủ đã sẵn sàng và gửi yêu cầu tới máy chủ.

Khi đáp ứng của máy chủ đã sẵn sàng, một bảng HTML được xây dựng, các node (phần tử) được trích ra từ tệp tin XML và cuối cùng là cập nhật phần tử “demo” bằng bảng HTML đầy dữ liệu XML:

LoadXMLDoc()

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>Artist</th><th>Title</th></tr>";
  var x = xmlDoc.getElementsByTagName("CD");
  for (i = 0; i <x.length; i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "</td></tr>";
  }
  document.getElementById("demo").innerHTML = table;
}

XML File

Tệp XML được sử dụng trong ví dụ trên có dạng như sau: “cd_catalog.xml”.