Hướng dẫn javascript load xml file

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- DOMParser

DOMParser là một interface cung cấp khả năng phân tích mã nguồn XML hoặc HTML từ một String thành một DOM Document.

Constructor:

// Create a DOMParser


var parser = new DOMParser();
 

Phân tích mã nguồn XML/HTML thành một DOM Document:

var parser = new DOMParser();

// XMLDocument object:
var doc1 = parser.parseFromString(xmlString, "text/xml");


// Document object:
var doc2 = parser.parseFromString(xmlString, "text/html");

DOMParser không thể phân tích được mã nguồn XML nếu mã nguồn này không hợp lệ, nhưng nó không phát ra một lỗi, thay vào đó nó trả về một đối tượng Document chứa thông tin lỗi. Và đối tượng Document này có nội dung hơi khác nhau với các trình duyệt khác nhau, nhưng luôn chứa một thẻ (tag) .

...


   (error description)

   (a snippet of the source XML)


...

Bạn nên viết một hàm tiện ích để phân tích XML, hàm này ném ra lỗi nếu XML không hợp lệ.

Utility Function

// Utility function:
// Return XMLDocument, or throw an Error!
function parseXML(xmlString) {
    var parser = new DOMParser();
    // Parse a simple Invalid XML source to get namespace of :
    var docError = parser.parseFromString('INVALID', 'text/xml');
    var parsererrorNS = docError.getElementsByTagName("parsererror")[0].namespaceURI;
    // Parse xmlString:
    // (XMLDocument object)
    var doc = parser.parseFromString(xmlString, 'text/xml');
    if (doc.getElementsByTagNameNS(parsererrorNS, 'parsererror').length > 0) {
        throw new Error('Error parsing XML');
    }
    return doc;
}

Chú ý: Bằng cách sử dụng XMLHttpRequest để đọc một nguồn dữ liệu XML từ một URL bạn có thể nhận được một đối tượng XMLDocument.

2- Ví dụ với DOMParser

DOMParser sẽ phân tích một XML thành một cây DOM (DOM Tree) (Giống như hình minh họa dưới đây). Bạn cần sử dụng các API được cung cấp bởi mô hình DOM để lấy ra dữ liệu cần thiết.

domparser-example.html

    
    

    





    
DOMParser example
    Reset 



    Click Me
    



    





 

domparser-example.js

// Utility function:
// Return XMLDocument, or throw an Error!
function parseXML(xmlString) {
    var parser = new DOMParser();
    // Parse a simple Invalid XML source to get namespace of :
    var docError = parser.parseFromString('INVALID', 'text/xml');
    var parsererrorNS = docError.getElementsByTagName("parsererror")[0].namespaceURI;
    // Parse xmlString:
    // (XMLDocument object)
    var doc = parser.parseFromString(xmlString, 'text/xml');
    if (doc.getElementsByTagNameNS(parsererrorNS, 'parsererror').length > 0) {
        throw new Error('Error parsing XML');
    }
    return doc;
}

// XML String:
var xmlString = "" +
    " " +
    "    " +
    "      Putin " +
    "      putin " +
    "      95 " +
    "    "

    +
    "    " +
    "      Trump " +
    "      trump " +
    "      90 " +
    "    "

    +
    "    " +
    "      Kim " +
    "      kim " +
    "      85 " +
    "    " +
    " ";


function clickHandler(evt) {

    console.log(xmlString);
    var doc;

    try {
        // XMLDocument object:
        doc = parseXML(xmlString);
        console.log(doc.documentElement);
    } catch (e) {
        alert(e);
        return;
    }
    resetLog();

    // Element object. <--> 
    var rootElement = doc.documentElement;
    //
    var children = rootElement.childNodes;

    for(var i =0; i< children.length; i++) {
       var child = children[i];
       //  Element
       if(child.nodeType == Node.ELEMENT_NODE)  {
           var rollNo = child.getAttribute("rollNo");
           var fullNameElement = child.getElementsByTagName("fullName")[0];
           var nickNameElement = child.getElementsByTagName("nickName")[0];
           var marksElement = child.getElementsByTagName("marks")[0];

           var fullName = fullNameElement.textContent;
           var nickName = nickNameElement.textContent;
           var marks = marksElement.textContent;

           appendLog("rollNo: " + rollNo);
           appendLog("fullName: " + fullName);
           appendLog("nickName: " + nickName);
           appendLog("marks: " + marks);
       }
    }

}


function resetLog() {
    document.getElementById('textarea-log').value = "";
}

function appendLog(msg) {
    document.getElementById('textarea-log').value += "\n" + msg;
}

 

-

Xem thêm: