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. Apache CouchDB (1 PV)
  2. 今日(2020年6月30日、火曜日)のドル円、ユーロドル、ポンドドル相場予想 #FX #デイトレード #新型コロナ #リスクオフ (1 PV)
  3. [政治と経済]サウジアラビアのサルマン国王が1000人以上の家来を引き連れて来日 (1 PV)
  4. オートファジー(Autophagy) (1 PV)
  5. 経済(けいざい) (1 PV)
  6. [将棋]将棋実況ユーチューバーのクロノさんが朝日新聞のクレームで棋譜中継を配信中止 (1 PV)
  7. [映画]ジョン・カーター (1 PV)
  8. Google News (グーグルニュース)日本版 (1 PV)

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

  1. SQLのSELECT文で先頭から上位(TOP)10件のレコードを取得する方法(SQL Server、Oracle、MySQL、PostgreSQL) (784 PV)
  2. 裁量トレードを自動化する裁量補助EA「AutoScalper Demo」 (181 PV)
  3. Google News (グーグルニュース)日本版 (117 PV)
  4. Google Finance(グーグルファイナンス)- リアルタイム株価情報、金融ニュース、日本株 (101 PV)
  5. 安全性重視の完全無料ナンピンマーチンEA「Million Dollar(ミリオンダラー)」 #FX #ゴールド #ビットコイン (83 PV)
  6. 自作のMT4向け無料EA(口座縛り無し、ブローカー縛り無し、使用期限無し)とゴゴジャン出品中の有料EAの一覧 #MT4 (66 PV)
  7. 裁量トレードを半自動化する無料のMT5向け裁量トレード支援ツール(裁量補助EA)「PositionKeeper MT5」 #FX (56 PV)
  8. [将棋]ユーチューバーのクロノさんが将棋ウォーズ運営からアカウント停止の警告を受ける #ソフト指し #複垢 #アカBAN (52 PV)
  9. 完全無料のMT5用ナンピンEA「Nanpin K(ナンピンケイ) MT5」 (51 PV)
  10. SQLiteのSELECT文で上位 (TOP) n件のデータを取得する (45 PV)

アクセス統計

ディレクトリ

関連サイト