開発関連の覚書

■AJAX

最近はAjaxを利用したサイトを頻繁に見かけるようになりました。
実際に利用した事がなかったので、簡単なサンプルを作成し、自分の覚書にしてみました。

■XMLを読み込んでリンクを表示するサンプル

■sample_ajax.html
JavaScript抜粋

function loadXMLFile(fName)
{
  httpObj = createXMLHttpRequest();

  //HTTPレスポンス ステータスコード コールバック関数の設定
  if(httpObj) httpObj.onreadystatechange = displayData;

  if (httpObj) {
      httpObj.open("GET",fName,true);
      httpObj.send(null);
  }
}

function displayData()
{

  var tableData = "";

  if ((httpObj.readyState == 4) && (httpObj.status == 200))
  {
    var objXMLDocument = httpObj.responseXML;

    if (objXMLDocument.documentElement != null) {

      objMemberSetElement = objXMLDocument.getElementsByTagName('bookmark');

      for (var i = 0; i < objMemberSetElement.length; i++) {
        var objMemberElement = (objMemberSetElement.item(i));
        var objMember = new Object();

        //  カテゴリの出力
        if (objMemberElement.getElementsByTagName('category').item(0).firstChild) {

          if(tableData != "") {
              tableData += "</ul>";
          }
          tableData += "<div class='COMMON_SUB_TITLE'>■" +
            objMemberElement.getElementsByTagName('category').item(0).firstChild.nodeValue +
            "</div>" +
            "<div class='COMMON_LINK_TO_PAGE_TOP'>" +
            "<a class='LINK_NONE' HREF='#TOP'>このページの先頭へ</a></div>" +
            "<ul style='list-style-type:disc'>";
        }
        tableData +=  "<li><a class='COMMON_LINK' href='" +
            objMemberElement.getElementsByTagName('href').item(0).firstChild.nodeValue +
            "' target='_blank'>" +
            objMemberElement.getElementsByTagName('name').item(0).firstChild.nodeValue +
            "</a><br>" +
            "<div class='COMMON_LINK_DETAIL'>" +
            objMemberElement.getElementsByTagName('detail').item(0).firstChild.nodeValue +
            "</div>" +
            "<div class='COMMON_LINK_DATE'>リンク設定日:" +
            objMemberElement.getElementsByTagName('linkset').item(0).firstChild.nodeValue +
            "</div>" +
            "</li>";
      }
    }

    $('linkdata').innerHTML =  tableData;
  }
}

function createXMLHttpRequest() {
  xmlHttpObject = null;
  if(window.XMLHttpRequest) { // safari,firefox
      xmlHttpObject = new XMLHttpRequest();
  } else if(window.ActiveXObject){
    try{
        xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP"); // IE6
    }catch(e){
      try{
          xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP"); // IE5
      }catch(e) {
          return null;
      }
    }
  }
  return xmlHttpObject;
}

■sample.xml
表示するXML抜粋
<?xml version="1.0" encoding="UTF-8" ?>
<bookmarkSet>
  <bookmark id="mem001">
    <category>カテゴリ1</category>
    <href>http://prettytabby.syoutikubai.com/remind/remind.html</href>
    <name>開発関連の覚書</name>
    <detail>開発関連の覚書</detail>
    <linkset>-</linkset>
  </bookmark>
  <bookmark id="mem002">
    <category>カテゴリ2</category>
    <href>http://prettytabby.syoutikubai.com/index.html</href>
    <name>修ちゃんの覚書</name>
    <detail>修ちゃんの覚書</detail>
    <linkset>-</linkset>
  </bookmark>
</bookmarkSet>
</PRE></DIV><BR>


■サンプルソース
sample_ajax.html
sample.xml


■AJAXで実装するにあたっての注意事項

getElementsByTagNameを利用する場合には、クロスブラウザを意識する必要があります。
 IEの場合には、タグの中に文字列が無い場合には、NULLという扱いになります。
 そこで、下記のようにスクリプトの中で、変数の有効判定を行わないとエラーになってしまいます。
if (objMemberElement.getElementsByTagName('category').item(0).firstChild) {
   ・・・ 略 ・・・
}



■AJAX関連のリンク