Nạp tài liệu XML cần xử lý bằng JavaScript- 123docz.net

Có hai cách nạp dữ liệu XML vào trình duyệt IE bằng JavaScript. - Cách 1: Dùng lớp đối tượng Microsoft.XMLDOM

- Cách 2: Dùng phần tử nạp dữ liệu <XML>

Chúng ta sử dụng ví dụ (tập tin meetings.xml) sau để xử lý bằng Java Script theo mô hình DOM. (Tạo tập tin meetings.xml chứa thông tin của những người tham gia cuộc họp)

Hello From XML Welcome to the wild and woolly word

Ví dụ:

<?xml version = “1.0”?> <MEETINGS>

<MEETING_TITLE> XML In The Real Word </MEETING_TITLE> <MEETING_NUMBER> 2079 </MEETING_NUMBER>

<PERSON ATTENDENCE= “present”> <FIRST_NAME> Edward </FIRST_NAME> <LAST_NAME> Edward </LAST_NAME> </PERSON>

<FIRST_NAME> Ernestine </FIRST_NAME> <LAST_NAME> Johnson </LAST_NAME> </PERSON>

<PERSON ATTENDENCE= “present”> <FIRST_NAME> Betty </FIRST_NAME> <LAST_NAME> Richardson </LAST_NAME> </PERSON>

</PEOPLE> </MEETING> </MEETINGS>

Tiếp theo, chúng ta tạo tài liệu viewdata.html bên dưới chứa đoạn mã JavaSript để đọc và phân tích tài liệu XML trên. Trước hết ta cần tạo ra đối tượng xử lý DOM của Microsoft. Như vậy, để thực hiện được điều này, ta gọi toán tử new để tạo mới đối tượng ActiveXObject với tên lớp là Microsoft.XMLDOM.

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) . . . </SCRIPT> </HEAD> </HTML>

Tiếp đến chúng ta nạp tài liệu meetings.xml cần xử lý vào trình duyệt

<HTML>

<HEAD>

<TITLE>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc

xmldoc = new ActiveXObject (“Microsoft.XMLDOC”)

xmldoc.load (“meetings.xml”); . . . </SCRIPT> </HEAD> </HTML>

Để duyệt qua tất cả các nút trong cây tài liệu theo mô hình DOM, ta cần xuất phát từ nút gốc. Trong tài liệu meetings.xml ở trên ta thấy <MEETINGS> là phần tử gốc của tài liệu. Chúng ta gọi phương thức documentElement để đến nút gốc của tài liệu DOM như sau:

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode

xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml); meetingsNode = xmldoc.documentElement . . . </SCRIPT> </HEAD> </HTML>

Chúng ta khai báo thêm biến meetingsNode để lưu giữ nút gốc. Lúc này chúng ta hoàn toàn có thể duyệt toàn bộ tài liệu bằng cách đi qua các nút của cấu trúc cây DOM. * Các phương thức duyệt qua các nút:

firstChild: lấy nút con đầu tiên

nextChild: lấy nút con kế tiếp

previousChild: lấy nút con trước đó

lastChild: lấy nút con sau cùng * Ngoài ra còn có các phương thức:

firstSibling: trả về nút con cùng cấp đầu tiên

nextSibling: trả về nút con cùng cấp kế tiếp

previousSibling: trả về nút con cùng cấp trước đó

lastSibling: trả về nút con cùng cấp sau cùng

Ví dụ như <MEETING> là nút con của nút gốc <MEETINGS> và ta có thể gọi phương thức fistChild để chuyển đến nút này như sau:

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode, meetingNode

xmldoc.load (meetings.xml); meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.fistChild . . . </SCRIPT> </HEAD> </HTML>

Chúng ta muốn tìm phần tử <PERSON> thứ 3 bên trong phần tử <PEOPLE>. Do <PEOPLE > là phần tử con cuối cùng của <MEETING> nên ta có thể lần ra nút dữ liệu này là:

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode, meetingNode

peopleNode

xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml); meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.fistChild peopleNode = meetingNode.lastChild . . . </SCRIPT> </HEAD> </HTML>

Bởi vì phần tử <PERSON> thứ 3 mà ta muốn lấy là nút con cuối cùng của <PEOPLE>, nên ta tiếp tục gọi phương thức lastChild của nút peopleNode.

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode, meetingNode

peopleNode, personNode

xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml); meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.fistChild peopleNode = meetingNode.lastChild personNode = peopleNode.lastChild . . . </SCRIPT> </HEAD> </HTML>

Cuối cùng ta muốn lấy thông tin về họ tên <FIRST_NAME>, <LAST_NAME> của phần tử <PERSON>. Chúng ta sử dụng phương thức fistChild và nextSlibling (lấy phần tử kế tiếp cùng cấp) như sau:

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode, meetingNode peopleNode, personNode

first_nameNode, last_nameNode

xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml);

meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.fistChild peopleNode = meetingNode.lastChild

personNode = peopleNode.lastChild first_nameNode = personNode.firstChild last_nameNode = first_nameNode.nextSibling . . . </SCRIPT> </HEAD> </HTML>

Như vậy, chúng ta vừa đi qua tất cả các nút của cây tài liệu DOM để đến được các mục thông tin cần lấy. Công việc còn lại là hiển thị thông tin lấy được ra cửa sổ trình duyệt.

Tiếp theo chúng ta sẽ tạo ra trang viewdata.html hoàn chỉnh bao gồm một nút nhấn, khi kích chuột vào nút nhấn sẽ trả về thông tin của người thứ 3 tham dự cuộc họp trong tập tin meetings.xml.

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode, meetingNode peopleNode, personNode

first_nameNode, last_nameNode

var outputText

xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml); meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.fistChild peopleNode = meetingNode.lastChild personNode = peopleNode.lastChild first_nameNode = personNode.firstChild last_nameNode = first_nameNode.nextSibling

outputText = “Third name:” +

first_nameNode.firstChild.nodeValue + „ „ + last_nameNode.firstChild.nodeValue

messageDIV.innerHTML=ouputText } </SCRIPT> </HEAD> <BODY> <CENTER>

<H1> Reading XML element values </H1>

<INPUT TYPE =”BUTTON”

VALUE = “Get the name of the third person” ONCLICK = readXMLDocument()”> <P> <DIV ID =”messageDIV”></DIV> </CENTER> </BODY> </HTML> 6.3 Phần tử nạp dữ liệu

Khi dùng phần tử <XML> nạp dữ liệu, nguồn dữ liệu được đặt trong thuộc tính SRC. Để truy xuất đến đối tượng, chúng ta dựa vào thuộc tính ID.

Ví dụ:

<TITLE>

Reading element values with XML element <TITLE>

<XML ID= “meetingsXML” SCR = “meetings.xml”></XML>

<SCRIPT LANGUAGE = “javaScript”> Function readXMLDocument ( ) {

var xmldoc, meetingsNode, meetingNode, peopleNode, first_nameNode, last_nameNode var outputText

xmldoc = document.all (“meetingsXML”).XMLDocument

meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.firstChild peopleNode = meetingNode.lastChild personNode = peopleNode.lastChild

first_nameNode = personNode.firstChild last_nameNode = first_nameNode.nextSibling outputText=“Third name:”+ first_nameNode.firstChild.nodeValue + „ „ + last_nameNode.firstChile.nodeValue messageDIV.innerHTML = outputText } </SCRIPT> </HEAD> <BODY> <CENTER> <H1>

Reading element values with XML data islands </H1>

<INPUT TYPE = “BUTTON”

VALUE = “Get the name of the third person” ONCLICK = “readXMLDocument ( )”> <P> <DIV ID = “messageDIV”></DIV> </CENTER> </BODY> </HTML>

Kết quả hiển thị vẫn không thay đổi

Với thẻ <XML> chúng ta có thể nhúng trực tiếp toàn bộ dữ liệu XML trong tài liệu HTML, xem ví dụ sau:

Ví dụ:

<HTML>

Reading element value with XML data islands </TITLE>

<?xml version “1.0”?> <MEETINGS>

<MEETING TYPE = “informal”>

<MEETING_TITLE> XML In The Real Word </MEETING_TITLE> <MEETING_NUMBER> 2079 </MEETING_NUMBER>

<DATE> 6/1/2002 </DATE> <PEOPLE>

<PERSON ATTENDENCE= “present”>

<FIRST_NAME> Edward </FIRST_NAME> <LAST_NAME> Samson </LAST_NAME> </PERSON>

<PERSON ATTENDENCE= “absent”>

<FIRST_NAME> Ernestine </FIRST_NAME> <LAST_NAME> Johnson</LAST_NAME> </PERSON>

<PERSON ATTENDENCE= “present”>

<FIRST_NAME> Betty </FIRST_NAME> <LAST_NAME> Richardson </LAST_NAME> </PERSON>

</PEOPLE> </MEETING> </MEETINGS>

</XML>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument () {

var xmldoc, meetingsNode, meetingNode, peopleNode, first_nameNode, last_nameNode var outputText

xmldoc = document.all (“meetingsXML”). XMLDocument meetingsNode = xmldoc.documentElement

meetingNode = meetingsNode.firstChild peopleNode = meetingsNode.lastChild first_nameNode = personNode.firstChild last_nameNode = first_nameNode.nextSibling outputText = “Third name:” +

first_nameNode.firstChild.nodeValue + „ „ + last_nameNode.firstChild.nodeValue messageDIV.innerHTML = outputText } </SCRIPT> </HEAD> <BODY> <CENTER>

<H1>

Reading element values with XML data islands </H1>

<INPUT TYPE = “BUTTON”

VALUE = “Get the name of the third person” ONCLICK = “readXMLDocument ()”>

<P>

</BODY> </HTML>

Thay vì dùng lệnh xmldoc=document.all (“meetingsXML”).XMLDocument

để lấy về nút gốc trong cấu trúc tài liệu DOM, chúng ta có thể dùng trực tiếp thuộc tính documentElement từ định danh của nguồn dữ liệu <XML> như sau:

Xmldoc = meetingsXML.documentElement 6.4 Truy xuất các nút dữ liệu dựa vào tên

Bắt đầu từ nút gốc, chúng ta đã duyệt qua cấu trúc dữ liệu DOM dựa vào các phương thức như firsChild, nextSibling… Tuy nhiên, chúng ta cũng có thể dùng trực tiếp tên của phần tử để lấy ra danh sách các nút thỏa mãn theo một điều kiện tìm kiếm nào đó.

Ví dụ, chúng ta muốn tìm các thông tin về <FIRST_NAME> và <LAST_NAME> ta có thể dùng phương thức getElementsByTagName để lấy danh sách các nút.

Ví dụ:

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc,listNodesFirstName,listNodeLastName xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml);

listNodesFirstName=xmldoc.getElementsByTagName (“FIRST_NAME”) listNodesFirstName=xmldoc.getElementsByTagName (“LAST_NAME”)

. .

</SCRIPT> </HEAD> </HTML>

Sau khi đã có danh sách các nút, chúng ta có thể truy xuất đến từng nút trong danh sách dựa vào thuộc tính item.

Ví dụ:

<HTML>

Reading XML element values </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc,listNodesFirstName,listNodeLastName xmldoc = new ActiveXObject (“Microsoft.XMLDOM”) xmldoc.load (meetings.xml);

listNodesFirstName=xmldoc.getElementsByTagName (“FIRST_NAME”) listNodesFirstName=xmldoc.getElementsByTagName (“LAST_NAME”) outputText = “Third name:” +

listNodesFirstName.item(2).firstChild.nodeValue + „ „ + listNodesLastName.item(2).firstChild.nodeValue messageDIV.interHTML=outputText } </SCRIPT> </HEAD> <BODY> <CENTER> <H1>

Reading element values with XML data islands </H1>

<INPUT TYPE = “BUTTON”

VALUE = “Get the name of the third person” ONCLICK = “readXMLDocument ()”>

<P>

</CENTER> </BODY> </HTML>

6.5 Truy xuất giá trị của thuộc tính

Chúng ta chỉ mới lấy được nội dung dữ liệu của một nút đại diện cho phần tử XML. Tuy nhiên, các phần tử XML có thể chứa thông tin lưu trữ trong thuộc tính.

Ví dụ, chúng ta muốn lấy danh sách tất cả các thuộc tính của nút <PERSON> trước khi tham chiếu đến giá trị của ATTENDANCE để cho biết tình trạng hiện diện của một các nhân cụ thể trong cuộc họp, được mô tả trong tập tin meetings.xml.

Ví dụ:

<HTML>

<HEAD>

<TITLE>

Reading attribute values from XML documents </TITLE>

Function readXMLDocument() {

var xmldoc, meetingsNode, meetingNode, peopleNode first_NameNode, last_NameNode var outputText

var attributes

xmldoc = document.all (“meetingsXML”).XMLDocument meetingsNode = xmldoc.documentElement meetingNode = meetingsNode.firstChild peopleNode = meetingNode.lastChild personNode = peopleNode.lastChild first_nameNode = personNode.firstChild last_nameNode = first_nameNode.nextSibling attribles = personNode.attributes . . . </SCRIPT> </HEAD> </HTML>

Với danh sách các thuộc tính đã có, ta gọi phương thức getNamedItem để lấy về tham chiếu đến một nút thuộc tính cụ thể theo tên của thuộc tính như sau:

<HTML>

<HEAD>

<TITLE>

Reading attribute values from XML documents </TITLE>

Function readXMLDocument() {

var xmldoc, meetingsNode, meetingNode, peopleNode first_NameNode, last_NameNode var outputText

var attributes, attendencePerson

attendencePerson = attributes.getNamedItem (“ATTENDENCE”)

. . . </SCRIPT> </HEAD> </HTML>

Sau cùng với nút thuộc tính có được, ta gọi phương thức value để lấy giá trị thực tế của thuộc tính.

<HTML>

<HEAD>

<TITLE>

Reading attribute values from XML documents </TITLE>

<SCRIPT LANGUAGE = “JavaScript”> Function readXMLDocument()

{

var xmldoc, meetingsNode, meetingNode, peopleNode first_NameNode, last_NameNode var outputText

var attributes, attendencePerson

attendencePerson = attributes.getNamedItem (“ATTENDENCE”) outputText = first_nameNode.firstChild.nodeValue + „ ‟ + last_nameNode.firstChild.nodeValue + “is” + attendencePerson.value messageDIV.interHTML=outputText } </SCRIPT> </HEAD> <BODY> <CENTER>

<H1> Reading element values with XML data islands </H1> <INPUT TYPE =”BUTTON”

VALUE=”Get the name of the third person” ONClICK=”readXMLDocument()”> <P> <DIV ID=”messageDIV”></DIV> </CENTER> </BODY> </HTML>

6.6 Phân tích trực tiếp toàn bộ dữ liệu XML

Ở các phần trên, chúng ta mới rút trích một phần của dữ liệu trong tài liệu XML. Chúng ta có thể duyệt từ đầu đến cuối cây tài liệu bằng thủ tục đệ quy. Thủ tục

JavaScript sau mang tên iterateChildren() có khả năng đệ quy phân tích in ra toàn bộ nội dung dữ liệu XML. Khi duyệt đến một nút, ta gọi childNodes để lấy danh sách các nút con (nếu có). Ngoài ra, chúng ta có thể kiểm tra một nút có bao gồm nút con hay không bằng cách dựa vào thuộc tính length.

Ví dụ: <HTML> <HEAD> <TITLE> Prasing an XML Document </TITLE> <XML ID = “meetingsXML” SRC = “meetings.xml”> </XML> <SCRIPT LANGUAGE = “JavaScript”>

. . .

Function interateChildren (theNode, indentSpacing) {

//canh lề khi kết xuất phần tử ra tài liệu đích

var text = indentSpacing + theNode.nodeName + “<BR>”

if (theNode.childNodes.lenght > 0) {

for (var loopIndex = 0; loopIndex < theNode.childNodes.length; loopIndex ++){

//đệ quy duyệt tiếp xuống các phần tử con

text +=interateChildren (

theNode.childNodes(loopIndex), indentSpacing + “       ”) } } return text } </SCRIPT> </HEAD> </HTML>

Để gọi thủ tục iterateChildren() chúng ta cài đặt thêm hàm parseDocument() để hoàn chỉnh cho tài liệu.

<HTML>

<TITLE>

Prasing an XML Document </TITLE>

Function parseDocument () {

documentXML = document.all (“meetingsXML”). XMLDocument resultsDIV.innerHTML = interateChildren (documentXML,” “) }

Function interateChildren (theNode, indentSpacing) {

//canh lề khi kết xuất phần tử ra tài liệu đích

var text = indentSpacing + theNode.nodeName + “<BR>” if (theNode.childNodes.lenght > 0) {

for (var loopIndex = 0; loopIndex < theNode.childNodes.length; loopIndex ++){

//đệ quy duyệt tiếp xuống các phần tử con

text +=interateChildren (

theNode.childNodes(loopIndex), indentSpacing + “       ”) } } return text } </SCRIPT> </HEAD> <BODY> <CENTER> <H1> Parsing an XML Document </H1> </CENTER> <CENTER>

<INPUT TYPE = “BUTTON”

VALUE = “Parse and display the document” ONCLICK = “parseDocument()”>

<DIV ID = “resultDIV”></DIV>

</BODY> </HTML>

Khi chạy trên trình duyệt, chỉ in ra tên của các phần tử (nodeName), đối với các nút chứa dữ liệu text, chúng ta chưa rút trích nội dung dữ liệu khi đó chúng sẽ được biểu diễn bằng #text, các phần tử như chỉ thị xử lý được đại diện bằng ký hiệu #document.

6.7 Phân tích nội dung và kiểu dữ liệu của nút

Chúng ta đã tìm hiểu qua cấu trúc cây tài liệu DOM có tất cả 12 kiểu nút. Đối với mỗi nút, chúng ta có thể dựa vào giá trị nodeType để xác định kiểu dữ liệu của nút. Các giá trị nodeType là:

Giá trị Kiểu nút Mô tả

1 2 3 4 5 6 7 8 9 10 11 12 Element Attribute Text CDATA section Entity reference Entity Processing Instruction Comment Document Document Type Document fragment Notation Phần tử XML Thuộc tính Dữ liệu Text

Phân đoạn CDATA Tham chiếu thực thể Thực thể

Chỉ thị xử lý Chú thích Tài liệu Kiểu tài liệu Đoạn tài liệu Ghi chú

Sau đây chúng ta sử dụng giá trị nodeType để xác định kiểu dữ liệu của nút đồng thời sử dụng thuộc tính nodeValue để trích rút nội dung dữ liệu mà nút đang nắm giữ.

Ví dụ : <HTML> <HEAD> <TITLE> Prasing an XML Document </TITLE> <XML ID = “meetingsXML” SRC = “meetings.xml”> </XML> <SCRIPT LANGUAGE = “JavaScript”>

Function parseDocument () {

resultsDIV.innerHTML = interateChildren (documentXML,” “) }

Function interateChildren (theNode, indentSpacing) { var typeData switch (theNode.NodeType) { case1: typeData = “element” break case2: typeData = “attribute” break case3: typeData = “text” break case4:

typeData = “CDATA section” break

case5:

typeData = “entity reference” break

case6:

typeData = “entity” break

case7:

typeData = “processing instruction” break case8: typeData = “comment” break case9: typeData = “document” break case10:

typeData = “document type” break

case11:

typeData = “document fragment” break

case12:

typeData = “notation” }

var text

//Nếu nút có dữ liệu thì in nội dung của nút ra trình duyệt

if (theNode.nodeValue!=null){

text = indentSpacing + theNode.nodeName + “  = “ + theNode.nodeValue

+ “  (Node type:” + typeData + “) <BR>”

} else {

text = indentSpacing + theNode.nodeName + “&n bsp; (Node type:” + typeData

+ “) <BR>” }

// Trích rút dữ liệu của thuộc tính

if (theNode.attributes! = null){ if (theNode.attributes.length > 0) {

for (var loopIdex = 0; loopIdex < theNode.attribute.length; loopIndex++) { text +=”(Attribute:”+ theNode.attributes(loopIndex).nodeName + “=\ “” + theNode.attributes(loopIndex).nodeValue + “=\ “” + } } }

// Đệ quy tìm sâu xuống các nút con

if (theNode.childNodes.lenght > 0) {

for (var loopIndex = 0; loopIndex < theNode.childNodes.length; loopIndex ++){

text +=interateChildren (

theNode.childNodes(loopIndex), indentSpacing + “       ”) } } return text } </SCRIPT> </HEAD>

<H1> Parsing an XML Document and displaying node type and content

</H1> </CENTER> <CENTER>

<INPUT TYPE = “BUTTON”

VALUE = “Parse and display the document” ONCLICK = “parseDocument()”>

<DIV ID = “resultDIV”></DIV>

</BODY> </HTML>

Kết quả toàn bộ nội dung của dữ liệu đầu vào từ tập tin meetings.xml được hiển thị đầy đủ thông tin bao gồm kiểu nút, nội dung phần tử, nội dung thuộc tính.

Kết chương

Qua chương này, chúng ta đã biết cách dùng JavaScript để xử lý dữ liệu XML theo mô hình DOM. Mặc dù DOM xử lý và truy xuất được mọi dữ liệu trong tài liệu XML, nhưng mô hình khá phức tạp vì phải lần theo các nút trong cây tài liệu. Ngoài ra, chúng ta còn có thể kiểm tra tính hợp lệ của tài liệu XML bằng JavaScript với mô hình tài liệu DOM và thay đổi nội dung XML bằng JavaScript.

 Câu hỏi củng cố:

1. Mô hình DOM là gì?

2.Dùng lớp đối tượng Microsoft.XMLDOM xây dựng tài liệu XML như thế nào? 3. Hãy cho biết các phần tử dùng nạp dữ liệu <XML>?

BÀI TẬP THỰC HÀNH Bài 1: Tạo tập tin thuchanh.HTML hiển thị nội dung sau:

Nạp tài liệu XML cần xử lý bằng JavaScript

Định nghĩa DTD tham chiếu ngoại

Phần tử <!ELEMENT>

Nạp tài liệu XML cần xử lý bằng JavaScript

Định nghĩa DTD tham chiếu ngoại

Phần tử &lt;!ELEMENT&gt;

Phần tử <!ELEMENT>