JavaScript DHTML/Development/XML — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Версия 13:02, 26 мая 2010
Содержание
Convert XML to HTML
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<html> <head> <title>Convert XML to HTML</title> <style rel="stylesheet" id="mainStyle" type="text/css"> html {background-color:#cccccc} body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold} h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline} .buttons {margin-top:10px} </style> <style type="text/css"> table {table-collapse:collapse; border-spacing:0} td {border:2px groove black; padding:7px; background-color:#ccffcc} th {border:2px groove black; padding:7px; background-color:#ffffcc} .ctr {text-align:center} </style> <script type="text/javascript"> var xDoc; // verify that browser supports XML features and load external .xml file function verifySupport(xFile) {
if (document.implementation && document.implementation.createDocument) {
// this is the W3C DOM way, supported so far only in NN6+
xDoc = document.implementation.createDocument("", "theXdoc", null);
} else if (typeof ActiveXObject != "undefined") {
// make sure real object is supported (sorry, IE5/Mac)
if (document.getElementById("msxml").async) {
xDoc = new ActiveXObject("Msxml.DOMDocument");
}
}
if (xDoc && typeof xDoc.load != "undefined") {
// load external file (from same domain)
xDoc.load(xFile);
return true;
} else {
var reply = confirm("This example requires a browser with XML support, " +
"such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
if (reply) {
history.back();
}
}
return false;
} // Draw table from xDoc document tree data function drawTable(tbody) {
var tr, td, i, j, oneRecord;
tbody = document.getElementById(tbody);
// node tree
var data = xDoc.getElementsByTagName("worldcup")[0];
// for td class attributes
var classes = ["ctr","","","","ctr"];
for (i = 0; i < data.childNodes.length; i++) {
// use only 1st level element nodes to skip 1st level text nodes in NN
if (data.childNodes[i].nodeType == 1) {
// one final match record
oneRecord = data.childNodes[i];
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("location")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML =
oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue +
" - " +
oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
}
}
} function init(xFile) {
// confirm browser supports needed features and load .xml file
if (verifySupport(xFile)) {
// let file loading catch up to execution thread
setTimeout("drawTable("matchData")", 1000);
}
}
</script> </head> <body onload="init("worldCupFinals.xml")">
Transforming XML into HTML Tables
| Year | Host Country | Winner | Loser | Score (Win - Lose) |
|---|
<object id="msxml" WIDTH="1" HEIGHT="1"
classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body> </html>
</source>
Display XML content in HTML table
<source lang="html4strict">
<html> <head> <title>Embedding External XML Data</title> <style type="text/css"> body {background-color:#ffffff} table {table-collapse:collapse; border-spacing:0} td {border:2px groove black; padding:7px} th {border:2px groove black; padding:7px} .ctr {text-align:center} </style> <script language="JavaScript" type="text/javascript"> // global reference to XML document object var xDoc; // Draw table from xDoc document tree data function drawTable(tbody) {
var tr, td, i, j, oneRecord;
tbody = document.getElementById(tbody);
// node tree
var data = xDoc.getElementsByTagName("season")[0];
// for td class attributes
var classes = ["ctr","","","","ctr"];
for (i = 0; i < data.childNodes.length; i++) {
// use only 1st level element nodes
if (data.childNodes[i].nodeType == 1) {
// one bowl record
oneRecord = data.childNodes[i];
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("number")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
td = tr.insertCell(tr.cells.length);
td.setAttribute("class",classes[tr.cells.length-1]);
td.innerHTML = oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue + " - " + oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
}
}
} // verify that browser supports XML features and load external .xml file function verifySupport(xFile) {
if (document.implementation && document.implementation.createDocument) {
// this is the W3C DOM way, supported so far only in NN6
xDoc = document.implementation.createDocument("", "theXdoc", null);
} else if (typeof ActiveXObject != "undefined") {
// make sure real object is supported (sorry, IE5/Mac)
if (document.getElementById("msxml").async) {
xDoc = new ActiveXObject("Msxml.DOMDocument");
}
}
if (xDoc && typeof xDoc.load != "undefined") {
// load external file (from same domain)
xDoc.load(xFile);
return true;
} else {
var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
if (reply) {
history.back();
}
}
return false;
} // initialize first time -- invoked onload function init(xFile) {
// confirm browser supports needed features and load .xml file
if (verifySupport(xFile)) {
// let file loading catch up to execution thread
setTimeout("drawTable("bowlData")", 1000);
}
} </script> </head> <body onload="init("superBowls.xml");">
Super Bowl Games
| Bowl | Year | Winner | Loser | Score (Win or Lose) |
|---|
<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object> </body> </html>
</source>
function loads the XML document from the specified URL
<source lang="html4strict">
/* Examples From JavaScript: The Definitive Guide, Fourth Edition Legal matters: these files were created by David Flanagan, and are Copyright (c) 2001 by David Flanagan. You may use, study, modify, and distribute them for any purpose. Please note that these examples are provided "as-is" and come with no warranty of any kind. David Flanagan
- /
<head><title>Employee Data</title> <script> // This function loads the XML document from the specified URL, and when // it is fully loaded, passes that document and the url to the specified // handler function. This function works with any XML document function loadXML(url, handler) {
// Use the standard DOM Level 2 technique, if it is supported
if (document.implementation && document.implementation.createDocument) {
// Create a new Document object
var xmldoc = document.implementation.createDocument("", "", null);
// Specify what should happen when it finishes loading
xmldoc.onload = function() { handler(xmldoc, url); }
// And tell it what URL to load
xmldoc.load(url);
}
// Otherwise use Microsoft"s proprietary API for Internet Explorer
else if (window.ActiveXObject) {
var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); // Create doc.
xmldoc.onreadystatechange = function() { // Specify onload
if (xmldoc.readyState == 4) handler(xmldoc, url);
}
xmldoc.load(url); // Start loading!
}
} // This function builds an HTML table of employees from data it reads from // the XML document it is passed. function makeTable(xmldoc, url) {
// Create a| Etat : | <INPUT TYPE=TEXT NAME="t1" VALUE="Allemagne" SIZE=40 MAXLENGTH=40> | <INPUT TYPE=BUTTON NAME="b9" VALUE="Rechercher"
onClick="document.f1.t2.value=obtenirValeurAttribut(rechercherNoeud("etat", document.f1.t1.value), "entree");">
|
| Entrée dans l"Union : | <INPUT TYPE=TEXT NAME="t2" VALUE="" SIZE=4> |
<P>Rechercher un Etat européen en fonction de sa capitale :
| Capitale : | <INPUT TYPE=TEXT NAME="t3" VALUE="Riga" SIZE=40 MAXLENGTH=40> | <INPUT TYPE=BUTTON NAME="b10" VALUE="Rechercher"
onClick="document.f1.t4.value=obtenirValeurNoeud(rechercherNoeudParAttribut("etat", "capitale", document.f1.t3.value));">
|
| Etat : | <INPUT TYPE=TEXT NAME="t4" VALUE="" SIZE=40> |
</FORM> </BODY>
</HTML>
</source>
XML to JavaScript
<source lang="html4strict"> // convert XML data into JavaScript array of JavaScript objects
function XML2JS(xmlDoc, containerTag) {
var output = new Array();
var rawData = xmlDoc.getElementsByTagName(containerTag)[0];
var i, j, oneRecord, oneObject;
for (i = 0; i < rawData.childNodes.length; i++) {
if (rawData.childNodes[i].nodeType == 1) {
oneRecord = rawData.childNodes[i];
oneObject = output[output.length] = new Object();
for (j = 0; j < oneRecord.childNodes.length; j++) {
if (oneRecord.childNodes[j].nodeType == 1) {
oneObject[oneRecord.childNodes[j].tagName] =
oneRecord.childNodes[j].firstChild.nodeValue;
}
}
}
}
return output;
}
