Ví dụ về AJAX XML
AJAX có thể được sử dụng để giao tiếp tương tác với tệp XML.
Ví dụ về AJAX XML
Ví dụ sau sẽ chứng minh cách một trang web có thể tìm nạp thông tin từ tệp XML với AJAX:
Thí dụ
Giải thích ví dụ
Khi người dùng nhấp vào nút "Nhận thông tin CD" ở trên, loadDoc()
chức năng sẽ được thực thi.
Hàm loadDoc()tạo một XMLHttpRequestđối tượng, thêm chức năng 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 tạo, 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" với 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 trông giống như sau: " cd_catalog.xml ".