07/09/2018, 15:28

Tìm hiểu các ứng dụng XML

Trong nội dung này trình bày một số ứng dụng HTML sử dụng XML, HTTP, DOM và JavaScript. Tài liệu XML được sử dụng Ở đây chúng ta sẽ sử dụng tệp tin XML “cd_catalog.xml”. Hiển thị dữ liệu XML trong bảng HTML Ví dụ này lặp đi lặp lại qua mỗi phần ...

Trong nội dung này trình bày một số ứng dụng HTML sử dụng XML, HTTP, DOM và JavaScript.

Tài liệu XML được sử dụng

Ở đây chúng ta sẽ sử dụng tệp tin XML “cd_catalog.xml”.

Hiển thị dữ liệu XML trong bảng HTML

Ví dụ này lặp đi lặp lại qua mỗi phần tử <CD> và hiển thị các giá trị của phần tử <ARTIST> và <TITLE> trong một bảng HTML:

<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse:collapse;
}
th, td {
  padding: 5px;
}
</style>
</head>
<body>

<table id="demo"></table>

<script>
function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "cd_catalog.xml", true);
  xmlhttp.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;
}
</script>

</body>
</html>

Hiển thị CD đầu tiên trong một phần tử HTML div

Ví dụ này sử dụng một hàm để hiển thị phần tử CD đầu tiên trong một phần tử HTML với id = “showCD”:

displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            myFunction(this, i);
        }
    };
    xmlhttp.open("GET", "cd_catalog.xml", true);
    xmlhttp.send();
}

function myFunction(xml, i) {
    var xmlDoc = xml.responseXML; 
    x = xmlDoc.getElementsByTagName("CD");
    document.getElementById("showCD").innerHTML =
    "Artist: " +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
    "<br>Title: " +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
    "<br>Year: " + 
    x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
Try it Yourself »

Điều hướng giữa các CD

Để điều hướng giữa các CD, trong ví dụ ở trên, thêm hàm next() và previous():

function next() {
  // display the next CD, unless you are on the last CD
  if (i < x.length-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  // display the previous CD, unless you are on the first CD 
  if (i > 0) {
  i--;
  displayCD(i);
  }
}

Hiển thị thông tin Album khi nhấp vào CD

Ví dụ cuối cùng cho thấy cách bạn có thể hiển thị thông tin album khi người dùng nhấp vào CD:

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<p>Click on a CD to display album information.</p>
<p id='showCD'></p>
<table id="demo"></table>

<script>
var x,xmlhttp,xmlDoc
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "cd_catalog.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML; 
x = xmlDoc.getElementsByTagName("CD");
table="<tr><th>Artist</th><th>Title</th></tr>";
for (i = 0; i <x.length; i++) { 
  table += "<tr onclick='displayCD(" + i + ")'><td>";
  table += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
  table += "</td><td>";
  table +=  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
  table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;

function displayCD(i) {
  document.getElementById("showCD").innerHTML =
  "Artist: " +
  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  "<br>Title: " +
  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  "<br>Year: " + 
  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
</script>

</body>
</html>
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
Bài liên quan

Tìm hiểu các ứng dụng XML

Trong nội dung này trình bày một số ứng dụng HTML sử dụng XML, HTTP, DOM và JavaScript. Tài liệu XML được sử dụng Ở đây chúng ta sẽ sử dụng tệp tin XML “cd_catalog.xml”. Hiển thị dữ liệu XML trong bảng HTML Ví dụ này lặp đi lặp lại qua mỗi phần ...

Trần Trung Dũng viết 15:28 ngày 07/09/2018

Tìm hiểu và xây dưng mô hình ứng dụng Client/Server

1. GIỚI THIỆU MẠNG MÁY TÍNH Mạng máy tính hay hệ thống mạng (tiếng Anh: computer network hay network system), được thiết lập khi có từ 2 máy vi tính trở lên kết nối với nhau để chia sẻ tài nguyên: máy in, máy fax, tệp tin, dữ liệu... Một máy tính được gọi là tự hoạt (autonomous) nếu nó có thể ...

Hoàng Hải Đăng viết 17:29 ngày 12/08/2018

Tìm hiểu về ứng dụng Rack và Middleware

Nhiều web developer làm việc ở mức độ trừu tượng cao nhất khi chúng ta lập trình. Và đôi khi thật dễ dàng chấp nhận mọi thứ. Đặc biệt là khi chúng ta đang sử dụng Rails. Bạn đã bao giờ đào vào internals để xem chu kì request/response hoạt động trong Rails như thế nào? Gần đây tôi mới nhận ra rằng ...

Hoàng Hải Đăng viết 17:02 ngày 12/08/2018

CHƯƠNG 4: CÁC HOẠT ĐỘNG CHÍNH CỦA KIỂM THỬ HIỆU SUẤT TRÊN CÁC ỨNG DỤNG WEB (PHẦN 3)

HOẠT ĐỘNG 5. TRIỂN KHAI CÁC THIẾT KẾ KIỂM THỬ (IMPLEMENT THE TEST DESIGN) Các chi tiết của việc tạo ra một thử nghiệm hiệu suất có thể thực thi được là công cụ đặc biệt. Bất kể công cụ mà bạn đang sử dụng, việc tạo ra một thử nghiệm hiệu suất thường bao gồm một kịch bản sử dụng đơn lẻ, sau đó ...

Trịnh Tiến Mạnh viết 15:32 ngày 12/08/2018
0