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や便利な機能の実装を可能にするJavaScript（Ajax）ライブラリのリンク集です。日本語の情報は、jQueryとprototype.jsに関するものが多いようです。jQuery: The Write Less, Do More...

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

トラックバックURL :


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


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

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

< 前の投稿      次の投稿 >

アクセスランキング

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

  1. SQLのSELECT文で先頭から上位（TOP）10件のレコードを取得する方法（SQL Server、Oracle、MySQL、PostgreSQL） (89 PV)
  2. 安全性重視の完全無料ナンピンマーチンEA「Million Dollar（ミリオンダラー）」 #FX #ゴールド #ビットコイン (11 PV)
  3. Google Finance（グーグルファイナンス）- リアルタイム株価情報、金融ニュース、日本株 (8 PV)
  4. [FX]高値更新・安値更新でエントリー、MT4向け無料スキャルピングEA「1Scalper」#システムトレード (7 PV)
  5. 自作のMT4向け無料EA（口座縛り無し、ブローカー縛り無し、使用期限無し）とゴゴジャン出品中の有料EAの一覧 #MT4 (5 PV)
  6. Million Dollar（MT4）リアルフォワード（myfxbook） #Gold(XAUUSD) #ナンピンマーチン (4 PV)
  7. 時間指定で仲値トレードも簡単にできる無料EA「NAKANE3 Ver 2.02」 (4 PV)
  8. 完全無料のMT4向けナンピンEA「Nanpin K（ナンピンケイ）」 (4 PV)
  9. [FX]裁量ポジションを簡単に管理できるMT4向け無料EA「PositionKeeper」 (4 PV)
  10. Google News （グーグルニュース）日本版 (4 PV)

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

  1. SQLのSELECT文で先頭から上位（TOP）10件のレコードを取得する方法（SQL Server、Oracle、MySQL、PostgreSQL） (1519 PV)
  2. 安全性重視の完全無料ナンピンマーチンEA「Million Dollar（ミリオンダラー）」 #FX #ゴールド #ビットコイン (229 PV)
  3. Google Finance（グーグルファイナンス）- リアルタイム株価情報、金融ニュース、日本株 (214 PV)
  4. MT4向けオープンソースナンピンマーチンEA「Automaton」 (129 PV)
  5. 自作のMT4向け無料EA（口座縛り無し、ブローカー縛り無し、使用期限無し）とゴゴジャン出品中の有料EAの一覧 #MT4 (121 PV)
  6. [FX]高値更新・安値更新でエントリー、MT4向け無料スキャルピングEA「1Scalper」#システムトレード (117 PV)
  7. MT4向け1ポジアノマリーEA「DAY TRADING」オープンソースライセンス（GPL3）で公開 #ドル円 (115 PV)
  8. 完全無料のMT5用ナンピンEA「Nanpin K（ナンピンケイ） MT5」 (108 PV)
  9. 完全無料のMT4向けナンピンEA「Nanpin K（ナンピンケイ）」 (98 PV)
  10. SQLiteのSELECT文で上位 (TOP) n件のデータを取得する (86 PV)

アクセス統計

ディレクトリ

関連サイト