Ajaxの基本的なサンプルプログラム

フォームから入力されたXMLファイルを取得して、その内容を表示するという基本的な処理を行う Ajaxのサンプルプログラムです。

--- jslib.js (Ajaxの処理を行うJavaScritプログラム) ---

// JavaScript library
// jslibs.js
function createXMLHttpRequest(cbFunc) {
  xmlHttpObject = null;
  if (window.XMLHttpRequest) {  // Firefox,Safari,etc (Not IE)
    xmlHttpObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) { //IE
    try {
      xmlHttpObject = new ActiveXObject("Msxml2.XMLHTTP");  // IE6
    } catch(e) {
      try {
        xmlHttpObject = new ActiveXObject("Microsoft.XMLHTTP");  // IE5
      } catch(e) {
        return null;
      }
    }
  }

  if (xmlHttpObject) {
    xmlHttpObject.onreadystatechange = cbFunc;
  }

  return xmlHttpObject;
}

--- sample.html (HTMLファイル) ---

<html>
<head>
<meta http-equiv="content-type content="text/html; charset=utf-8" >
<title>Ajax サンプルアプリ</title>
<script type="text/javascript" src="jslib.js"></script>
<script type="text/javascript"><!--
function loadXML() {
  httpObj = createXMLHttpRequest(dispData);
  if (httpObj) {
    httpObj.open("GET",document.ajaxForm.filename.value,true);
    httpObj.send(null);
  }
}
function dispData() {
  if ((httpObj.readyState == 4) && (httpObj.status == 200)) {
    xmlData = httpObj.responseXML;
    itemList = xmlData.getElementsByTagName("item");
    titleList = xmlData.getElementsByTagName("title");
    urlList = xmlData.getElementsByTagName("url");
    itemNum = itemList.length;
    resultText = "";
    for (i=0; i<itemNum; i++) {
      title = titleList[i].childNodes[0].nodeValue;
      url = urlList[i].childNodes[0].nodeValue;
      resultText = resultText + "<a href=\"" + url + "\">" + title + "</a><br />";
    }
    document.getElementById("result").innerHTML = resultText;
  } else {
    document.getElementById("result").innerHTML = "<b>Now loading.......</b>";
  }
}
// --></script>
</head>
<body>
<h3>Ajax サンプルアプリ</h3>
<form name="ajaxForm">
<input type="text" name="filename" />  
<input type="button" value="Load XML" onClick="loadXML()"><br />
</form>
<div id="result">
<!-- ここに取得したXMLファイルの内容が表示される -->
</div>
</body>
</html>

--- sample.xml (データを格納したXMLファイル) ---

<?xml version="1.0" encoding="utf-8"?>

<items>
  <item>
    <title>語句ログ</title>
    <url>http://59log.com/</url>
  </item>
  <item>
    <title>b-listers</title>
    <url>http://b-listers.net/</url>
  </item>
  <item>
    <title>掲示板型検索エンジン 59bbr.org</title>
    <url>http://59bbs.org/</url>
  </item>
</items>

[1322] Posted by kagahiro at 2009/05/11 14:42:02
オープン | 0 point | Link (1) | Trackback (0) | Comment (0)

キーワード

JavaScript Ajax サンプル プログラム 基本 

ジャパンのホームページ

追記

Ajaxについて情報源
Ajaxについての詳しい説明は下記のサイトとか、



Ajaxを勉強しよう



この本とかが参考になると思います。



入門Ajax 増補改訂版
著者:高橋登史朗
価格:2,709円
ソフトバンククリエイティブ

by Amalink


Posted by kagahiro at 2009/05/11 15:05:17

Ajaxの基本的なサンプルプログラム 関連リンク

JavaScript(Ajax)ライブラリのリンク集
WebアプリケーションでリッチなUIや便利な機能の実装を可能にするJavaScriptAjax)ライブラリのリンク集です。日本語の情報は、jQueryとprototype.jsに関するものが多いようです。jQuery: The Write Less, Do More...

Ajaxの基本的なサンプルプログラム トラックバック

トラックバックURL :


Ajaxの基本的なサンプルプログラムへのコメント


詳細の入力フィールドを表示する

おすすめ  (チェックしてコメントすると最新情報に掲載)
コメント :

< 前の投稿      次の投稿 >

アクセスランキング

今日のアクセスランキング TOP 10

  1. 「Million Dollar MT5」のナンピンマーチン大会(#MCC2023)での設定 (3 PV)
  2. Google Finance(グーグルファイナンス)- リアルタイム株価情報、金融ニュース、日本株 (2 PV)
  3. popIn Rainbow (1 PV)
  4. シックスアパート、次世代ブログサービス「Vox」日本語版のベータ版を開始 (1 PV)
  5. 情報大航海プロジェクトの意義はあるのか (1 PV)
  6. Hatena Developer Center (1 PV)
  7. Postedby という投稿サイト(マイクロブログ)をはじめました (1 PV)
  8. Mozilla Japan、「拡張機能」をテーマとする開発者向けイベントを開催 (1 PV)
  9. ECナビ、開発者向けサービス「ECナビ デベロッパーネットワーク」を開始 (1 PV)
  10. 六本木ヒルズ族(ヒルズ族) (1 PV)

今月のアクセスランキング TOP 10

  1. SQLのSELECT文で先頭から上位(TOP)10件のレコードを取得する方法(SQL Server、Oracle、MySQL、PostgreSQL) (2353 PV)
  2. 安全性重視の完全無料ナンピンマーチンEA「Million Dollar(ミリオンダラー)」 #FX #ゴールド #ビットコイン (1744 PV)
  3. 「Million Dollar MT5」のナンピンマーチン大会(#MCC2023)での設定 (1179 PV)
  4. 自作のMT4向け無料EA(口座縛り無し、ブローカー縛り無し、使用期限無し)とゴゴジャン出品中の有料EAの一覧 #MT4 (698 PV)
  5. 2chまとめサイト - 痛いニュース(ノ∀`) (322 PV)
  6. MT4向け無料ヘッジ(両建て)ツール(EA)「STOPPER FREE」 #自動売買 #FX (306 PV)
  7. 完全無料のMT4向けナンピンEA「Nanpin K(ナンピンケイ)」をバージョンアップ(Ver 2.04) (258 PV)
  8. Google Finance(グーグルファイナンス)- リアルタイム株価情報、金融ニュース、日本株 (246 PV)
  9. DECOLOG(デコログ) (203 PV)
  10. Google News (グーグルニュース)日本版 (202 PV)

アクセス統計

ディレクトリ

関連サイト