ç¨JavaScriptè·åXMLæ°æ®
æè§å¾æè¦ææç头åæåºæ¥ãæè¯å¾ä»XMLæ件ä¸è·åä¸äºæ°æ®ï¼å¹¶å°å ¶æ¾å ¥ä½¿ç¨JavaScriptçè¡¨æ ¼ä¸ãææ¥çäºå¤§çº¦ä¸ç¾ä¸ä¸ªç¤ºä¾ï¼ä½ç±äºæç§åå ï¼ææ æ³å®ç°å®ãæä¸ç´å¨ä½¿ç¨DreamWeaverï¼Notepad ++åBracketsã è¿æ¯æçHTMLæ件ãç¨JavaScriptè·åXMLæ°æ®
<head>
//<meta http-equiv="Content-Type" content="text/html; charset-UTF-8"/>
<script language="javascript" type="text/javascript" src="script2.js"></script>
<title>Computer Science Faculty Information</title>
<h1>Computer Science Faculty Information</h1>
<button onclick="readXML()">Read XML File</button>
<table id="first" border="1">
<tr>
<th>Name</th>
</tr>
</table>
æçXMLæ件
<?xml version="1.0?>
<department>
<employee>
<name>Ajay Katangur, Ph.D.</name>
<title>Program Coordinator</title>`
<office>CI 340</office>
<phone>361-825-2478</phone>
<email>[email protected]</email>
</employee>
</department>
åæçJSæ件
function readXML() {
"use strict";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
myFunction(xmlhttp);
}
};
xmlhttp.open("GET", "xml.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
"use strict";
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
x = xmlDoc.getElementsByTagName("employee");
for(i = 0; i < x.length; i++) {
table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("first").innerHTML = table;
}
æåºè¯¥æå°çæ¯ï¼js代ç çå¾å¤§ä¸é¨åæ¯å¨è¿éä»W3Schoolsçã请æ人åè¯ææåéäºä»ä¹ãæåè´è°¢ã
æ¨ç代ç æ£å¦æ¨å¨ä¸é¢å建ç代ç ç段ä¸çå°çé£æ ·ãä½æ¯ï¼æ£å¦æ¨å¨æ³¨éä¸æè¿°ï¼é®é¢å¨äºæ¨ç请æ±æ²¡æè¿åXMLæ件ãæ£æ¥URL以确ä¿å®æ¯æ£ç¡®çã
è¿è¦ç¡®ä¿ä½ çXMLæ¯æ£ç¡®çãä¾å¦ï¼æ¨çXML声æ缺å°ä¸ä¸ªå¼å·ï¼å³åºä¸º<?xml version="1.0"?>
并确ä¿å¨è¯¥å£°æä¹åæ件ä¸æ²¡æç©ºæ ¼ã
è¿è¡è¯¥ä»£ç 段以æ¥çå ¶å·¥ä½ãæ¨å¯ä»¥å¨ææ¬æ¡ä¸ç¼è¾XML并åå»æé®æ¥çæ´æ¹ã
function readXML() {
"use strict";
// simulated request
var xmlhttp={};
xmlhttp.responseText = window.data.value;
xmlhttp.responseXML = (new DOMParser()).parseFromString(xmlhttp.responseText, 'text/xml')
myFunction(xmlhttp);
/*
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
myFunction(xmlhttp);
}
};
xmlhttp.open("GET", "xml.xml", true);
xmlhttp.send();
}
*/
}
function myFunction(xml) {
"use strict";
var x, i, xmlDoc, table;
xmlDoc = xml.responseXML;
table = "<tr><th>Name</th><th>Title</th><th>Office</th><th>Phone</th><th>Email</th><tr>";
x = xmlDoc.getElementsByTagName("employee");
for (i = 0; i < x.length; i++) {
table += "<tr><td>" + x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("office")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue + "</td></tr>";
}
document.getElementById("first").innerHTML = table;
}
textarea {
width: 90%;
height: 40em;
padding: 0.5em;
border: 1px solid black;
background-color: aliceblue;
}
table {
border-collapse: collapse;
}
td {
border: 1px lightgray solid;
padding: 2px;
}
<button onclick="readXML()">Read XML File</button>
<table id="first" border="1">
<tr>
<th>Name</th>
</tr>
</table>
<h4>XML:</h4>
<textarea id="data">
<?xml version="1.0" encoding="UTF-8" ?>
<department>
<employee>
<name>John Smith, Ph.D.</name>
<title>Program Coordinator</title>`
<office>CI 340</office>
<phone>000-000-0000</phone>
<email>[email protected]</email>
</employee>
</department>
</textarea>
æ¯çï¼è¿æ¯è¡ä¸éçãé常æè°¢ï¼ â jynx678
æ¯ä»ä¹æä¸å·¥ä½æ没ææå°å¦ææé误ï¼å¨æµè§å¨å¼åå·¥å ·æ§å¶å°æåºã â charlietfl
好ï¼æ以éç¹å¨äºå½åå»æé®æ¶ï¼åºè¯¥è°ç¨jsï¼å¹¶ä¸å®åºè¯¥ä½¿ç¨xmlæ件ä¸çæ°æ®å¡«å 表ãå½æç¹å»æé®æ¶ï¼æ²¡æä»»ä½ååºã â jynx678
*âä»ä¹é½æ²¡æåçâ* ...æäºäºæ ......äºä»¶åè°è§¦åå¨ï¼æ¨æ¯å¦å¨ç½ç»æ ç¾ä¸æå¼äºæµè§å¨å¼åå·¥å ·å¹¶æ£æ¥äºè¯·æ±ï¼æ§å¶å°ä¸çä»»ä½é误ï¼è³å°éè¦åä¸äºåºæ¬çæ éæé¤ â charlietfl