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)
オープン | 0 point | Link (1) | Trackback (0) | Comment (0)
キーワード
追記
| Ajaxについて情報源 | |||
| Ajaxについての詳しい説明は下記のサイトとか、 Ajaxを勉強しよう この本とかが参考になると思います。
|
|||
| 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
- FC2まとめ (5 PV)
- Twitter Lite - 起動時や利用時の読み込み速度が最大30％アップ (3 PV)
- SQLのSELECT文で先頭から上位（TOP）10件のレコードを取得する方法（SQL Server、Oracle、MySQL、PostgreSQL） (3 PV)
- ２ちゃんねる（2ch） (3 PV)
- 大人気のブランド品即時買取サービス「CASH」がDMM.comにたったの70億円で買い叩かれる (2 PV)
- 無料ダイヤルアッププロバイダ「Soloot(ソルート)」 (2 PV)
- ほしい物リスト (2 PV)
- Hg Init: a Mercurial tutorial by Joel Spolsky (2 PV)
- 掲示板CGI ThreadPlus 1.2 のリリース (2 PV)
- RDB（リレーショナルデータベース） (2 PV)
今月のアクセスランキング TOP 10
- FC2まとめ (13 PV)
- 将棋ウォーズPCブラウザ版がchrome、Firefox、edgeなどに対応 (8 PV)
- SQLのSELECT文で先頭から上位（TOP）10件のレコードを取得する方法（SQL Server、Oracle、MySQL、PostgreSQL） (6 PV)
- 掲示板CGI ThreadPlus 1.2 のリリース (5 PV)
- 「Kindle for the Web」 (5 PV)
- Jipanguの配布は終了しました (4 PV)
- [FX]裁量ポジションを簡単に管理できるMT4向け無料の裁量補助EA「PositionKeeper」 (4 PV)
- Twitter Lite - 起動時や利用時の読み込み速度が最大30％アップ (3 PV)
- 「さくらのクラウド」のオプションサービスで「専有ホスト」の提供を開始 (3 PV)
- ドル円(USDJPY)で爆益を狙うハイリスクハイリターンのMT4向けナンピンマーチンEA「Hyper Dollar」 (3 PV)
アクセス統計
ディレクトリ
関連サイト