Ví dụ XML AJAX
AJAX có thể được sử dụng để giao tiếp tương tác với tệp XML.
Ví dụ XML AJAX
Ví dụ sau đây sẽ minh họa cách một trang web có thể tìm nạp thông tin từ tệp XML bằng AJAX:
Ví dụ giải thích
Khi người dùng nhấp vào nút "Nhận thông tin CD" ở trên, hàm loadDoc()
sẽ được thực thi.
Hàm loadDoc()
tạo một đối tượng XMLHttpRequest
, thêm hàm sẽ được thực thi khi phản hồi của máy chủ sẵn sàng và gửi yêu cầu đến máy chủ.
Khi phản hồi của máy chủ đã sẵn sàng, một bảng HTML được xây dựng, các nút (phần tử) được trích xuất từ tệp XML và cuối cùng nó cập nhật phần tử "demo" bằng bảng HTML chứa đầy dữ liệu XML:
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {myFunction(this);}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
}
function myFunction(xml) {
const xmlDoc = xml.responseXML;
const x = xmlDoc.getElementsByTagName("CD");
let table="<tr><th>Artist</th><th>Title</th></tr>";
for (let 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;
}
Tệp XML
Tệp XML được sử dụng trong ví dụ trên có dạng như sau: " cd_catalog.xml ".