<?xml version="1.0" encoding="UTF-8"?>
<zip>
<city>
MyCity</city>
<state>mystate</state>
</zip>
2.讀此xml的javascript例子：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">
var url = "NewFile.xml";
String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); }
var xmlDoc;
var moz = (typeof document.implementation != 'undefined')
&& (typeof document.implementation.createDocument != 'undefined');
var ie = (typeof window.ActiveXObject != 'undefined');
function importXML(file) {
if (moz) {
xmlDoc = document.implementation.createDocument("", "doc", null);
} else if (ie) {
xmlDoc = new ActiveXObject("MSXML2.DomDocument.3.0");
xmlDoc.async = false;
while(xmlDoc.readyState != 4) {};
}
xmlDoc.load(file);
}
importXML(url);
function updateCityState(){
if (moz) {
var zip = xmlDoc.getElementsByTagName("zip")[0];
var city;
var _city = zip.getElementsByTagName("city")[0].firstChild.nodeValue;
if (_city) city = _city.Trim();
var state;
var _state=zip.getElementsByTagName("state")[0].firstChild.nodeValue;
if(_state) state = _state.Trim();
document.getElementById('city').value = city;
document.getElementById('state').value = state;
} else if (ie) {
var city;
var _city = xmlDoc.selectSingleNode("/zip/city");
if (_city) city = _city.text;
var state;
var _state=xmlDoc.selectSingleNode("/zip/state");
if(_state) state = _state.text;
document.getElementById('city').value = city;
document.getElementById('state').value = state;
}
}
</script>
</head>
<body>
<form action="post">
<p>
ZIP code:
<input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
</p>
City:
<input type="text" name="city" id="city" />
State:
<input type="text" size="2" name="state" id="state" />
</form>
</body>
</html>
=======================================================================
在網路瀏覽器軟體中，可以Internet Explorer (IE)現在是一種標準的軟體。可以看到，運行不同版本的Windows作業系統(和很多其他的作業系統)的每一台機器幾乎都使用IE。微軟已經通過ActiveX控制項將IE的功能包含在執行成熟的XML處理技術中。
在本篇文章中，我們將講述如何在IE中使用ActiveX功能來訪問並解析XML文檔，由此允許網路衝浪者操縱它們。
網上衝浪
我們以一個標準的順序文檔而開始，如表A所示。這一文檔包含簡單的順序數據以提供網路衝浪者瀏覽之用。不僅僅為了顯示這些數據，我們還提供了一個簡單的用戶界面，網上衝浪都可以使用這一界面來瀏覽XML文檔。
表A: order.xml
<?xml version="1.0" ?>
<Order>
<Account>9900234</Account>
<Item id="1">
<SKU>1234</SKU>
<PricePer>5.95</PricePer>
<Quantity>100</Quantity>
<subtotal>595.00</Subtotal>
<Description>Super Widget Clamp</Description>
</Item>
<Item id="2">
<SKU>6234</SKU>
<PricePer>22.00</PricePer>
<Quantity>10</Quantity>
<Subtotal>220.00</Subtotal>
<Description>Mighty Foobar Flange</Description>
</Item>
<Item id="3">
<SKU>9982</SKU>
<PricePer>2.50</PricePer>
<Quantity>1000</Quantity>
<Subtotal>2500.00</Subtotal>
<Description>Deluxe Doohickie</Description>
</Item>
<Item id="4">
<SKU>3256</SKU>
<PricePer>389.00</PricePer>
<Quantity>1</Quantity>
<Subtotal>389.00</Subtotal>
<Description>Muckalucket Bucket</Description>
</Item>
<NumberItems>1111</NumberItems>
<Total>3704.00</Total>
<OrderDate>07/07/2002</OrderDate>
<OrderNumber>8876</OrderNumber>
</Order>
我們使用一個網路表單以訪問這一XML文檔，這一表單將顯示SKU，價格，數量，各部分的小計，以及順序中的每一選項的描述。我們的表單還包含向前和向後瀏覽選項的按鈕。
網頁的構成
網頁的重要部分是在於表單，我們將使用一個表以易讀的方式在螢幕上顯示。下面是顯示HTML表的代碼片段：
<form>
<table border="0">
<tr><td>SKU</td><td><input type="text" name="SKU"></td></tr>
<tr><td>Price</td><td><input type="text" name="Price"></td></tr>
<tr><td>Quantity</td><td><input type="text" name="Quantity"></td></tr>
<tr><td>Total</td><td><input type="text" name="Total"></td></tr>
<tr><td>Description</td><td><input type="text"
name="Description"></td></tr>
</table>
<input type="button" value=" << " onClick="getDataPrev();"> <input
type="button" value=" >> " onClick="getDataNext();">
</form>
請注意到，我們在表的下面包含了兩個按鈕，即通過getDataNext() 和getDataPrev()函式來瀏覽前一個和後一個的記錄，這也是我們所要討論的問題。
腳本
其實，我們網頁的實質部分不是在於表單，而是在於控制表單的腳本。在我們的腳本中包括四個部分。首先，我們通過載入XML文檔而初始化網頁。第二部分是導航到下一個記錄。第三步是導航到前一個記錄。第四部分是從XML文檔中提取單一的值。表B顯示了我們的網頁的全部內容。
表B: jsxml.html
<html>
<head>
<script language="JavaScript">
<!--
vari = -1;
varorderDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
orderDoc.load("order.xml");
var items = orderDoc.selectNodes("/Order/Item");
function getNode(doc, xpath) {
varretval = "";
var value = doc.selectSingleNode(xpath);
if (value) retval = value.text;
return retval;
}
function getDataNext() {
i++;
if (i > items.length - 1) i = 0;
document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" +
i + "]/SKU");
document.forms[0].Price.value = getNode(orderDoc, "/Order/Item["
+ i + "]/PricePer");
document.forms[0].Quantity.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Quantity");
document.forms[0].Total.value = getNode(orderDoc, "/Order/Item["
+ i + "]/Subtotal");
document.forms[0].Description.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Description");
}
function getDataPrev() {
i--;
if (i < 0) i = items.length - 1;
document.forms[0].SKU.value = getNode(orderDoc, "/Order/Item[" +
i + "]/SKU");
document.forms[0].Price.value = getNode(orderDoc, "/Order/Item["
+ i + "]/PricePer");
document.forms[0].Quantity.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Quantity");
document.forms[0].Total.value = getNode(orderDoc, "/Order/Item["
+ i + "]/Subtotal");
document.forms[0].Description.value = getNode(orderDoc,
"/Order/Item[" + i + "]/Description");
}
// -->
</script>
</head>
<body onload="getDataNext()">
<h2>XML order Database</h2>
<form>
<table border="0">
<tr><td>SKU</td><td><input type="text" name="SKU"></td></tr>
<tr><td>Price</td><td><input type="text" name="Price"></td></tr>
<tr><td>Quantity</td><td><input type="text"
name="Quantity"></td></tr>
<tr><td>Total</td><td><input type="text" name="Total"></td></tr>
<tr><td>Description</td><td><input type="text"
name="Description"></td></tr>
</table>
<input type="button" value=" << " onClick="getDataPrev();"> <input
type="button" value=" >> " onClick="getDataNext();">
</form>
</body>
</html>
運行
這一網頁將傳入並運行腳本的初始化。你一定確保order.xml文檔與jsxml.html在相同的相同的路徑上。
初始化部分將一個新的ActiveX對象例示為MSXML2.DOMDocument.3.0對象類型，然後腳本傳入order.xml文檔到記憶體中，並選擇所有的/Order/Item節點。我們使用/Order/Item節點以識別文檔已經包含的選項。
文檔中的<body>標準有一個onLoad屬性，這一屬性能夠使得網頁調用getDataNext()而初始化。這一功能可用於從XML文檔中獲得下一個值並顯示在表單中。我們使用一個簡單的索引來訪問特定的選項。
向前(>>)和向後(<<)按鈕都使用相同的機制。首先回響onClick事件而調用getDataNext() 或者getDataPrev()，這兩個函式使用了邏輯方法以避免文檔以外的範圍訪問我們的記錄。
==========================================================================
<script language="JavaScript">
<!--
var doc = new ActiveXObject("Msxml2.DOMDocument"); //ie5.5+,CreateObject("Microsoft.XMLDOM")
//載入文檔
//doc.load("b.xml");
//創建檔案頭
var p = doc.createProcessingInstruction("xml","version="1.0" encoding="gb2312"");
//添加檔案頭
doc.appendchild(p);
//用於直接載入時獲得根接點
//var root = doc.documentElement;
//兩種方式創建根接點
// var root = doc.createElement("students");
var root = doc.createNode(1,"students","");
//創建子接點
var n = doc.createNode(1,"ttyp","");
//指定子接點文本
//n.text = " this is a test";
//創建孫接點
var o = doc.createElement("sex");
o.text = "男"; //指定其文本
//創建屬性
var r = doc.createAttribute("id");
r.value="test";
//添加屬性
n.setAttributeNode(r);
//創建第二個屬性
var r1 = doc.createAttribute("class");
r1.value="tt";
//添加屬性
n.setAttributeNode(r1);
//刪除第二個屬性
n.removeAttribute("class");
//添加孫接點
n.appendChild(o);
//添加文本接點
n.appendChild(doc.createTextNode("this is a text node."));
//添加注釋
n.appendChild(doc.createComment("this is a comment\n"));
//添加子接點
root.appendChild(n);
//複製接點
var m = n.cloneNode(true);
root.appendChild(m);
//刪除接點
root.removeChild(root.childNodes(0));
//創建數據段
var c = doc.createCDATASection("this is a cdata");
c.text = "hi,cdata";
//添加數據段
root.appendChild(c);
//添加根接點
doc.appendChild(root);
//查找接點
var a = doc.getElementsByTagName("ttyp");
//var a = doc.selectNodes("//ttyp");
//顯示改接點的屬性
for(var i= 0;i<a.length;i++)
{
alert(a[i].xml);
for(var j=0;j<a[i].attributes.length;j++)
{
alert(a[i].attributes[j].name);
}
}
//修改節點,利用XPATH定位節點
var b = doc.selectSingleNode("//ttyp/sex");
b.text = "女";
//alert(doc.xml);
//XML保存（需要在服務端，客戶端用FSO）
//doc.save();
//查看根接點XML
if(n)
{
alert(n.ownerDocument.xml);
}
//-->
</script>
==============================================================================
一般從服務端的返回可以得到一個XML對象。
例如伺服器返回的：xmlhttpRequest.ResponseXML
這裡的XMLHttpRequest就是ajax的核心對象。
在IE下可以這樣創建：xmlHttp = new ActiveXObject("Microsoft.XMLHTTP").
javascript操作XML先創建一個XML DOM對象：var dom = new ActiveXObject("Microsoft.XMLDOM");
然後dom.loadXML（ResponseXML）就ok了。
接下來就可以操作xml，獲取內容了。
一些常用的函式如下（一些在網上收集的，一些時平時老大教的）：
Microsoft.XMLDOM 對象常用的屬性：
1、attributes 屬性，返回當前節點的屬性列表
2、childNodes 屬性，返回當前節點的所有子節點列表
3、documentElement 屬性，返回xml檔案的根節點，通過Microsoft.XMLDOM對象名來調用
4、firstChild 屬性、lastChild 屬性，返回當前節點的第一個子（最後一個）元素（如果沒有子節點是不是返回
第一個屬性？）
5、nextsibling （previousSibling ）屬性，下一個兄弟節點。
6、nodeName 屬性，返回節點的標籤名字
7、nodeValue 屬性，傳回指定節點相關的文字（不是屬性，就是*號的這個內容 **）
8、ownerDocument 屬性，根節點
9、parentNode 屬性，傳回目前節點的父節點。只能套用在有父節點的節點中。
搞一個例子：
function Add()
{
var dom = new ActiveXObject("Microsoft.XMLDOM");
dom.loadXML(ret);
if (dom.documentElement != null)
{
var nodes = dom.documentElement.selectNodes("//SelectItem"); //得到根節點下所有SelectItem節點
if (nodes != null)
{
for(var i=0;i
一些常用的函式：
1、AppendChild 方法，加上一個節點當作指定節點最後的子節點。
2、cloneNode（deep）方法，deep 是一個布爾值。如果為true，此節點會複製以指定節點發展出去的所有節
點。如果是false，只有指定的節點和它的屬性被複製。
3、createAttribute(name)方法，建立一個指定名稱的屬性。
4、createElement 方法，建立一個指定名稱的元素。
5、xmlDocument.createNode(type, name, nameSpaceURI);type 用來確認要被建立的節點型態，name 是一個字元
串來確認新節點的名稱，命名空間的前綴則是選擇性的。nameSpaceURI 是一個定義命名空間URI 的字
符串。如果前綴被包含在名稱參數中，此節點會在nameSpaceURI 的內文中以指定的前綴建立。如果不
包含前綴，指定的命名空間會被視為預設的命名空間。
6、getElementsByTagName 方法，傳回指定名稱的元素集合。
7、haschildnodes 方法，要解釋嗎？
8、insertBefore 方法，在指定的節點前插入一個子節點。xmlDocumentNode.insertBefore
(newChild,refChild);refChild 是參照節點的地址。新子節點被插到參照節點之前。如果refChild 參數沒有包含
在內，新的子節點會被插到子節點列表的末端。
9、load 方法和loadXML 方法，前這從url，後者從字元串片斷。
10、nodeFromID 方法，傳回節點ID 符合指定值的節點。
11、removeChild 方法和replaceChild(newChild,oldChild)，顧名思義
12、selectNodes和selectSingleNode 方法，傳回所有符合提供樣式的節點。參數為一包含XSL 樣式的字元串。
以下收集了一些MSDN的例子
(1)
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
var rootElement=xmlDoc.createElement("memo");
xmlDoc.appendChild(rootElement);(2) var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
var rootElement=xmlDoc.createElement("memo");
rootElement.setAttribute("author", "Pat Coleman"); //屬性author的值為Pat Coleman
xmlDoc.appendChild(rootElement);
(3) var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
var rootElement=xmlDoc.createElement("memo");
var memoAttribute=xmlDoc.createAttribute("author");
var memoAttributeText=xmlDoc.createTextNode("Pat Coleman");
memoAttribute.appendChild(memoAttributeText);
rootElement.setAttributeNode(memoAttribute);
xmlDoc.appendChild(rootElement);
//這個例子和(2)同樣效果，但是用不同的方法，這裡把attribute也當做一個節點，attribute node的
子節點只可以是textnode，所以這裡要先創建一個textnode在賦給他。
（4）
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
var rootElement=xmlDoc.createElement("memo"); //創建一個元素
var memoAttribute=xmlDoc.createAttribute("author"); //創建一個屬性
var memoAttributeText=xmlDoc.createTextNode("Pat Coleman"); //創建一個文本節點
var toElement=xmlDoc.createElement("to"); //再創建一個元素
var toElementText=xmlDoc.createTextNode("Carole Poland"); //再創建一個文本節點
memoAttribute.appendChild(memoAttributeText);
xmlDoc.appendChild(rootElement);
rootElement.setAttributeNode(memoAttribute);
rootElement.appendChild(toElement);
toElement.appendChild(toElementText);
屬性：
attributes
Contains the list of attributes for this node. Read-only.
baseName
*Returns the base name for the name qualified with the namespace. Read-only.
childNodes
Contains a node list containing the children nodes. Read-only.
dataType
*Specifies the data type for this node. Read/write.
definition
*Returns the definition of the node in the document type definition (DTD) or schema. Read-only.
firstChild
Contains the first child of the node. Read-only.
lastChild
Returns the last child node. Read-only.
name
Contains the attribute name. Read-only.
namespaceURI
*Returns the Uniform Resource Identifier (URI) for the namespace. Read-only.
nextSibling
Contains the next sibling of this node in the parent's child list. Read-only.
nodeName
Contains the qualified name of the element, attribute, or entity reference, or a fixed string for other node types. Read-only.
nodeType
Specifies the XML Document Object Model (DOM) node type, which determines valid values and whether the node can have child nodes. Read-only.
nodeTypedValue
*Contains the node value expressed in its defined data type. Read/write.
nodeTypeString
*Returns the node type in string form. Read-only.
nodeValue
Contains the text associated with the node. Read/write.
ownerDocument
Returns the root of the document that contains the node. Read-only.
parentNode
Contains the parent node. Read-only.
parsed
*Indicates the parsed status of the node and child nodes. Read-only.
prefix
*Returns the namespace prefix. Read-only.
previousSibling
Contains the previous sibling of this node in the parent's child list. Read-only.
specified
Indicates whether the node (usually an attribute) is explicitly specified or derived from a default value in the document type definition (DTD) or schema. Read-only.
text
Represents the text content of the node or the concatenated text representing the node and its descendants. Read/write.
value
Contains the attribute value. Read/write.
xml
Contains the XML representation of the node and all its descendants. Read-only.
方法：
appendChild
Appends new child node as the last child of this node.
cloneNode
Clones a new node.
hasChildNodes
Provides a fast way to determine whether a node has children.
insertBefore
Inserts a child node to the left of the specified node or at the end of the list.
removeChild
Removes the specified child node from the list of children and returns it.
replaceChild
Replaces the specified old child node with the supplied new child node.
selectNodes
Applies the specified pattern-matching operation to this node's context and returns the list of matching nodes as IXMLDOMNodeList.
selectSingleNode
Applies the specified pattern-matching operation to this node's context and returns the first matching node.
transformNode
Processes this node and its children using the supplied XSL Transformations (XSLT) style sheet and returns the resulting transformation.
transformNodeToObject
Processes this node and its children using the supplied XSL Transformations (XSLT) style sheet and returns the resulting transformation in the supplied object.
