Ajax練習例題

XMLHttpRequestで色々なデータ形式を読み込む実行用プログラムと説明。

  1. 基本方法でブラウザ対策とキャッシュ対策をして、テキスト・HTMLファイルを読み込む。
  2. prototype.jsを利用してXHRを簡素化、テキストファイルの通信内容をブラウザ上に差し込む。
  3. prototype.jsの利用。CSVファイルを読み込み,表組で表示する。
  4. XMLファイルを読み込み、DOM解析により"username"タグ内の名前をすべて表示する。
  5. 起動時にワード文書のXML保存ファイルを読み込み、Lib_MSWord.jsを使用して文書を表示する。
  6. ワード文書のXML保存ファイルを読み込む、prototype.jsだけで文書内容を表示する。。
  7. ワード文書のXML保存ファイルを読み込み、指定の文字を検索しハイライトした文書を表示する。
  8. エクセル文書のXML保存ファイルを読み込み、Lib_Excel.jsの利用で表形式で表示する。
  9. エクセル文書のXML保存ファイルを読み込み、prototype.jsだけで表形式で表示する。
  10. JSONファイルを読み込み、表示する
  11. JSON配列ファイルを読み込み、枠組みで表示する。

基本方法でブラウザ対策とキャッシュ対策をして、テキスト・HTMLファイルを読み込む。

    練習01(AjaxTest01.html)
//pinTestL.txt  TEXT/CSVデータ  データをカンマでつないで1行にする。
    1001, p.ochi, teacher
    1002, m.kamimura, enginer
//pinHTML.html  HTMLデータ  データをテーブルの部分だけにする。
    <table border="1">
    <tr><td>1001</td><td>p.ochi</td><td>teacher</td></tr>
    <tr><td>1002</td><td>m.kamimura</td><td>enginer</td><tr>
    </table>
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,テキスト・HTMLファイルを読み込む - 01</title>
    <script type="text/javascript"><!--
        function loadText(fname) {
          ;try { pinObject = new XMLHttpRequest(); }            //FireFoxなどのブラウザ用
          catch(e) { pinObject = new ActiveXObject("Microsoft.XMLHTTP"); }    //IEのブラウザ用
            pinObject.onreadystatechange = statusCheck;      //statusをチェックする関数へ
            var fileName = fname + "?cache=" + (new Date()).getTime();    //キャプション対策
            pinObject.open("GET", fileName, true);          //非同期で開く
            pinObject.send(null);
        }
        function statusCheck() {
            if ( pinObject.readyState == 4 && (pinObject.status == 200)) {    //通信完了を確認
              document.getElementById("result").innerHTML = pinObject.responseText;
              //  alert(pinObject.responseText);        //ポップアップで通信内容を表示
            }
        ;}
    // --></script>
  </head>
  <body>
    <h1>テキストファイルをロードして表示する</h1> <form>
        <input type="button" value="テキストファイル読み込み" onClick="loadText('pinTestL.txt')"><br/>
        <input type="button" value="HTMLファイル読み込み" onClick="loadText('pinHTML.html')"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

prototype.jsを利用してXHRを簡素化、テキストファイルの内容をブラウザ上に差し込む。
ファイルが存在しない場合に正しく機能していない。

    練習02(AjaxTest02.html)
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,テキストファイルを読み込む - 02</title>
    <script type="text/javascript" src="prototype.js"></script>    //ライブラリ取得
    <script type="text/javascript"><!--
        function loadText(fName) {
            var fileName = fName + "?cache=" + (new Date()).getTime();
          	new Ajax.Request(fileName, { method: "get",            //ライブラリ利用で簡素化
              onSuccess: displayData            //正常終了時に関数へ
              onFailure: displayError          //読み込み失敗のとき関数へ(エラー)
            });
        }
        function displayData(pinObject) {
            $("result").innerHTML = pinObject.responseText;        //id="result"のタグ内に通信内容を差し込む
        }
        function displayError(pinObject) {                  //エラー(失敗時ここに来ない!)
            $("result").innerHTML = 'ファイルがありません';      //通信データの異常を報告表示
            $("result").innerHTML += pinObject.status;          //通信データの状態値を表示
        }
    // --></script>
  </head>
  <body>
    <h1>prototype.jsの利用とエラー処理&テキストをロードして表示する</h1>
    <form>
      <input type="button" value="テキストファイル読み込み" onClick="loadText('pinTest.txt')"><br/>
      <input type="button" value="存在しないファイル読み込み" onClick="loadText('no.txt')"><br/>
      <input type="button" value="HTMLファイル読み込み" onClick="loadText('pinHTML.html')" > <br/ >
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

prototype.jsの利用。CSVファイルを読み込み,表組で表示する。

    練習03(AjaxTest03.html)
//pinTestL.csv  TEXT/CSVデータ  データをカンマでつないで1行にする。
    1,鹿児島郡三島村,8900000
    2,鹿児島市,8900000
    3,鹿児島市千年,8900001
    4,鹿児島市西伊敷,8900002
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,CSVファイルを読み込み表組で表示する - 03</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript"><!--
        function loadText(fName) {
            var fileName = fName + "?cache=" + (new Date()).getTime();
            new Ajax.Request(fileName, { method: "get",
                onSuccess: displayData});
        }
        function displayData(pinObject) {
            var textLine = pinObject.responseText;
            if (textLine.substr(textLine.length-2,2)=="\r\n") {
                textLine = textLine.substr(0, textLine.length-2); }
              textLine = '<table border="1" cellspacing="0"><tr><td>' + textLine;
              repWord = new RegExp(",", "g");
              textLine = textLine.replace(repWord, "</td><td>");
              repWord = new RegExp("\r\n", "g");
              textLine = textLine.replace(repWord, "</td></tr><tr><td>");
              textLine = textLine; + '</td></tr></table>'
              $("result").innerHTML = "<br/>"+textLine;   //  テキストを表示
        }
    // --></script>
  </head>
  <body>
    <h1>prototype.jsの利用とCSVファイルを読み込み表組で表示する</h1>
    <form>
     <input type="button" value="CSVファイル読み込み" onClick="loadText('pinTest.csv')"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

XMLファイルを読み込み、DOM解析により"username"タグ内の名前をすべて表示する。

firefoxはIEと異なり改行やタブも「空のノード」と解釈するので添え字番号が狂う,データは改行やタグを省略する。
    練習04(AjaxTest04.html)
//pinTest.xml    XMLデータ    名前のタグでデータをそれぞれくくる。一人分ずつをタグでくくってまとめる。
  <?xml version="1.0" encoding="UTF-8"?>
  <list>
    <user>
      <id>1001</id>
      <username>pin_ochi</username>
      <job>taeacher</job>
    </user>
    <user>
      <id>1002</id>
      <username>man_kamimura</username>
      <job>enginer</job>
    </user>
  </list>
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,XMLファイルを読み込む - 04</title>
    <script type="text/javascript" src="prototype.js"></script>    //ライブラリ取得
    <script type="text/javascript"><!--
        function loadXml() {
            var fileName ="pinTest.xml?cache=" + (new Date()).getTime();     //  最新データの取得
            new Ajax.Request(fileName, { method: "get",
                onComplete: displayData });                  //  通信が完了したときコールバック関数へ
        }
        function displayData(pinObject) {
            var nameLine = "";
            var xmlObject = pinObject.responseXML;
            var tagObject = xmlObject.getElementsByTagName("username");    //  タグ指定で要素を取得
            for (var i= 0; i<tagObject.length; i++) {
                var uName = tagObject[i].childNodes[0].nodeValue;          //  要素の内容(名前)を取得
                nameLine += uName + "<br/>";          //  名前をつなげる
            }
            $("result").innerHTML += nameLine;          //  名前を挿入
        }
    // --></script>
  </head>
  <body>
    <h1>XMLファイルをロードして全ユーザー名を表示する</h1>
    <form>
      <input type="button" value="テキストファイル読み込み" onClick="loadXml()"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

起動時にワード文書のXML保存ファイルを読み込み、文書を表示する。

    練習05(AjaxTest05.html)  Lib_MSWord.jsの利用
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,ワードXML保存ファイルを読み込む - 05</title>
      <link rel="stylesheet" type="text/css" href="../css/base02.css" media="screen"/> 
      <link rel="stylesheet" type="text/css" href="mycss.css" media="screen"/> 
    <script type="text/javascript" src="prototype.js"></script>    //ライブラリ取得
     <script type="text/javascript" src="Lib_MSWord.js"></script>    //ワード用ライブラリ取得
    <script type="text/javascript"><!--
        function loadXml() {
            var fileName ="pinWord.xml?cache=" + (new Date()).getTime();
            new Ajax.Request(fileName, { method: "get",
                onComplete: displayData });
        }
        function displayData(pinObject) {
            var allLine = "";
            var xmlObject = pinObject.responseXML;
            var docObject = getDocumentBody(xmlObject);          //  ドキュメントルート取得
            var paragraph = getParagraph(docObject);          //  段落のデータ取得
            for (var i= 0; i<paragraph.length; i++) {
              var oneLine = "";
              var wordData = getWordBlock(paragraph[i]);          //  各段落テキストデータ取得
              for (var j= 0; j<wordData.length; j++) {
                  oneLine += getWordBlockText(wordData[j]);    //  各文節テキストをつなげる
              }
              allLine += oneLine + "<br/>";       //  各段落をつなげる
            }
              $("result").innerHTML = allLine + "<br/>";       //  文章を表示
        }
    window.onload = loadXml;          //  起動時にXMLを取得する
    // --></script>
  </head>
  <body>
    <h1>ワード文書のXML保存ファイルをロードしてテキストを表示する</h1>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

ワード文書のXML保存ファイルを読み込む、prototype.jsだけで文書内容を表示する。

ただし、数字やアルファベットを分割してあるため、段落を判別でず全文つながった文章になる。
ワードの分割は練習06を、allLine += docText + <br/>; とすればわかる。
    練習06(AjaxTest06.html)
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,ワードXML保存ファイルを読み込む - 06</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript"><!--
        function loadXml() {
            var fileName ="pinWord.xml?cache=" + (new Date()).getTime();     //  最新データの取得
            new Ajax.Request(fileName, { method: "get",
                onComplete: displayData });
        }
        function displayData(pinObject) {
            var allLine = "";
            var xmlObject = pinObject.responseXML;
            if(window.createPopup) var textTag ="w:t"; else  var textTag ="t";    //  IE用か以外用
            var tagObject = xmlObject.getElementsByTagName(textTag);    //  タグ指定のデータ取得
            for (var i= 0; i<tagObject.length; i++) {
              var docText = tagObject[i].childNodes[0].nodeValue;          //  各タグの内容を取得
              allLine += docText;          //  テキストをつなげる
             }
              $("result").innerHTML = allLine;          //  テキストを表示
        }
    window.onload = loadXml;          //  起動時にXMLを取得する
    // --></script>
  </head>
  <body>
    <h1>ワードXML保存ファイルをロードして内容を表示する</h1>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

ワード文書のXML保存ファイルを読み込み、指定の文字を検索しハイライトした文書を表示する。

    練習07(AjaxTest07.html)
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,ワードXML保存ファイルを検索する - 07</title>
    <style type="text/css"><!--
        span { color:red; background-color:#ffd; }
    --></style>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript"><!--
        function wordSearch() {
          $("result").innerHTML = "";
          loadXml();
        }
        function loadXml() {
            var fileName ="pinWord.xml?cache=" + (new Date()).getTime();     //  最新データの取得
            new Ajax.Request(fileName, { method: "get",
                onComplete: displayData });
        }
        function displayData(pinObject) {
            var xmlObject = pinObject.responseXML;
            if(window.createPopup) var tagName ="w:t"; else  var tagName ="t";    //  IE用か以外
            var tagObject = xmlObject.getElementsByTagName(tagName);    //  タグ指定のデータ取得
            var textLine = "";
            for (var i= 0; i<tagObject.length; i++) {
              textLine += tagObject[i].childNodes[0].nodeValue;          //  各タグの内容を取得
             }
            var sWord = $F("serchWord");          //  入力ボックスから検索語を取得
            var data = textLine.match(sWord);          //  検索語が有るかをチェック
            if (data != null) {
              repWord = new RegExp(sWord, "g");                        //  検索語を見つけspanではさむ
              textLine = textLine.replace(repWord, "<span>"+sWord+"</span>");
              $("result").innerHTML += "pinWord.xml<br/>"+textLine+"<hr/>";   //  テキストを表示
            } else {
              $("result").innerHTML += "pinWord.xml に該当なし";
            }
        }
    window.onload = loadXml;          //  起動時にXMLを取得する
    // --></script>
  </head>
  <body>
    <h1>ワードXML保存ファイルを検索・表示する</h1>
    <form>
     <input type="text" value="ワード" id="serchWord">
     <input type="button" value="検索する" onClick="wordSearch()"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

エクセル文書のXML保存ファイルを読み込み、表形式で表示する。

    練習08(AjaxTest08.html)  Lib_Excel.jsの利用
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Lib_Excel.js利用で,エクセルXML保存ファイルを表示する - 08</title>
      <link rel="stylesheet" type="text/css" href="../css/base02.css" media="screen"/> 
      <link rel="stylesheet" type="text/css" href="mycss.css" media="screen"/> 
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="Lib_Excel.js"></script>
    <script type="text/javascript"><!--
        function loadXml() {
            var fileName ="pinExcel.xml?cache=" + (new Date()).getTime();     //  最新データの取得
            new Ajax.Request(fileName, { method: "get",
                onComplete: displayData });
        }
        function displayData(pinObject) {
            var sheetName = "Sheet1";
            var xmlObject = pinObject.responseXML;
            var sheetObject = getWorkSheet(xmlObject, sheetName);     //  Sheet1だけの取得
            var pCol = getWorkSheetColCount(sheetObject);     //  列数pColの取得
            var pRow = getWorkSheetRowCount(sheetObject);     //  行数pRowの取得
            var resultData = "<table border='1' cellspacing='0'>";
            for (var j= 0; j<pRow; j++) {
              resultData += "<tr>";
               for (var i= 0; i<pCol; i++) {
                var n = getCellData(xmlObject, sheetName,i,j);     //  各cellデータの取得
                resultData += "<td>" + n + "</td>";
              }
              resultData += "</tr>";
            }
            resultData += "</table>";
            $("result").innerHTML = resultData;        //  表組を挿入・表示
        }
    // --></script>
  </head>
  <body>
    <h1>エクセルXML保存ファイルを表示する</h1>
    <form>
      <input type="button" value="エクセルXMLを表示する" onClick="loadXml()"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

エクセル文書のXML保存ファイルを読み込み、表形式で表示する。

    練習081(AjaxTest081.html)  prototype.jsのみ使用
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,エクセルXML保存ファイルを表組みで表示する - 081</title>
      <link rel="stylesheet" type="text/css" href="../css/base02.css" media="screen"/> 
      <link rel="stylesheet" type="text/css" href="mycss.css" media="screen"/> 
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript"><!--
        function loadXml() {
            var fileName ="pinExcel.xml?cache=" + (new Date()).getTime();     //  最新データの取得
            new Ajax.Request(fileName, { method: "get",
                onComplete: displayData });
        }
        function displayData(pinObject) {
            var xmlObject = pinObject.responseXML;
            var tableObj = xmlObject.getElementsByTagName("Table");     //  全tableデータの取得
            var pCol = tableObj[0].getAttribute("ss:ExpandedColumnCount");     //  最初のtableの列数取得
            var pRow = tableObj[0].getAttribute("ss:ExpandedRowCount");     //  0番のtableの行数取得
            var pData = tableObj[0].getElementsByTagName("Data");     //  0番のtableの全cellデータの取得
            var resultData = "<table border='1' cellspacing='0'>";
            for (var j= 0; j<pRow; j++) {
              resultData += "<tr>";
               for (var i= 0; i<pCol; i++) {
                resultData += "<td>" + pData[ j * pCol + i].childNodes[0].data + "</td>";
              }
              resultData += "</tr>";
            }
            resultData += "</table>";
            $("result").innerHTML = resultData;   //  表組を挿入・表示
        }
    // --></script>
  </head>
  <body>
    <h1>エクセルXML保存ファイルを表組みで表示する</h1>
    <form>
      <input type="button" value="エクセルXMLを表示する" onClick="loadXml()"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

10JSONファイルを読み込み、表示する。

JSONはJavaScriptの関数eval()で評価できるデータ形式で {"プロパティ":"値"}の形でプロパティ名で値を取り出せる。
    練習09(AjaxTest09.html)
//pinTest.json    JSONデータ  名前:値を一人分カンマでつなぎ中括弧で包む。
                              { }は入れ子に出来る。文字列は必ずダブルクォートでくくる。
{
 "id" : 1701,
 "name" : "akai",
 "ten" : {"kokugo" : 88,
          "suugaku" : 95,
          "eigo" : 67  }
}
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,JSONファイルを読み込み表示する - 09</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript"><!--
        function loadText(fName) {
            var fileName = fName + "?cache=" + (new Date()).getTime();
            new Ajax.Request(fileName, { method: "get",
                onSuccess: displayData});
        }
        function displayData(pinObject) {
            var evalObject = eval( '(' + pinObject.responseText+')' );    //  括弧を付けてevalに渡す
              var resultData = <br/>;
              resultData +='ID  ' + evalObject.id + '<br/>';    //  各名前で値を読み込む
              resultData +='名前  ' + evalObject.name + '<br/>';
              resultData +='国語  ' + evalObject.ten.kokugo + '<br/>';
              resultData +='数学  ' + evalObject.ten.suugaku + '<br/>';
              resultData +='英語  ' + evalObject.ten.eigo + '<br/>';
            $("result").innerHTML = resultData;                              //  挿入・表示
        }
    // --></script>
  </head>
  <body>
    <h1>prototype.jsの利用とJSONファイルを読み込み表示する</h1>
    <form>
     <input type="button" value="JSONファイル読み込み" onClick="loadText('pinTest.json')"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>

11JSON配列ファイルを読み込み、枠組みで表示する。

    練習096(AjaxTest096.html)
 // pinJSON.json    配列形式のJSONデータは()を付けてeval()に渡せばプロパティで取り扱える。
  {"users":[
    {"id": "1001", "name": "p.ochi", "job": "teacher"},
    {"id": "1002", "name": "m.kamimura", "job": "enginer"}
    ]
  }
//-----------プログラム抜粋---------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Ajaxで,JSON配列ファイルを読み込み表示する - 095</title>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript"><!--
        function loadText(fName) {
            var fileName = fName + "?cache=" + (new Date()).getTime();
            new Ajax.Request(fileName, { method: "get",
                onSuccess: displayData});
        }
        function displayData(pinObject) {
            var dataLine = eval("(" + pinObject.responseText + ")");   //   配列型は( )をつけてeval()に渡す
              var resultData = "<table border='1'>" ;
              for (var i= 0; i<dataLine.users.length; i++) {   // プロパティで値を取り出す
                resultData += "<tr><td>" + dataLine.users[i].id + "</td><td>"
                           + dataLine.users[i].name + "</td><td>"
                            + dataLine.users[i].job + "</td></tr>";
              }
            resultData += "</table>";
            $("result").innerHTML = resultData;   //  挿入・表示
        }
    // --></script>
  </head>
  <body>
    <h1>prototype.jsの利用とJSON配列ファイルを読み込み表示する</h1>
    <form>
     <input type="button" value="JSON配列ファイル読み込み" onClick="loadText('pinJSON.json')"><br/>
    </form>
    この行の下に結果は挿入・表示されます!<br/>
    <div id="result"></div>
  </body>
</html>