(2005.12.13、Safariに関する変更事項を追加)
Mac版Excelで保存したXMLデータを表（テーブルとして）表示するサンプルです（Windows用のOfficeは新しいのを持っていないのでWindows版のExcelで保存したXMLデータが利用できるかどうかは未確認です）。
まず、最初にサーバーと通信するためのXMLHttpオブジェクトを作成します。ここでは動作させるブラウザを
Windows版、Internet Explorer 6、Firefox、Netscape 6以降、Opera 8
Macintosh版、Safari、Firefox、Netscape 6以降
としています。Windows版のInternet Explorer 6とそれ以外ではオブジェクトが異なるためサンプルの緑色の部分のようにtry...catchを使ってオブジェクトが利用できない場合にnullを返すようにしています。XMLHttpオブジェクトが作成できたら念のため（勉強用なので）作成状況を表示します。もし、何らかの原因でオブジェクトが作成できない場合にはnullを返します。無事にオブジェクトが作成できた場合にはオブジェクト名を表示します（紫色の部分。Windows版Internet Explorer 6では正常な場合には何も表示しません。）
次にExcelで作成されたXMLをサーバーから取得します。これは青字の部分になります。サンプルではdata.xmlという名前のXMLファイルを読み込んでいます。
サーバーとの通信が開始されるとcheck関数が呼び出されます。ステータスが4の場合には読み込み完了という事になります。読み込みが完了してもファイルが取得できていないと困ります。正常にファイルが取得できた場合にはステータスコードが200になりますので、この２つの条件を満たした場合にセルのデータを表示します。
セルのデータを表示しますが、ここでは
・ワークシートは先頭の１つのみ
・セルのデータは先頭から表示するのみ（正しく解析はしていない）
としています。まず、セルの横の数ですがXMLデータの青文字の部分
ss:ExpandedColumnCount="2"
の値を取得します。この属性の値の取得方法は以下のようになります。
cObj = xmlDoc.getElementsByTagName("Table");
cellW = cObj[0].getAttribute("ss:ExpandedColumnCount");
（Safari ではこの方法では取得できないので後述します）
属性はgetAttribute("取得する属性名")のように指定すると設定されている値を読み出す事ができます。同様にセルの縦方向の数はXMLデータの緑文字の部分
ss:ExpandedRowCount="4"
の値を取得します。
あとはセルデータを読み出して表示します。セルのデータは<data>タグにセルの内容が入っているのでgetElementsByTagNameを使ってタグの情報を取得します（dataタグの一覧を取得できます）。テーブルの横の数と縦の数だけ繰り返しセルデータを表示すればページ上にエクセルのデータを表（テーブル）として表示させることができます。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ajax test</title>
<script language="javascript"><!--
function getIndex() {
xmlhttp = createXMLHttp();
if (xmlhttp)
{
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', 'data.xml');
xmlhttp.send(null);
}else{
alert("XMLHttpRequest失敗");
}
}
function check()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmlDoc = xmlhttp.responseXML;
cObj = xmlDoc.getElementsByTagName("Table");
cellW = cObj[0].getAttribute("ss:ExpandedColumnCount");
cellH = cObj[0].getAttribute("ss:ExpandedRowCount");
d = xmlDoc.getElementsByTagName("Data");
result = "<table border='1' bordercolor='black'>";
i=0;
for (h=0; h<cellH; h++)
{
result += "<tr>";
for (w=0; w<cellW; w++)
{
n = h * cellW + w;
result += "<td>"+d[n].childNodes[0].data + "</td>";
}
result += "</tr>";
}
result += "</table>";
document.getElementById("disp").innerHTML = result;
}
}
// XMLHttpsオブジェクト作成
function createXMLHttp()
{
try {
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
return null;
}
// --></script>
</head>
<body>
<a href="javascript:getIndex()">Excelデータ (XML) 読み込み</a>
<div id="disp"></div>
</body>
</html>
【ExcelのXMLデータ：若干修正】
<?xml version="1.0" encoding="utf-8" ?>
<Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:x="urn:schemas-microsoft-com:office:excel"
xmlns:html="http://www.w3.org/TR/REC-html40"
xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">
<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office">
<Author>古籏 一浩</Author>
<LastAuthor>古籏 一浩</LastAuthor>
<Created>2005-05-28T14:03:04Z</Created>
<Version>11.256</Version>
</DocumentProperties>
<OfficeDocumentSettings xmlns="urn:schemas-microsoft-com:office:office">
<AllowPNG/>
</OfficeDocumentSettings>
<ExcelWorkbook xmlns="urn:schemas-microsoft-com:office:excel">
<WindowHeight>17900</WindowHeight>
<WindowWidth>21040</WindowWidth>
<WindowTopX>-20</WindowTopX>
<WindowTopY>-20</WindowTopY>
<Date1904/>
<AcceptLabelsInFormulas/>
<ProtectStructure>False</ProtectStructure>
<ProtectWindows>False</ProtectWindows>
</ExcelWorkbook>
<Styles>
<Style ss:ID="Default" ss:Name="Normal">
<Alignment ss:Vertical="Bottom"/>
<Borders/>
<Font ss:FontName="ＭＳ Ｐゴシック" x:CharSet="128" ss:Size="11.0"/>
<Interior/>
<NumberFormat/>
<Protection/>
</Style>
</Styles>
<Worksheet ss:Name="Sheet1">
<Table ss:ExpandedColumnCount="2" ss:ExpandedRowCount="4" x:FullColumns="1"
x:FullRows="1" ss:DefaultColumnWidth="77.0" ss:DefaultRowHeight="17.0">
<Column ss:AutoFitWidth="0" ss:Width="111.0"/>
<Row>
<Cell><Data ss:Type="String">JavaScript Book</Data></Cell>
<Cell><Data ss:Type="Number">12.0</Data></Cell>
</Row>
<Row>
<Cell><Data ss:Type="String">HTML Book</Data></Cell>
<Cell><Data ss:Type="Number">17.0</Data></Cell>
</Row>
<Row>
<Cell><Data ss:Type="String">CSS Book</Data></Cell>
<Cell><Data ss:Type="Number">25.0</Data></Cell>
</Row>
<Row>
<Cell><Data ss:Type="String">RSS Book</Data></Cell>
<Cell><Data ss:Type="Number">9.0</Data></Cell>
</Row>
</Table>
<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
<PageSetup>
<Header x:Margin="0.512"/>
<Footer x:Margin="0.512"/>
<PageMargins x:Bottom="0.984" x:Left="0.787" x:Right="0.787" x:Top="0.984"/>
</PageSetup>
<PageLayoutZoom>0</PageLayoutZoom>
<Selected/>
<Panes>
<Pane>
<Number>3</Number>
<ActiveRow>4</ActiveRow>
</Pane>
</Panes>
<ProtectObjects>False</ProtectObjects>
<ProtectScenarios>False</ProtectScenarios>
</WorksheetOptions>
</Worksheet>
<Worksheet ss:Name="Sheet2">
<Table ss:ExpandedColumnCount="0" ss:ExpandedRowCount="0" x:FullColumns="1"
x:FullRows="1" ss:DefaultColumnWidth="77.0" ss:DefaultRowHeight="17.0"/>
<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
<PageSetup>
<Header x:Margin="0.512"/>
<Footer x:Margin="0.512"/>
<PageMargins x:Bottom="0.984" x:Left="0.787" x:Right="0.787" x:Top="0.984"/>
</PageSetup>
<PageLayoutZoom>0</PageLayoutZoom>
<ProtectObjects>False</ProtectObjects>
<ProtectScenarios>False</ProtectScenarios>
</WorksheetOptions>
</Worksheet>
<Worksheet ss:Name="Sheet3">
<Table ss:ExpandedColumnCount="0" ss:ExpandedRowCount="0" x:FullColumns="1"
x:FullRows="1" ss:DefaultColumnWidth="77.0" ss:DefaultRowHeight="17.0"/>
<WorksheetOptions xmlns="urn:schemas-microsoft-com:office:excel">
<PageSetup>
<Header x:Margin="0.512"/>
<Footer x:Margin="0.512"/>
<PageMargins x:Bottom="0.984" x:Left="0.787" x:Right="0.787" x:Top="0.984"/>
</PageSetup>
<PageLayoutZoom>0</PageLayoutZoom>
<ProtectObjects>False</ProtectObjects>
<ProtectScenarios>False</ProtectScenarios>
</WorksheetOptions>
</Worksheet>
</Workbook>
Safariの場合、上記のスクリプトでは動作しません。これはgetAttributeで以下のように指定した場合、属性の値が取得できないためです。（他のタグの属性は取れるが、ss:〜となっているのが駄目らしい。よく分からないので知っている方がいたら[email protected]までメールをいただけると助かります）
cellW = cObj[0].getAttribute("ss:ExpandedColumnCount");
cellH = cObj[0].getAttribute("ss:ExpandedRowCount");
仕方ないので属性の順番決め打ちという、好ましくない方法で対処します。（配列の添字の代わりに名前を指定してもエラーなので仕方ない）
cellW = cObj[0].attributes[0].value;
cellH = cObj[0].attributes[1].value;
このように変更するとSafariでも動くようになります。他のブラウザでも動作しますが、属性の出現順番が決め打ちされているため、実際にはこのような書き方は駄目なのですが、とりあえず現時点(2005.12.13)では、これで解決したとして保留しておくことにしたいと思います。
【サンプルを実行する】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ajax test</title>
<script language="javascript"><!--
function getIndex() {
xmlhttp = createXMLHttp();
if (xmlhttp)
{
xmlhttp.onreadystatechange = check;
xmlhttp.open('GET', 'data.xml');
xmlhttp.send(null);
}else{
alert("XMLHttpRequest失敗");
}
}
function check()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
xmlDoc = xmlhttp.responseXML;
cObj = xmlDoc.getElementsByTagName("Table");
// cellW = cObj[0].getAttribute("ss:ExpandedColumnCount");
// cellH = cObj[0].getAttribute("ss:ExpandedRowCount");
cellW = cObj[0].attributes[0].value;
cellH = cObj[0].attributes[1].value;
d = xmlDoc.getElementsByTagName("Data");
result = "<table border='1' bordercolor='black'>";
i=0;
for (h=0; h<cellH; h++)
{
result += "<tr>";
for (w=0; w<cellW; w++)
{
n = h * cellW + w;
result += "<td>"+d[n].childNodes[0].data + "</td>";
}
result += "</tr>";
}
result += "</table>";
document.getElementById("disp").innerHTML = result;
}
}
// XMLHttpsオブジェクト作成
function createXMLHttp()
{
try {
return new ActiveXObject ("Microsoft.XMLHTTP");
}catch(e){
try {
return new XMLHttpRequest();
}catch(e) {
return null;
}
}
return null;
}
// --></script>
</head>
<body>
<a href="javascript:getIndex()">Excelデータ (XML) 読み込み</a>
<div id="disp"></div>
</body>
</html>