Post on 07-Jul-2015
description
Ajaxによる Webアプリケーション開発基礎
清野 克行
http://www.at21.net
superelmer21@gmail.com
1
１ Ajaxの概要 1.1 Ajaxの特徴 1.2 Ajaxを利用したWebアプリケーション例 2. Ajax初めてのプログラム 2.1 XHTMLでの画面定義 2.2 CSSでのスタイル指定 2.3 DOMモデルでのイベント処理 2.4 XMLHttpRequestで非同期通信 2.5 Ajax非同期通信でのデータ表示例 2.6 GET/POSTと同期/非同期の組み合わせパターン [PC実習] 非同期通信でのデータ表示画面作成 3. AjaxでのデータCRUD(登録・参照・更新・削除)処理 3.1 Ajaxでのマスタ登録画面作成方法 3.2 Ajaxでのマスタ参照画面作成方法 3.2 Ajaxでのマスタ更新画面作成方法 [PC実習] Ajaxでのマスタ登録画面作成 Ajaxでのマスタ参照画面作成
基礎編 目次
2
4. Prototype.jsのAjaxフレームワーク 4.1 Ajax.Requestでの非同期通信 4.2 Ajax.Updaterでの非同期通信 4.3 Periodical.Updaterの非同期通信 [PC実習] Ajax.Requestでのマスタ参照画面修正 Ajax.Updaterでのマスタ登録画面修正 4.4 Form.serializeでの登録機能 4.5 $()関数とイテレータでの参照機能 [PC実習] Form.serializeでのマスタ参照画面修正 $()関数とイテレータでの参照画面修正 5.フォームコントロールへのAjax適用 5.1 Ajaxでのラジオボタン処理 5.2 Ajaxでのチェクボックス処理 5.3 Ajaxでのプルダウンメニュー処理 [PC実習] 参照画面をプルダウンメニュー検索に変更 6. .XMLとスタイルシートを使用したデータ交換と操作 6.1 XMLデータ受信での画面表示 6.2 XMLとスタイルシート受信での画面表示 6.3JSONデータ受信での画面表示 6.4XMLデータ受信JSON変換でのデータ表示
3
Ajaxとは
4
Ajax(Asynchronous JavaScript ＋ XML)=A New Approach to Web Applications 2005年2月18日 adaptive pathの Jesse James Garrett のエッセイに初登場
http://www.adaptivepath.com/publications/essays/archives/000385.php
Ajaxの始まり
5
1.XHTMLとCSSを利用したWeb標準での画面構成にする。 standards-based presentation using XHTML and CSS; 2.DOMを使用してイベントでの相互作用と動的な画面表示を行う。 dynamic display and interaction using the Document Object Model; 3.XMLとXSLTを使用したデータ交換と操作を行う。 data interchange and manipulation using XML and XSLT; 4.XMLHttpRequestを使用し非同期でサーバとのメッセージ交換を行う。 asynchronous data retrieval using XMLHttpRequest; 5.JavaScriptによって総ての機能を統合する。 and JavaScript binding everything together.
By:Jesse James Garrett
Adaptive path
Ajaxの定義
Ajax命名者のJesse James Garrettによる
6
Web
GUI
Ajaxモデルでの処理の流れ
JavaScript (Ajaxエンジン)
⑤ 演算処理 ④ 表示制御
サーバ
① イベント処理
② サーバ通信
③ ＵＩ表示 ＸＨＴＭＬ＋ＣＳＳ ・XHTML 画面構成 ・CSS 表示制御
・テキストデータ ・XMLデータ
GET/POST
DOM
7
MODEL
VIEW
CONTROLLER
XML
DB プレゼンテーション
Web UI
AjaxモデルでのWebシステム (SPI=Single Page Interface)
Webクライアント CGI系プログラム
ビジネスロジック
ユーザPC サーバサイド
データアクセス
Ajaxエンジン
Webブラウザ
GET/POST
テキスト XML
データストア
XHR
8
DB
データアクセス
ビジネスロジック
プレゼンテーション
Web
UI-1
従来モデルでのWebシステム (MPI=Multi Page Interface)
Web
UI-2
ユーザPC サーバサイド
HTML画面
GET/POST
9
C/Sクライアント
汎用機ダム端末
Ajaxクライアント
Webクライアント
UIリッチ度
ネットワーク・管理
SOAP
REST
ライブラリ
W3C
UI機能の変遷
10
使用されるソフトウエア技術=Web標準
Ajaxを構成する要素技術は、ほぼ総てがW３C勧告準拠
⇒プラグイン等の設定なして動作可能 ⇒将来の永続的サポートが保障される
[W3C = World Wide Web Consortium]
WWWで利用される技術の標準化をすすめる団体。WWW技術に関わりの深い企業、 大学・研究所、個人などが集まって、1994年10月に発足した。 W3Cの設立には マサチューセッツ工科大学(MIT)やWWWが開発された欧州合同素粒子原子核研究 機構(CERN)などが大きな役割を果たしている。現在では、 ・マサチューセッツ工科大学計算機科学研究所(MIT/LCS)、 ・フランス国立情報処理自動化研究所(INRIA)、 ・日本の慶應義塾大学SFC研究所(Keio-SFC) がホスト機関としてW3Cを共同運営している。 なお、2003年1月にはこのうちINRIAがホストから抜ける予定で、INRIAに代わって 欧州情報処理数学研究コンソーシアム(ERCIM)が欧州からのホスト機関として参加 する。ERCIMはINRIAやFraunhofer-Gesellschaftなど、欧州各国の研究機関からな る組織。
11
Ajax適用の 代表的サイト
12
Ajax適用の代表的サイト
コンシューマ向けサイト ・Ajaxの代表サイトとされるコンシューマサイト Googleマップス、Googleインクリメンタルサーチ ・DynamicHTMLとの類似 画像ファイルのダウンロード ・マッシュアップ(Web2.0) ・既存ソフトとの機能融合(相乗効果)
13
1) Netflix http://www.netflix.com/BrowseSelection?lnkctr=nmhbs
⇒AjaxとDynamicHTMLの境界
14
2) Googleマップ http://maps.google.co.jp/
⇒Ajaxの通信方式を使わない代表的Ajaxサイト
15
3) Googleサジェスト http://www.google.co.jp/webhp?complete=1
⇒典型的なAjax手法を適用したサイト：インクリメンタル検索
16
4) map.rails2u.com http://map.rails2u.com/
⇒Ajax手法の組み合わせ : マッシュアップ
[マッシュアップ] 複数の異なる提供元の技術 やコンテンツを複合させて 新しいサービスを形作ること
17
5) Ajaxでの日本語入力 http://chasen.org/~taku/software/ajax/ime/
⇒Ajaxと既存アプリの組合せ - 日本語入力機能のないOSから日本語入力
18
Ajaxサンプル 業務アプリケーションのＲＩＡ化
仕訳データ入力 UI操作性の向上とプラットホームとしてのWeb
19
20
部品構成表示 再帰呼び出し関数内からの非同期通信
電子商取引システムへのAjax適用
クラス１項目
クラス３項目
クラス２項目
商品
テーブル
ユーザ画面 データベース 管理者画面
登録
登録
登録
登録
参照・更新・削除
参照・更新・削除
参照・更新・削除
Ajax適用
Ajax適用
電子商取引 サイト
全項目
参照・更新・削除
21
22
クラス１項目
クラス２項目
クラス３項目
商品マスタ
電子商取引サイトでの商品表示-操作手順
[大分類]
[中分類]
[小分類]
[商品]
画面ロード
イベント
クリック
クリック
クリック
23
電子商取引サイト画面
24
電子商取引サイト商品情報登録画面
25
Webスプレッドシート応用事例
26
Webスプレッドシートでのグラフ表示例
27
受注情報登録画面のＲＩＡ化
28
受注情報登録とコールバック表示（１）
29
受注情報登録とコールバック表示（２）
Ajax
プログラミング
30
[１]Ajax初めてのプログラム
従業員番号から氏名表示
[操作手順] 1.従業員番号入力 ↓ 2.カーソル移動 ↓ 3.従業員氏名表示
31
デ―タ表示
①
② ③
④
XMLHttpRequest
DOM API
イベントハンドラ ①HTML画面からのイベント発生
↓
②XMLHttpRequestでサーバへの
HTTPリクエスト発行
↓
③サーバでのデータアクセス処理等
↓
④サーバからのデータ送信と
XMLHttpRequestでの受信 ↓
⑤DOM APIへの受信データセット
と表示
XHTML
JavaScript
⑤
⑤
サーバ側
プログラム DB
Ajax初めてのプログラム 処理フロー
テキスト
ファイル
Ajax処理フロー
32
[1] XHTML書式でのフォーム作成とスタイル指定 <?xml version="1.0" encoding=“utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“ja”> <head> <title>従業員番号から氏名表示</title> <script type="text/javascript" src="../lib/funcs.js"></script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示</h3> <table align="center"> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> </body> </html>
Ajax初めてのプログラム – プログラム作成手順
33
<script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function xhrFunc(){ } function initOnLoad(){ } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示</h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" id="emp_no " /></td> <td>従業員氏名:<input type="text" id="emp_name " /></td> </tr> </tbody> </table> </div> </body> </html>
[２] イベントリスナと関数スケルトン記述
34
[３] イベントリスナの設定
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ //非同期通信処理 } function initOnLoad(){ var observer = document.getElementById("emp_no"); //ID値emp_noのノードオブジェクト（INPUTタグ）を変数observerにセット。 setListener(observer, “blur”, xhrFunc); //observerノードのフォーカス移動イベントで関数initOnLoadを呼び出す。 document.getElementById("emp_no").focus(); //ID値emo_noのフィールドにフォーカスを移動する。 } setListener(window, "load", initOnLoad); //画面ロード完了イベントで関数initOnLoadを呼び出す。 //]]> </script>
35
[４] サーバへ非同期リクエストを送る(GET/非同期)
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; // ID値emp_no（INPUTタグ）のキー入力値を変数emp_noにセット。 var xhrObj = getXhrObj(); //非同期通信(XMLHttpRequest)オブジェクトを生成 xhrObj.open("get", "getUniq.php?emp_no="+emp_no); //サーバとの通信をGET/非同期でオープン xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); //キャッシュ回避 //指定時刻以降に更新があった場合はその内容を返す。そうでなければ //304 （Not Modified） を返し、リソースの内容は返さない。 ==== 受信処理 ==== xhrObj.send(null); //リクエストの送信 } //リスナ設定 //]]> </script>
36
function getXhrObj() { var xhrObj; if (window.XMLHttpRequest) { try { xhrObj = new XMLHttpRequest(); } catch (e) { xhrObj = false; } }else if (window.ActiveXObject){ try { xhrObj = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e){ try { xhrObj = new ActiveXObject("Microsoft.XMLHTTP"); } catch (E){ xhrObj = false; } } } return xhrObj; }
XMLHttpRequestオブジェクトの生成 ファイル名：funcs.js
function getEmpName(){ var xhrObj = getXhrObj(); ：
37
[５] データ受信と表示(GET/非同期)
function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; var xhrObj = getXhrObj(); xhrObj.open("get", "getUniq.php?emp_no="+emp_no); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.onreadystatechange = function(){ //readyStateの値が変更のたびに右辺の匿名関数を呼び出す if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ //readyStateが４、statusが200でサーバからのレスポンス受信完了 var emp_name = xhrObj.responseText; //レスポンスデータ（従業員氏名）を変数emp_nameにセット document.getElementById("emp_name").value = emp_name; //従業員指名をID値emp_nameの入力（INPUT）フィールドに表示 } } } xhrObj.send(null); }
38
39
<?php
$emp_no = $_GET[“emp_no”];
$fp = fopen(“empfile.txt”, “r”) or die(“OPENエラー”);
while($data = fgets($fp)){
if(strncmp($data, $emp_no, 5) == 0){
echo substr($data, 5);
break;
}
}
fclose($fp);
?>
GETメソッドでのPHP
① PHPコード記述は <?php で始まり ?> で終わる ② Ajaxではタグ記述部分は（一般に）使用されない。 ③ 基本シンタックスはC言語に類似 ④ 変数名は先頭に＄を付ける ⑤ Ajaxクライアント（GETメソッド）からの送信データは $_GET[“送信パラメータ名”] で受信
[６] サーバ側スクリプト(PHP)
A0001山田太郎 A0002鈴木健児 A0003田中佳子 A0004佐藤弘明 A0005伊藤弘志
empfile.txtファイル
40
<?php //PHPコード記述の開始
$emp_no = $_GET["emp_no"]; //変数名は先頭$で始める //GETメソッドでの送信データは$_GET[“送信パラメータ名”]で受信
$fp = fopen("empfile.txt", "r") or die("OPENエラー"); //テキストファイル“employee.txt”をREADモードでオープン
while($data = fgets($fp)){ //fgets($fp) は$fpから行単位で読み取り変数$dataにセットする
if(strncmp($data[0], $emp_no, 5) == 0){ //最初の５文字がGET受信データと等しい場合条件成立
echo substr($data[0], 5); //５文字から後の名前部分をAjaxクライアントへ送信 break;
} } fclose($fp); //ファイルクローズ ?>
getUniq.php
41
<?php $emp_no = $_GET[“emp_no”];
$fp = fopen(“empfile.txt”, “r”) or die(“OPENエラー”);
while($data = fgets($fp)){
if(strncmp($data, $emp_no, 5) == 0){
echo substr($data, 5);
break;
}
}
fclose($fp);
?>
POSTメソッドでのPHP postUniq.php
受信処理で $_GETが$_POSTに替わるだけ
42
PHP: Hypertext Preprocessor Apacheモジュールとして動作するスクリプト言語とその実行環境 1994年秋、Rasmus Lerdorf（グリーンランド⇒デンマーク） が作っていた Perlスクリプトを C言語で書き直し、HTMLフォームを扱える動的なWebアプリケーションのための機能 に拡張したのが始まりとされる。
PHP公式サイト http://www.php.net/
43
[PHPの特徴] （１）Webアプリケーション開発に特化した言語。 ・ CGI処理用の構文・変数等を装備 （２）文法が比較的容易に誰でも習得することができる。 ・基本シンタックスはC言語類似だが、より簡略化されている。 （３）インタープリタ言語でコンパイルの必要なし。 ・小回りが利き、短期開発に向いている。 （４）CGIと比較すると、実行速度が断然早い。 ・Apacheモジュールとして実行され、別プロセスを生成しない （５） 多くの拡張ライブラリをサポート ・PEAR (PHP Extension and Application Repository） ・CakePHP、Zend Framework など （６）どのような種類のデータベースとも接続可能。
Ajaxian.com ２００７ Survey Results 出典： Ajaxian.com (http://ajaxian.com/)
44
PHPはAjaxとの組み合わせで最もよく使用される言語
45
従来モデル（Ajax以前）でのPHPプログラム例
<?php // クッキーのデータを削除する setcookie("cookie_id", "", time() - 1); ?> <html> <head> <title>クッキーを削除する</title> </head> <body> <?php // クッキーが削除されているかどうか調べる if (!isset($_COOKIE["cookie_id"])) { echo "<p>値はセットされていません"; } else { echo "<p>セットされている値".$_COOKIE["cookie_id"]; } ?> </body> </html>
従来モデルとAjaxモデルのサーバ 側プログラム比較 ・従来モデル ⇒HTMLタグを生成してSTDOUTに出力 ・Ajaxモデル ⇒テキスト文字列でSTDOUTに出力 ※非同期通信/同期通信でプログラムパターンは同じ。
１．GETまたはPOSTでパラメータ受信 ２．データベースまたはファイルアクセス ３．演算処理（ビジネスロジック） ４．クライアントにテキスト（並び）送信
従来のCGI形式 プログラムと同じ
従来はHTML タグ生成
[Ajaxモデルサーバ側プログラム処理手順]
46
<?php
$class1_code = $_GET["class1_code"];
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection Error1");
$db = mysql_select_db($dbname) or die("Connection Error2");
$sql = "select * from item_class1 where class1_code='$class1_code'";
$rows = mysql_query($sql, $sv) or die("mysql query Error");
$row = mysql_fetch_array($rows, MYSQL_ASSOC);
if($row>0){
$set = "OK:データ検索成功".”<i>";
$set = $set.$row["class1_name"].”<i>";
$set = $set.$row["class1_desc"].”<i>";
$set = $set.$row["class1_date"].”<i>”;
echo $set;
}else{
echo "データ検索不成功".",";
}
?>
PHPのAjaxサーバ 側プログラム例
※従来モデルと同じ １．POST・GETパラメータ受信 ２．データベースアクセス ３．演算処理（ビジネスロジック）
※従来モデルと異なる ４．クライアントにテキスト列送信
47 ※PHPでの文字列連結はドットで行う
Apache
PHP5 MySQL
FedoraCore５
（サーバ）
サンプルプログラムでのシステム構成
Webサーバ データベース
ブラウザ・クライアント
IE6/7 FireFox
Version2
Safari Version3
Opera Version9
48
テキストファイル
PHP
スクリプト
⇒Webアプケーションでの標準的なシステム構成
LAMP（Linux + Apache + MySQL + PHP）
1. XHTMLとCSSを利用したWeb標準での画面構成にする standards-based presentation using XHTML and CSS
XHTML/CSS
49
XHTML（Extensible HyperText Markup Language） - 画面構成定義
XHTML ： HTMLをXMLに適合するように定義し直したマークアップ言語 仕様策定] W3C 策定目的] インターネットをはじめとしたオンラインでのデータの送受信 にXMLが使用されることを想定し、HTML文書もXML処理系で統一的 に扱える環境を整える XHTML1.0：2000年1月 W3C勧告 HTML 4.01をベース =>HTML 4.01に対応したWebブラウザではほぼ問題なく表示可能 XHTML1.1：2001年5月 W3C勧告 XHTML 1.1で文書見栄えを指定するタグが 廃止、(見栄えの記述は全てCSSで行なうことになった)など、 文書構造の記述に特化した言語へと変化の傾向 ※妥当な（valid）XHTML 1.1の要件は、文書型宣言が変わる（従って参照する DTDが変わる）以外は、基本的にXHTML 1.0の場合と同じ。
50
<?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE book [ <!ELEMENT book (computer*)> <!ELEMENT computer (title,page,price)> <!ELEMENT title (#PCDATA)> <!ELEMENT page (#PCDATA)> <!ELEMENT price (#PCDATA)> ]> <book> <computer> <title>XHTMLガイド</title> <page>240</page> <price>2,300</price> </computer> <computer> <title>JavaScriptガイド</title> <page>260</page> <price>2,500</price> </computer> </book>
XML宣言
DTD記述
XMLデータ
・整形式XML文書 -XML宣言：任意 -DTD：任意 -XMLデータ：必須
・検証済XML文書 -XML宣言：任意 -DTD：必須 -XMLデータ：必須
(1) XHTMLは検証済XML文書の書式に従う
51
(2) XHTML文書の適合要件
１. 提供されるDTD (Document Type Definition)に従い、 DOCTYPE(文書型)宣言を以下の形式で行う。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”> =>文書型宣言として、公開識別子で指定されたＤＴＤを使用、ただし、公開識別 子でＤＴＤが特定(所得)できなかった場合はＵＲＩで指定されたdtdを使用。 ※ DTD: XML文書の要素、属性、エンティティ、記法を宣言(定義)したもの。 ２．文書のルート要素が html であること。 ３．ルート要素は、xmlns属性でXHTML名前空間を明示すること。 ※名前空間: 文書内に複数ボキャブラリが存在する場合に、要素名、属性名 が重ならないようにその適用範囲(スコープ)を明示するための規格。 指定例] <html xmlns="http://www.w3.org/1999/xhtml">
52
XHTML文書の適合要件
4. 全てのタグ（要素タイプ名、属性名）は小文字で記述する 5. 属性の値は必ず引用符で囲む × width=100 => 〇 width="100" 6. 終了タグを省略しない × <ul><li>甲項目</ul> => 〇 <ul> <li>甲項目</li> </ul> 7. 空要素のタグは />で閉じる × 部署：<input type="text" name=“section" id=“section"> 〇 部署：<input type="text" name=“section" id=“section" /> 8. ファイル内の位置を示すにはid属性を併記する × <a href="#foo">アンカーをクリックすると</a> .... <a name="foo">ここにジャンプする</a> 〇 <a href="#foo">アンカーをクリックすると</a> .... <a name=“foo” id=“foo”>ここにジャンプする</a>
53
9. &はあらゆるところで&と記述する × <a href="/cgi-bin/myscript?name=kanzaki&score=100"> 〇 <a href="/cgi-bin/myscript?name=kanzaki&score=100"> 10.属性の省略書式は使わない ×<input type="radio" name="bar" checked> 〇<input type="radio" name="bar" checked="checked" /> 11. head要素内のスクリプトやスタイルシートの注意 < はタグの開始と見なされ、コメントした内容は無視される ×<style type="text/css"> <!-- p {color:red} --> </style> 解決策：外部ファイルにスタイルシートやスクリプトを記述 12.言語コードの指定にxml:lang属性を用いる <p lang=“jp” xml:lang=“jp”>今日は</p> 注：XHTML 1.1ではlang属性は廃止され、xml:lang属性のみを記述
XHTML文書の適合要件
54
CSS (Cascading Style Sheets) - スタイル定義 CSS：スタイルシートを記述する為の言語仕様の１つ ※スタイルシート:Webページのレイアウトや整形方法を指定する整形言語 =>文書の表現方法の指定に特化した構文の集合体
仕様策定] W３C、現在CSS1(第１版)とCSS2(第２版)が正式に勧告されている。
策定目的] 文字のサイズやフォント、背景色や行間の大きさなどの 見栄えに関する情報を文書本体から切り離し、ユーザが複数の レイアウトから選択することができるようにする。
CSS1:W3C勧告 1996年12月17日、 改定1999年１月11日 単純なスタイル構造(構造化文書に対してフォント，色と背景，スペーシング，テキストの装飾，ボーダー，
マージンやパディング，といったスタイルを与えることができる)を定義した最初のCSS仕様。
CSS2: W3C勧告 1998年05月12日
HTML用として制定されたCSS1をXMLでも利用できるように機能拡張,CSS1の全機能が含まれる。
メディアタイプ依存のスタイルシートに対応しており，グラフィカルなブラウザ，音声出力装置， 点字出力装置，プリンタ，小型情報機器など，多様な出力を想定したスタイル設定が可能 CSS3：CSS2の次世代仕様
モジュール化（機能や役割ごとに仕様書が細分化）されており，複雑化してきたスタイルシートの各
機能の関係を明確にし，部分的な実装を容易にし，更に新しい機能を導入し易くなるという，メリットが
期待される。
55
(1) CSSの基本書式
[タイプ１] 要素名 {プロパティ：値 [；プロパティ：値 [… …]]｝ 要素名 {プロパティ：値 [；プロパティ：値 [… …]]｝ 例] td {font-size:18px; font-weight:600; color:#aa0000} [タイプ２] 要素名.クラス名 {プロパティ：値 [；プロパティ：値 [… …]]｝ 要素名#ID名 {プロパティ：値 [；プロパティ：値 [… …]]｝ 例] td#title {font-size:18px; font-weight:600; color:#aa0000} td.title {font-size:18px; font-weight:600; color:#aa0000} [タイプ３] .クラス名 {プロパティ：値 [；プロパティ：値 [… …]]｝ #ID名 {プロパティ：値 [；プロパティ：値 [… …]]｝ 例] #title {font-size:18px; font-weight:600; color:#aa0000} .title {font-size:18px; font-weight:600; color:#aa0000}
56
<div style="background:lightblue; color:blue;"> 背景の色を水色に、<br> 文字色は青にしています。 </div>
(2) CSSの指定方法
１．XHTMLタグに直接スタイルを設定する。
特定の箇所にのみスタイルを設定する場合に使用 => 非推奨
例
57
<html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>HTMLヘッダで宣言する</title> <style type=“text/css”> <!—
h1 {font-size: 24px; font-family: sans-serif; font-weight:700; color:#990000 } h2 {font-size: 20px; font-family: sans-serif; font-weight:600; color:#aa0000 } span.data1 {font-size: 16px; font-family: serif; font-weight:500; color:#000099 } #data2 {font-size: 14px; font-family: serif; font-weight:400; color:#0000aa } --> </style> </head> <body> : <h1>レベル1のタイトル</h1> <h2>レベル２のタイトル</h2> <span class=“data1”>レベル1のデータ</span> <span id=“data2”>レベル2のデータ</span>
: </body> </html>
２. HTMLヘッダ内で宣言する
58
<head> <meta http-equiv="Content-Style-Type" content="text/css"> <title>外部CSSファイルを読み込む </title> <link rel=“stylesheet” type=“text/css” href=“../lib/style.css”> </head> <body> <h1>レベル1のタイトル</h1> <h2>レベル２のタイトル</h2> <span class=“data1”>レベル1のデータ</span> <span id=“data2”>レベル2のデータ</span> </body> </html>
３. 外部CSSファイルを読み込む
CSSファイル:style.css h1 {font-size: 24px; font-family: sans-serif; font-weight:700; color:#990000 } h2 {font-size: 20px; font-family: sans-serif; font-weight:600; color:#aa0000 } span.data1 {font-size: 16px; font-family: serif; font-weight:500; color:#000099 } #data2 {font-size: 14px; font-family: serif; font-weight:400; color:#0000aa }
59
<script type="text/javascript"> //<![CDATA[ : var node = document.getElementById(“div1”); node.style.fontSize = “36px”; node.style.backgroundColor = “#ffaaaa”;
: //]]> </script> </head> <body> ： <div id=“div1”>スタイル指定</div>
４. JavaScript内で直接指定する
document.getElementById(“div1").style.fontSize = "20px"; document.getElementById(“div2").style.fontWeight = "bold"; document.getElementById(“div3").style.color = "red"; document.getElementById(“div4").style.fontStyle = "italic"; document.getElementById(“div5").style.background = "#ccddee";
document.getElementById() でタグを取得し、styleプロパティで変更する。
60
CSSの書式-1： 参考情報
プロパティ名 機能 対応
background 背景のプロパティの一括指定 IE4NN4
background-color 背景色を指定する IE4NN4
background-image 背景画像を指定する IE4NN4
background-attachment 背景画像のスクロール方法を指定する IE4NN6
background-position 背景画像の開始位置を指定する IE4NN6
background-repeat 背景画像のリピート方法を指定する IE4NN4
font フォントのプロパティの一括指定 IE4NN6
font-weight フォントの強調を指定する IE4NN4
font-variant フォントの小文字を大文字にする IE4NN6
font-style フォントの斜体(イタリック)表示を指定する IE4NN4
font-size フォントサイズを指定する IE4NN4
font-family フォントの種類を設定する IE4NN6
line-height 行間幅を指定する IE4NN4
text-transform テキストの大文字小文字を指定する IE4NN6
text-decoration テキストにアンダーライン、打消し線等を指定する IE4NN4
text-align 文字の左寄せ右寄せ、センタリングを指定する IE4NN4
text-indent テキストのインデント幅を指定する IE4NN4
letter-spacing 文字間の幅を指定する IE4NN6
Color テキストの色を指定する IE4NN4
float 文字の回り込みの設定 IE4NN6
clear 文字の回り込みを解除する IE4NN6
width ボックスの横幅を指定する IE4NN4
Height ボックスの縦幅を指定する IE4NN6
61
CSSの書式-2：
プロパティ名機能対応
border ボックスの枠線プロパティの一括指定 IE4NN4
border-style ボックスの枠線の形状を指定する IE4NN4
border-width ボックスの枠線の太さを指定する IE4NN4
border-color ボックスの枠線の色を指定する IE4NN4
margin ボックス外部の余白幅を指定する IE4NN4
padding ボックス内部の余白幅を指定する IE4NN4
overflow ボックスに入りきらない表示の表示方法を指定する IE4NN6
list-style リストのプロパティの一括指定 IE4NN4
list-style-image リストの見出しにグラフィックを指定する IE4NN6
list-style-type リストの見出し記号を指定 IE4NN4
list-style-position リスト項目の二行目以降のインデントを指定する IE4NN6
cursor カーソルの形状を指定する IE4NN6
position topとleftの指定方法を決める IE4NN6
left 左端からの位置を指定する IE4NN4
top 上からの位置を指定する IE4NN4
vertical-align 縦方向の位置を指定する IE4NN6
clip 表示をどこで切り取るかを指定する。 IE4NN6
z-index z-indexを指定する IE4NN6
visibility 可視不可視を指定する IE4NN6
display どの要素としての表示かを指定する IE5NN4
page-break-before 印刷のとき、その前で改ページするようにする IE4NN6
page-break-after 印刷のとき、その後で改ページするようにする IE4NN6
62
2. JavaScriptによって総ての機能を統合する and JavaScript binding everything together.
JavaScript
63
(1) Ajax動作環境の統合=JavaScript
JavaScript：ECMAScript(エクマスクリプト)準拠の処理系で、Webブラウザ などでの利用に適したスクリプト言語(簡易プログラミング言語)。 仕様策定] ECMA(European Computer Manufacturer Association) ヨーロッパ電子計算機工業会 策定目的] 静的な表現しかできなかったWebページに、動きや対話性を付加 することを目的に開発され、主要なWebブラウザのほとんどに搭載されている。 ・元々Sun Microsystems社とNetscape Communications社が開発した、 JavaScriptをベースに後付けで仕様策定されており、各社の実装に微妙な違い がある。 ・現在はECMAScript準拠の処理系をJavaScriptと呼び、独自の拡張を施した JavaScriptには独自の名称を付けている。 -Microsoft： JScript -Macromedia：ActionScript
64
<html> <head> <title>….</title>
</head> <body> ： <script type="text/javascript"> ： alert(“Hello World”); //処理内容
： </script> ： </body> </html>
JavaScript – head、bodyタグ内に直接記述
65
<html> <head> <script type="text/javascript"> function func1(arg1,..){ ： alert(“Hello world”); //処理コード
： } ： </script> </head> <body> ： <input type="text" name="ev1" onclick=”func1(arg1,..);" />
： </body> </html>
JavaScriptイベント処理 - イベントハンドラを使用
66
<html> <head> <script type="text/javascript" src=“../lib/funcs.js"></script> <script type="text/javascript" src=“../lib/prototype.js"></script>
<script type="text/javascript"> //<![CDATA[ function xhrFunc() { alert(“Hello world”); //処理内容
} function initOnLoad() { var observer = document.getElementById(“ev1”);
setListener(observer, "click", xhrFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> ： <button type="button" name=“ev1” id="ev1">クラス1表示</button>
： </body> </html>
JavaScriptイベント処理 - イベントリスナを使用
67
ハンドラ名 内容
onClick マウスがクリックされた際に発生 onSelect 入力フィールドの選択、あるいは入力フィールドにある 文字列をドラッグしたときに発生 onChange 選択メニューでの選択項目やテキスト入力欄の文字列 が変更されたときに発生 onMouseover マウスカーソルが、ある要素の上にきたときに発生 onKeyup 押下されたキーが開放されたときに発生 onFocus リンクや入力フィールドがフォーカス (選択) されたとき に発生 onBlur 入力フィールドでフォーカスが他に移動したときに発生 onResize ウィンドウサイズが変更されたときに発生 onSubmit 送信（サブミット）ボタンが押されときに発生 onReset 取消（リセット）ボタンが押されたときに発生 onAbort 処理を中断したときに発生 onLoad ページが読み込まれたときに発生 onUnload リンククリックなどによって、今いるページから移動した ときに発生
(3) イベントハンドラの種類
68
2 その他のイベント
[ウィンドウイベント] onActivate 要素がアクティブになったときに発生 onDeactivate 要素がアクティブでなくなったときに発生 onCloseQuery ウィンドウを閉じるときの確認で発生 onDblClick キーボードやマウスなどが「ダブルクリック」されたときに 発生 onFileDrop ファイルがエクスプローラなどからウィンドウにドロップ されたときに発生 onKeyDown キーが押下されたときに発生 onKeyPress キーが押されているときに発生 onMouseDown マウスボタンが押されたときに発生 onMouseEnter マウスが領域内に入ってきたときに発生 onMouseLeave マウスが領域内から出ていったときに発生 onMouseMove マウスカーソルが移動したときに発生 onMouseUp マウスボタンが離れたときに発生 onMouseWheel マウスホイールが回転したときに発生 onPopupHide ポップアップウィンドウを閉じたときに発生 [タイマイベント] setTimeout 一定時間後に指定した処理を行う clearTimeout setTimeoutを解除する setInterval 一定時間ごとに繰返し指定した処理を行う clearInterval setIntervalを解除する 69
XMLHTTPRequestを使用し非同期でサーバとのメッセージ交換を行う asynchronous data retrieval using XMLHttpRequest
[6]非同期通信(XHR)
70
XMLHttpRequestによる送受信フロー(非同期通信)
データ
受信
DOM APIでの動的表示
リクエスト
送信
•
(1) XMLHttpRequest オブジェクトの生成
↓
(2) open メソッド
(GET/POST、リクエスト先URL、非同期指定)
↓
(3) setRequestHeaderメソッド (注1) POSTの場合のみ ↓
(4) send メソッド (注2) GETの場合null送信 (データ送信)
↓
【サーバ処理 】
↓
(5) onreadystatechange プロパティ
送受信状態(readyState)の変化時に関数起動
↓
(6) readyStateとstatusプロパティ
(データ受信正常終了をチェック)
↓
(7) responseTextまたはresponseXML プロパティ
データの受信処理(テキストデータまたはXMLデータで受信)
71
XMLHttpRequest による送受信フロー(同期通信)
DOM APIでの動的表示
データ
受信
リクエスト
送信
•
(1) XMLHttpRequest オブジェクトの生成
↓
(2) open メソッド
(GET/POST、リクエストURL、同期指定) ↓
(3) setRequestHeaderメソッド (注1) POSTの場合のみ ↓
(4) send メソッド (注2) GETの場合null送信 (データ送信)
↓
【サーバ処理 】
↓
(5) responseTextまたはresponseXML プロパティ
データの受信処理(テキストデータまたはXMLデータで受信)
72
XMLHttpRequest による送受信フロー(同期通信)
DOM APIでの動的表示
データ
受信
リクエスト
送信
•
(1) XMLHttpRequest オブジェクトの生成
↓
(2) open メソッド
(GET/POST、リクエストURL、同期指定) ↓
(3) setRequestHeaderメソッド (注1) POSTの場合のみ ↓
(4) send メソッド (注2) GETの場合null送信 (データ送信)
↓
【サーバ処理 】
↓
(5) responseTextまたはresponseXML プロパティ
データの受信処理(テキストデータまたはXMLデータで受信)
73
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; var xhrObj = getXhrObj(); xhrObj.open("get", "getUniq.php?emp_no="+emp_no); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.onreadystatechange = function(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ var emp_name = xhrObj.responseText; document.getElementById("emp_name").value = emp_name; } } } xhrObj.send(null); } //]]> </script>
GET/非同期方式
74
<script type="text/javascript"> //<![CDATA[ var xhrObj = getXhrObj(); function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; xhrObj.open("get", "sample1.php?emp_no=" + emp_no); xhrObj.send(null); xhrObj.onreadystatechange = xhrResp; } function xhrResp(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ var emp_name = xhrObj.responseText; document.getElementById("emp_name").value = emp_name; } } } //]]> </script>
GET/非同期-関数名指定での受信処理
75
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; var xhrObj = getXhrObj(); xhrObj.open("post", "postUniq.php"); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhrObj.onreadystatechange = function(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ var emp_name = xhrObj.responseText; document.getElementById("emp_name").value = emp_name; } } } xhrObj.send("emp_no="+emp_no); } //]]> </script>
POST/非同期方式
76
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; var xhrObj = getXhrObj(); xhrObj.open("get", "getUniq.php?emp_no="+emp_no, false); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.send(null); var emp_name = xhrObj.responseText; document.getElementById("emp_name").value = emp_name; } //]]> </script>
GET/同期方式
77
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; var xhrObj = getXhrObj(); xhrObj.open("post", "postUniq.php", false); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhrObj.send("emp_no="+emp_no); var emp_name = xhrObj.responseText; document.getElementById("emp_name").value = emp_name; } //]]> </script>
POST/同期方式
78
Ajax演習-１
従業員番号から氏名表示 ・GET/POSTと非同期/同期の合計４種類の非同期通信 組み合せを自分のディレクトリから動作確認して下さい。 ・関数名指定でのGET/非同期を動作確認して下さい。
※この演習は演習環境の動作確認チェックにもなってい ます。ftpクライアント設定、エディタでの文字コード指定 （UTF-8）も確認して下さい。 ※PHPの場合、クライアントPOST送信の場合はサーバ側PHPもPOST受信に変更が必要
79
80
Ajax演習-１ 動作確認ファイル類
・ディレクトリ sample ・GET/非同期 getAsyn.htm getUniq.php ・別関数 getAsyn2.htm 同上 ・GET/同期 getSyn.htm 同上 ・POST/非同期 postAsyn.htm postUniq.php ・POST/同期 postSyn.htm 同上 ・データファイル employee.txt
XMLHttpRequestオブジェクト
responseTextプロパティ
書式] readonly String responseText 機能] リクエストに対する応答をテキスト形式で返す。 リクエストが不成功の場合、または未完了の場合はNULLが返される。 例] xhrObj.onreadystatechange = function() { if (xhrObj.readyState == 4) } if (xhrObj.status == 200) { var resp = xhrObj.responseText; document.getElementById("status").innerHTML = resp;
} } }
81
単一テキストの場合
データベース検索結果の表示
（単一レコード、複数アイテム）
var items = xhrObj.responseText.split(“<i>"); for(var i = 0; i < (items.length – 1); i++ ){ ： // items[i] のデータ項目処理 : ： }
82
配列変数 = XHRオブジェクト.responseText.split(区切文字)
※ 変数itemsは配列になる。 ※ 区切文字はCSV(,)以外にも任意の文字を指定可能 例] split(“<r>”) ->レコード区切り split(“<i>”) ->アイテム区切り
データベース検索結果の表示 （複数レコード、複数アイテム）
var recs = xhrObj.responseText.split("<r>"); for(i = 0; i < recs.length; i++ ){ var items = recs[i].split("<i>"); for(ｊ = 0; ｊ < items.length; ｊ++ ){ ： //xhtmlタグ作成 ： } } document.getElementById("area1”).innerHTML = out; //outは作成されたxhtmlタグ構成
83
従来モデルWebシステム
AjaxモデルWebシステム
従来モデルとAjaxモデルでのMVC機能配置
HTML-FORM
(jsp) Java-Servlet
(class)
DB Java-Beans
(class)
Data-View
(jsp)
HTML
(html)
Ajax
(js)
Java-Servlet
(class) Java-Beans
(class) DB
model
model view
view
controller
controller
84
GET/非同期（Java Servlet+Beans）
<script type="text/javascript"> //<![CDATA[ function xhrFunc(){ var emp_no = document.getElementById("emp_no").value; var xhrObj = getXhrObj(); xhrObj.open("get", "../sem1svlt?mode=rev&emp_no="+emp_no); xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT"); xhrObj.onreadystatechange = function(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ var emp_name = xhrObj.responseText; document.getElementById("emp_name").value = emp_name; } } } xhrObj.send(null); } //]]> </script>
85
86
package seminar1; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class sem1Svlt extends HttpServlet { private static final long serialVersionUID = 4L; public void doGet (HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException{ req.setCharacterEncoding("utf-8"); res.setContentType("text/html; charset=utf-8"); PrintWriter out; out = res.getWriter(); String mode = req.getParameter("mode"); sem1Bean sem1 = new sem1Bean(); if(mode.equals(“rev")){ String emp_no = req.getParameter("emp_no"); String resp = sem1.getEmpName(emp_no); } out.println(resp); out.flush(); out.close(); }
sem1Svlt.java
package seminar1; import java.io.*; public class sem1Bean { String inPath = "/usr/local/tomcat5/apache-tomcat-.5.20 /webapps/dwr2/WEB-INF/classes/seminar1/employee.txt"; public String getEmpName(String emp_no){ String empData = "", empNo = "", empName = ""; try { File inFile = new File(inPath); FileReader in = new FileReader(inFile); BufferedReader inBuffer = new BufferedReader(in); while ((empData = inBuffer.readLine()) != null) { empNo = empData.substring(0, 5); if(empNo.equals(emp_no)){ empName = empData.substring(5); break; } } inBuffer.close(); } catch (IOException e) {} return empName; } }
sem1Bean.java
87
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4"> : : <servlet-mapping> <servlet-name>sem1svlt</servlet-name> <url-pattern>/sem1svlt</url-pattern> </servlet-mapping> </web-app>
web.xml(デプロイメント・デスクリプタ)
88
XMLHttpRequest ：サーバとの非同期通信機能
XMLHttpRequest： JavaScript/JScript の HTTP 通信のためのオブジェクト。 ・非同期通信を行うため、リロードなしでサーバ側と連携した状態遷移が実現できる。 ・レスポンスが well-formed な XML 文書の場合は DOM を用いたアクセスもできる。 ※標準ではなく Microsoft Internet Explorer の独自拡張だったが、その後他の ブラウザが追随してデファクトスタンダードと呼べる状態になりつつある。 仕様策定] デファクトスタンダード ->W3Cワーキングドラフト(2006/4/5) 策定目的] Webクライアントとサーバ間の非同期通信を可能にする。
ブラウザのサポート状況
・Microsoft Internet Explorer 4.0以降 ・Mozilla Firefox 1.0以降 ・Netscape 7以降 ・Opera 7.6 以降 ・Safari 1.2以降 ・Konqueror 3 以降
XHR(XMLHttpRequest）のメソッド/プロパティ
89
XMLHttpRequestオブジェクト
openメソッド
書式] void open ( String メソッド , String サーバアドレス [,boolean 同期/非同期 [, String ユーザ名 [,String パスワード]]] ) 機能] 送信先アドレス、送信方式等を指定し、リクエストを初期化する。 引数] 通信メソッド : HTTPメソッド指定 - “POST” または “GET“ URL が HTTP URLでない場合は無視される。 サーバアドレス:リクエスト送信先のURLを指定. 同期/非同期 ：(オプション) 非同期：true, 同期：false (省略時は非同期) ユーザ名 ：(オプション) ユーザ名を指定 パスワード ：(オプション) パスワードを指定 ※XMLHttpRequestがリクエストを送信できるのは同一ドメイン内に制限される。 ※URLはopen実行スクリプトファイルのダウンロード元から相対アドレスで指定可。 ※asyncで非同期指定の場合：sendメソッドは即座に処理を返し、その後は onreadystatechangeイベントの中で読み込み状況を確認する。 同期指定の場合リソースを所得し終えるまで処理を返さない (クライアント側はロックされる)。
例] xhrObj.open( “get” , “./foo/bar1.php” , true ); xhrObj.open( “post” , “./foo/bar2.php” , false ); 90
XMLHttpRequestオブジェクト
(2) setRequestHeaderメソッド
書式] void setRequestHeader ( String ヘッダ , String 値 ) 機能] HTTPリクエストに対する、HTTPリクエストヘッダ. 引数] ヘッダ： 送信するヘッダの名前 値 ： ヘッダのボディ
例] //openでPOST指定の場合、sendでの送信実行前に指定。 xhrObj.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); //キャッシュ回避で、sendでの送信実行前に指定。 xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
91
XMLHttpRequestオブジェクト
(3) sendメソッド
書式] void send ( variant ボディ ) 機能]リクエストを送信する。 リクエストが非同期の場合はリクエスト送信後直ちに、処理が戻る。 リクエストが同期の場合は、応答が帰ったあとに、処理が戻る。 引数] body：DOMドキュメントのインスタンス、文字列、inputストリーム
※メソッドがPOSTでパラメータがDOMドキュメントで無い場合bodyはシリアライズ される。 ※inputストリームの場合、ContentType: および ContentLength: ヘッダ(header) 情報および、ストリームの最後に’CR/LF’の添付が必要。.
例] var sendVal = “data1=“ + aaaa + ”&data2=“ + bbbb; xhrObj.send(sendVal);
92
XMLHttpRequestオブジェクト
（４）onreadyStatechangeプロパティ - 非同期通信時のみ使用 書式] ハンドラ onreadystatechange 機能] readyState変更時にコールバック関数を自動起動する
例１] 匿名関数形式 ： xhrObj.onreadystatechange = function() { 受信処理 } 例２] 関数指定形式 ： xhrObj.onreadystatechange = func1; } function func1() { 受信処理 }
93
書式] readonly int readyState 機能]リクエストの処理状態を表す。 値]
例] if (xhrObj.readyState == 4 ){ [httpステータス確認とデータ受信後の処理] } ※クライアント（ブラウザ）側の処理は、受信完了(値=4)後に行うのが通常。 データ受信中(値=3)に受信データにアクセスした場合、ブラウザにより、 応答が異なる（Internet ExplorerおよびOpreraではエラーを返す。）
XMLHttpRequestオブジェクト
(5) readyStateプロパティ - 非同期通信時のみ使用
値 表記 状態
0 UNINITIALIZED オブジェクトは生成されているが、まだ初期化されていない
(openメソッドが呼ばれていない)
1 LOADING オブジェクトが生成されたが、まだsendメソッドが呼ばれていない
2 LOADED Sendメソッドは呼ばれ、statusとヘッダが有効になった。
3 INTERACTIVE クライアントは応答テキストを受信中(データの一部を保持)
4 COMPLETED 総ての操作が完了、データは総て受信完了
94
XMLHttpRequestオブジェクト – その他のプロパティ (6) statusプロパティ - 非同期通信時のみ使用
書式] readonly int status 機能] HTTPrequest要求に対するステータスを値で返す。 値]
例] if (xhrObj.readyState == 4) { if (xhrObj.status == 200) { [データ受信後の処理] } }
値 ステータステキスト 状態
200 OK リクエスト成功
401 Unauthorized 許可なし
403 Forbidden アクセス拒否
404 Not Found 存在不明
500 Internal Server Error サーバ内部エラー
95
XMLHttpRequestオブジェクト – その他のプロパティ (7) statusTextプロパティ - 非同期通信時のみ使用
書式] readonly String statusText 機能] HTTPrequest要求に対するステータスをテキストで返す。 値]
例] if (xhrObj.readyState == 4 && xhrObj.statusText == “OK”){ //readyState と status の確認は上の書式でも可 [データ受信後の処理] }
値 ステータステキスト 状態
200 OK リクエスト成功
401 Unauthorized 許可なし
403 Forbidden アクセス拒否
404 Not Found 存在不明
500 Internal Server Error サーバ内部エラー
96
（8）getElementById メソッド
書式] object.getElementById(“id属性値”) 機能] 指定したID名を持つ要素ノードオブジェクトを返す。 引数] id属性値。 返値] オブジェクト。 適用] document 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]
要素ノードの参照
※非常に頻繁に使用されるメソッドで、多くのAjaxライブラリでショートカット
関数が用意されている。
例] document.getElementById(“out1”);
↓
$(“out1”); // Prototype.js, DWR
id(“out”); // funcs.js
97
DOMオブジェクト （9） innerHTMLプロパティ
書式] object.innerHTML [ = innerHTML] 機能] 開始・終了タグに挟まれた部分のHTMLを設定したり、読み出す。 設定] テキストとHTMLタグの組み合わせで使用する。 ただし、<html>、<head>、<title>タグは除く。 例] document.getElementById(“result”).innerHTML = resp; ※このプロパティの設定で、指定した文字列でエレメントの既存の内容 を完全に置き換える。 ※このプロパティはドキュメントがロード中に設定することはできない。
98
DOMオブジェクト （10） innerTextプロパティ
書式] object.innerText[ = innerText]
機能] 開始・終了タグに挟まれた部分のテキストを設定したり、
読み出す。
設定]
テキストとHTMLタグの組み合わせで使用する。ただし、<html>、<head>、<title>タグは除く。
例] document.getElementById(“result”).innerText = resp;
※このプロパティの設定で、指定した文字列でエレメントの既存の内容を完全
に置き換える。
※このプロパティはドキュメントがロード中に設定することはできない。
※innerTextの場合、HTMLのタグは解釈されずそのまま画面に表示される。
99
document.getElementById("out").innerHTML = data1;
document.getElementById("out").innerText = data1;
document.getElementById("out").value = data1;
IE,FireFoxでのブラウザ表示有効性
表示フィールド 入力フィールド
innerHTML IE ○ FF ○ IE ○ FF ×
innerText IE ○ FF × IE ？ FF ？
value IE × FF × IE ○ FF ○
100
XMLHttpRequestオブジェクト – その他のメソッド （11） abortメソッド
書式] object.abort ( )
機能] XMLHttpRequestオブジェクトのHTTPリクエストを中止する
返り値] なし 適用] XMLHttpRequest
例] xhrObj.abort();
101
通信タイムアウトの処理 一定時間が経過してもサーバーから応答がない場合の処理。 1. タイムアウトしたとき、エラーメッセージを表示する。 2. setInterval()でタイマーを設定し、一定時間経過後に指定 した関数を呼び出す。 例]
//5000ミリ秒経過するとtimeout()を実行する timerId = setInterval('timeout()', 5000); //XMLHttpRequestの通信を中断するときは abort() を実行する。 //タイムアウトの処理 function timeout() { //タイマーを終了する clearInterval(timerId); //通信を切断する xhrObj.abort(); }
102
103
//<![CDATA[
var xhrObj = getXhrObj();
function reqEmpName(){
var emp_no = document.getElementById("emp_no").value.toUpperCase();
xhrObj.open("get", "../../getempnamedb?emp_no="+emp_no);
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
var timerId = setInterval("timeout()", 1);
xhrObj.onreadystatechange = respEmpName;
xhrObj.send(null);
}
function respEmpName(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
clearInterval(timerId);
var emp_name = xhrObj.responseText;
document.getElementById("emp_name").value = emp_name;
}
}
}
function timeout(){
clearInterval(timerId);
xhrObj.abort();
alert("通信が切断されました。");
}
function initOnLoad(){
var observer = document.getElementById("emp_no");
setListener(observer, "blur", reqEmpName);
}
setListener(window, "load", initOnLoad);
//]]>
通信タイムアウトの処理サンプルコード
Ajax演習－２
従業員全データを一覧表示して下さい。 Ajax] ・複数レコード、複数アイテム の受信処理を利用 PHP] ・文字列連結はドット（.）を使用 ・PHPプログラムはgetUniq.php をもとにファイル名getAllEmp.phpで作成してください。
104
(４)イベント処理 DOMを使用してイベントの相互作用と動的な画面表示を行う dynamic display and interaction using the Document Object Model
105
(1) DOM(Document Object Model)
定義：Webページの内容(文章、画像、音声など)およびそれらの配置、 スタイルをツリー構造のオブジェクトとして扱い、プログラム言語から 動的にアクセスしたり更新することを可能にするAPI。 データ構造のセットではなく、インターフェイスを規定するオブジェクトモデル。
仕様策定] W3C ※DOMに従ってWebページを記述するための言語がDynamic HTMLになる。 ※Dynamic HTMLはNetscape Navigator 4.xとInternet Explorer 4.x/5.xに 搭載されており、DOMの直近の祖先になるが、両者のDOMは部分的に 仕様が異なるため、現在W3Cによって標準化が進められている。 DOM Level1 :Core, HTML DOM Level2 :Core, Views, Style, CSS, Events, Traversal, Range, HTML DOM Level3 :Core, View and Formatting, Abstract Schemas, Load and Save,Events, XPath
106
<html> <head> <title>XMLガイド</title> </head> <body> <ol> <li>項目１</li> <li>項目２</li> <li>項目３</li> </ol> </body> </html>
html
head body
title ol
DOMツリー内での 文書操作(動的表示)
XHTML文書 DOMツリー DOM API
XHTMLとDOM
li li li
項目1 項目2 項目3
DOMツリー内での イベント検知
サーバとの
非同期通信
ノード
XML文書 DOMツリー DOM API XML
パーサ
107
キャプチャフェーズ
バブリングフェース オブザｰバ
ターゲット
body
table
tr
td
ＤＯＭイベントモデル
・ターゲット イベント発生
・オブザーバ イベントキャッチ
・バブリングフェーズ
イベントの上位伝播
・キャプチャフェーズ
イベントの下位伝播
イベント発生
イベントキャッチ
tbody
document
html
108 参考] W3C Document Object Model Events
：
：
：
window
document
table
thead
tbody
tfoot
tr td
イベント
ネットスケープモデル マイクロソフトモデル
DOMイベントモデル イベントの伝播方向
-マイクロソフトモデル 内側のタグから外側のタグに伝播 -ネットスケープモデル 外側のタグから内側のタグに伝播
109
DOMイベントモデルの機能と特徴
(1) イベントの伝播とイベントリスナでのキャッチ addEventListener関数 (ie6では attachEvent関数) (2) イベントの発生場所はid属性値で識別 (3) イベントハンドラは従来のものから 先頭のonを省いたものと同じ (4) XHTMLとJavaScriptコードの分離
110
function setListener(observer, eventType, callFunc){ if(observer.attachEvent){ observer.attachEvent('on' + eventType, callFunc); }else if(observer.addEventListener){ observer.addEventListener(eventType, callFunc, false); }else { alert('No support on Your Browser'); return false; } }
funcs.js
attachEvent ：Internet Explorer addEventListener ：IE以外のブラウザ
setListener関数 -イベントリスナの設定
111
(1) 検索・参照画面の作成 -GET/非同期通信 (2) 登録画面の作成 -POST/同期通信 (3) 参照・更新・削除画面の作成 -登録系・参照系の組合せ
Ajaxでのデータ参照・登録・更新・削除
112
Ajaxでの参照画面例
従業員マスタ参照
113
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
var xhrObj = getXhrObj();
function revEmpMas(){
var emp_no = document.getElementById("emp_no").value;
xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
xhrObj.send(null);
xhrObj.onreadystatechange = respEmpData;
}
データ参照 revEmpMas.htm(1/3)
114
function respEmpData(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resp = xhrObj.responseText.split("<i>");
if(resp[0]=="OK"){
document.getElementById(“status”).innerHTML = resp[0];
document.getElementById("emp_name").innerHTML = resp[1];
document.getElementById("section").innerHTML = resp[2];
document.getElementById("mod_date").innerHTML = resp[3];
}else{
document.getElementById("status").innerHTML = resp[0];
}
}
}
}
function initOnLoad(){
var observer = document.getElementById("rev");
setListener(observer, "click", revEmpMas);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
データ参照 revEmpMas.htm(2/3)
115
<body>
<center>
<h2>従業員マスタ管理</h2>
<table width="380" border="1">
<tbody>
<tr><th colspan="2">従業員マスタ参照</th></tr>
<tr>
<th width="120">従業員番号</th>
<td><input type="text" id="emp_no"></td>
</tr>
<tr><th>従業員氏名</th><td id="emp_name"> </td></tr>
<tr><th>所属部署</th><td id="section"> </td></tr>
<tr><th>登録日</th><td id="mod_date"> </td></tr>
<tr>
<th><input type="button" id="rev" value=" 参照 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
データ参照 revEmpMas.htm(2/3)
116
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "insert into emp_mas
values('$emp_no', '$emp_name', '$section', '$mod_date')";
if($rows = mysql_query($sql, $sv)){
echo "登録成功: "."従業員番号=".$emp_no;
}else{
echo "登録不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
参照画面サーバコード revEmpMas.php
117
$server = "localhost"; $user = "mysql"; $passwd = "callback"; $sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
PHPでのMySQLデータベースアクセス手順 参照画面サーバコード revEmpMas.php
118
（１）データベースサーバへの接続 最初にmysql_connect でデータベースサーバ（ホスト）に接続する。
接続ID = mysql_connect(ホスト名,ユーザ名,パスワード)
戻り値$svには、データベースへの接続IDが代入される。 この後、この接続IDを参照してデータベースへのアクセスを行う。
$dbname = "ajax_ec";
$db = mysql_select_db($dbname) or die("Connection error2");
119
（２）データベースの選択 次に、接続したデータベースサーバの中から利用するデータベースをmysql_select_dbで選択する。
$db = mysql_select_db(データベース名、接続ID)
選択に成功すれば、戻り値はTRUE、失敗すればFALSEとなる。
$sql = "select * from emp_mas where emp_no='$emp_no'";
$rows = mysql_query($sql, $sv) or die("mysql query Error");
120
（３）SQL文の実行 選択したデータベースに対するSQL文の実行を、mysql_query（）で行う。
結果ID = mysql_query（SQL文,接続ID）;
戻り値（$rows）には、SQL文の処理結果が格納される。 処理結果は「結果ID」または「結果セット」と呼ばれる。
$row = mysql_fetch_array($rows, MYSQL_ASSOC);
if($row>0){
$resp = "OK"."<i>";
$resp = $resp.$row["emp_name"]."<i>";
$resp = $resp.$row["section"]."<i>";
$resp = $resp.$row["mod_date"];
echo $resp;
}else{
echo "検索不成功: ".$emp_no."<i>";
}
121
（４）レコードの読みとり 結果セット（$rows）には現在のレコードを示すポインタがあり、先頭は結果セットの第１レコードを示している。現在のレコードデータを連想配列名をキー値として読み出すには、 mysql_fetch_arrayの第一引数に結果セットを、第二引数に MYSQL_ASSOC を指定する。 ※同様の処理関数としてmysql_fetch_assocも使用可能。
※PHPでの文字列連結はドット演算子（.）で行う
mysql_close($sv);
122
（５）データベースサーバへの接続をクローズ データベースに対する処理がすべて終了後、データベースサーバへの接続を切断する。
mysql_close（接続ID）
Ajax データ登録の特徴
1) POSTメソッド使用
2) 画面遷移の無い登録 =>迅速な連続登録
3) 登録項目の動的絞込み値設定・表示 例１] リスト項目での絞込み 部リスト選択
->対応課リスト表示・選択 ->対応従業員リスト表示
例２] 検索項目入力での値設定 郵便番号入力
-> 対応住所の住所入力フィールド自動設定
4) 登録結果(成功・不成功・ステータス)の動的表示
123
Ajaxでの登録画面作成
従業員マスタ登録
124
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function addEmpMas(){
var emp_no = document.getElementById("emp_no").value;
var emp_name = document.getElementById("emp_name").value;
var section = document.getElementById("section").value;
var req="emp_no="+emp_no+"&emp_name="+emp_name+"§ion="+section;
var xhrObj = getXhrObj();
xhrObj.open("post", "addEmpMas.php", false);
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrObj.send(req);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
function initOnLoad(){
var observer = document.getElementById("add");
setListener(observer, "click", addEmpMas);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
データ登録 addEmpMas.htm
(1/2)
125
</head>
<body>
<center>
<h2>従業員マスタ管理</h2>
<table width="380" border="1">
<tbody>
<tr><th colspan="2">従業員マスタ登録</th></tr>
<tr>
<th width="120">従業員番号</th>
<td><input type="text" size="8" id="emp_no"></td>
</tr>
<tr><th>従業員氏名</th><td><input type="text" id="emp_name"></td></tr>
<tr><th>所属部署</th><td><input type="text" id="section"></td></tr>
<tr>
<th><input type="button" id="add" value=" 登録 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
データ登録 addEmpMas.htm
(2/2)
126
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
$db = mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "insert into emp_mas values('$emp_no', '$emp_name', '$section', '$mod_date')";
if($rows = mysql_query($sql, $sv)){
echo "登録成功: "."従業員番号=".$emp_no;
}else{
echo "登録不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
データ登録サーバコード(PHP） addEmpMas.php
127
Ajaxデータ検索・参照の特徴
(１）検索表示のハイスピード表示
(２) GETメソッド使用 =>検索待ち時間のタイムアウト処理 (３) 検索画面上での検索結果動的表示 =>迅速な連続検索 (４) 検索条件の絞込み・動的設定 表示 例１] 下位項目表示での絞込み 例２] リスト項目での絞込み (５) 検索結果(成功・不成功・ステータス)の動的表示
128
Ajaxデータ更新・削除の特徴
(１) ＰＯＳＴメソッド使用
(２) 同一画面上での連続更新・削除
=>迅速な連続更新・削除処理に対応
(３) 検索結果(成功・不成功・ステータス)の動的表示 ※更新のクライアントロジックは登録と同じ、 サーバ側で受信データで登録処理を行うか更新処理 を行うかで異なる。
129
Ajaxでの参照・更新・削除画面例 従業員マスタ参照/更新/削除
130
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
var xhrObj = getXhrObj();
function revEmpMas(){
var emp_no = document.getElementById("emp_no").value;
xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
xhrObj.send(null);
xhrObj.onreadystatechange = function(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resp = xhrObj.responseText.split("<i>");
if(resp[0]=="OK"){
document.getElementById("status").innerHTML = resp[0];
document.getElementById("emp_name").value = resp[1];
document.getElementById("section").value = resp[2];
document.getElementById("mod_date").innerHTML = resp[3];
}else{
document.getElementById("status").innerHTML = resp[0];
}
}
}
}
}
データ更新 updEmpMas.htm
(1/3)
131
function updEmpMas(){
var emp_no = document.getElementById("emp_no").value;
var emp_name = document.getElementById("emp_name").value;
var section = document.getElementById("section").value;
var req="emp_no="+emp_no+"&emp_name="+emp_name+"§ion="+section;
xhrObj.open("post", "updEmpMas.php", false);
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrObj.send(req);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
function delEmpMas(){
var emp_no = document.getElementById("emp_no").value;
xhrObj.open("post", "delEmpMas.php", false);
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrObj.send("emp_no="+emp_no);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
function initOnLoad(){
var observer = document.getElementById("rev");
setListener(observer, "click", revEmpMas);
var observer = document.getElementById("upd");
setListener(observer, "click", updEmpMas);
var observer = document.getElementById("del");
setListener(observer, "click", delEmpMas);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
データ更新 updEmpMas.htm
(2/3)
132
</head>
<body>
<center>
<h2>従業員マスタ管理</h2>
<table width="390" border="1">
<tbody>
<tr>
<th colspan="2" id="mod">
従業員マスタ参照/更新/削除
<input type="button" id="rev" value=" 参照 " />
<input type="button" id="upd" value=" 更新 " />
<input type="button" id="del" value=" 削除 " />
</th>
</tr>
<tr>
<th width="120">従業員番号</th>
<td width="260"><input type="text" id="emp_no" size="8"></td>
</tr>
<tr><th>従業員氏名</th><td><input type="text" id="emp_name"></td></tr>
<tr><th>所属部署</th><td><input type="text" id="section"></td></tr>
<tr><th>登録日</th><td id="mod_date"> </td></tr>
<tr><th>ステータス</th><td id="status"> </td></tr>
</tbody>
</table>
</center>
</body>
</html>
データ更新 updEmpMas.htm
(3/3)
133
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
$db = mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "update emp_mas
set
emp_name = '$emp_name',
section = '$section',
mod_date = '$mod_date'
where
emp_no = '$emp_no'";
if($rows = mysql_query($sql, $sv)){
echo "更新成功: "."従業員番号=".$emp_no;
}else{
echo "更新不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
データ更新 updEmpMas.php
134
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
$db = mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$sql = "delete from emp_mas where emp_no='$emp_no'";
if($rows = mysql_query($sql, $sv)){
echo "削除成功: "."従業員番号=".$emp_no;
}else{
echo "削除不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
データ更新 delEmpMas.php
135
http://www.prototypejs.org
・Ajaxフレームワーク ・コード記述のシンプル化 ・クロスブラウザ対応
prototype.js
136
Ajaxian.com ２００７ Survey Results
137 出典： Ajaxian.com (http://ajaxian.com/)
138
Google Trendsでの prototype.js dojo jQuery検索トラフィック比較
http://www.google.co.jp/trends?q=prototype.js%2C+dojo%2C+jQuery
Prototype.jsの主要機能 １ ショートカット
長文メソッド名等のショートカット
２ Ajaxフレームワーク
定型的Ajaxクライアントコード記述
３ JavaScript言語機能の強化
・イテレータ
・文字列処理
・配列処理
４ オブジェクト指向機能の強化
139
Prototype.js APIS ・ユーティリティメソッド(Utility Methods) ・Ajax(Ajax) ・配列(Array) ・クラス(Class) ・要素(Element) ・要素メソッド(Element.methods) ・要素メソッドシミュレート (Element.Metod.Simulate) ・列挙型(Enumerable) ・イベント(Event) ・フォ－ム(Form) ・フォーム要素(Form.Element)
・関数(Function) ・ハッシュ(Hash) ・インサーション(Insertion) ・ナンバー(Number) ・オブジェクト(Object) ・オブジェクト範囲(ObjectRange) ・定期実行(PeriodicalExecuter) ・ポシション（Position） ・プロトタイプ(Prototype) ・文字列(String) ・テンプレート(Template) ・時間管理(TimeObserver)
140
使用方法 ダウントードされるprototype.jsファイルを外部js参照指定でOK <script type="text/javascript" src="../lib/prototype.js"></script>
141
Prototype.js
[１] ショートカット（ユーティリティメソッド）
$() 関数 document.getElementByIdのショートカット $(“id1”) → document.getElementById(“id1”)； $F() 関数 INPUTフィールドの値を所得 $F(“id1”) → document.getElementById(“id1”).value； $A() 関数 引数指定列挙型リストを配列オブジェクトに変換
142
$() 関数 ID属性の値を返す 例] document.getElementByIdのショートカット document.getElementById(“id1”) → $(“id1”) ※引数として２つ以上のＩＤを渡すと、ID属性の並びを 配列で返す var divs = $(‘div1’, ‘div2’, ‘div3’); ※配列だけでなく要素オブジェクトそのものを渡すこともできる。
143
Ajax.Request 書式] Ajax.Request(url, options); url :リクエストurl options :options引数オブジェクト
144
Ajax.Updater 書式] Ajax.Updater(container, url, options); container :出力先id名(または要素オブジェクト) ex：{success: id名} url :リクエストurl options :options引数オブジェクト
Prototype.js [２] Ajaxフレームワーク
継承
[options] method postまたはget デフォルトpost parameters getで送信されるクエリー文字列 postBody postで送信されるクエリー文字列 asynchronous 非同期/同期指定、デフォルトは非同期(true) requestHeaders HTTPプロトコルヘッダ情報のリスト ヘッダフィールド名と値をペアで指定 onComplete XHRリクエストが完了した場合に呼び出される関数を指定する 関数の引数にXHRインスタンスが渡される onSuccess XHRリクエストが成功裡完了の場合に呼び出される関数を指定する 関数の引数にXHRインスタンスが渡される onFailure XHRリクエストが失敗の場合に呼び出される関数指定を指定する 関数の引数にXHRインスタンスが渡される onException XHRリクエストで例外発生の場合に呼び出される関数を指定する 関数の引数にXHRインスタンスが渡される on + [status] XHRリクエストでのreadyStateに対応して呼び出される関数を指定 onUninitialized、onLoading、onLoaded、onInteractive 、onComplete 関数の引数にXHRインスタンスが渡される
145
従業員マスタ登録をPrototype.js(Ajax.Updater) で書き換え
146
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>クラス1登録</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript"> //<![CDATA[ function addEmpMas(){ new Ajax.Updater({success:'status'},'addEmpMas.php',{postBody:Form.serialize("items")}); } function initOnLoad(){ setListener($("add"), "click", addEmpMas); } setListener(window, "load", initOnLoad); //]]> </script> </head>
prototype.js ：Ajax.Updater addEmpMas.htm(1/2)
147
<body> <center> <h2>従業員マスタ管理</h2> <table width="380" border="1"> <tbody> <tr><th colspan="2">従業員マスタ登録</th></tr> <form id="items"> <tr> <th width="120">従業員番号</th> <td><input type="text" size="8" name="emp_no"></td> </tr> <tr><th>従業員氏名</th><td><input type="text" name="emp_name"></td></tr> <tr><th>所属部署</th><td><input type="text" name="section"></td></tr> </form> <tr> <th><input type="button" id="add" value=" 登録 " /></th> <td id="status"> </td> </tr> </tbody> </table> </center> </body> </html>
prototype.js ：Ajax.Updater addEmpMas.htm(2/2)
148
従業員マスタ参照をPrototype.js(Ajax.Request) で書き換え
149
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>クラス1登録</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript"> //<![CDATA[ function revEmpMas(){ var emp_no = "emp_no="+$("emp_no").value new Ajax.Request('revEmpMas.php',{method:'get',onComplete:out,parameters:emp_no}); } function out(out){ var resp = out.responseText.split("<i>"); for(var i = 0; i < resp.length; i++){ $("status","emp_name","section","mod_date")[i].innerHTML = resp[i]; } } function initOnLoad(){ setListener($("rev"), "click", revEmpMas); } setListener(window, "load", initOnLoad);
revEmpMas.htm (1/2) (prototype: Ajax.Request)
150
//]]> </script> </head> <body> <center> <h2>従業員マスタ管理</h2> <table width="380" border="1"> <tbody> <tr><th colspan="2">従業員マスタ参照</th></tr> <tr> <th width="120">従業員番号</th> <td><input type="text" id="emp_no"></td> </tr> <tr><th>従業員氏名</th><td id="emp_name"> </td></tr> <tr><th>所属部署</th><td id="section"> </td></tr> <tr><th>登録日</th><td id="mod_date"> </td></tr> <tr> <th><input type="button" id="rev" value=" 参照 " /></th> <td id="status"> </td> </tr> </tbody> </table> </center> </body> </html>
revEmpMas.htm (2/2) (prototype: Ajax.Request)
151
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>クラス1登録</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript"> //<![CDATA[ function revEmpMas(){ var emp_no = "emp_no="+$("emp_no").value new Ajax.Request('revEmpMas.php',{method:'get',onComplete:out,parameters:emp_no}); } function out(out){ var resp = out.responseText.split("<i>"); $("status","emp_name","section","mod_date").each( function (value, i){ value.innerHTML = resp[i]; }); } function initOnLoad(){ setListener($("rev"), "click", revEmpMas); } setListener(window, "load", initOnLoad);
revEmpMas2.htm (1/2) (prototype: Ajax.Request)
152
//]]> </script> </head> <body> <center> <h2>従業員マスタ管理</h2> <table width="380" border="1"> <tbody> <tr><th colspan="2">従業員マスタ参照</th></tr> <tr> <th width="120">従業員番号</th> <td><input type="text" id="emp_no"></td> </tr> <tr><th>従業員氏名</th><td id="emp_name"> </td></tr> <tr><th>所属部署</th><td id="section"> </td></tr> <tr><th>登録日</th><td id="mod_date"> </td></tr> <tr> <th><input type="button" id="rev" value=" 参照 " /></th> <td id="status"> </td> </tr> </tbody> </table> </center> </body> </html>
revEmpMas2.htm (2/2) (prototype: Ajax.Request)
153
Ajax演習-3 prototype.js Ａｊａｘフレームワーク 従業員番号から氏名表示を prototype.js（Ajax.Request）で書き換え て下さい。
154
function revEmpMas(e) {
//処理内容
}
function initOnLoad() {
var observer = document.getElementById(“sel");
setListener(observer, "click", revEmpMas);
}
setListener(window, "load", initOnLoad );
イベントオブジェクト(e)
イベントオブジェクトからイベントに関する様々な情報を所得可能
・キー入力、マウスクリックでのイベント発生ノード識別
・キー入力イベントでの入力キー識別（キーコード値）
・マウスクリックイベントでのマウスボタン（左、右、中央）識別
・マウスポインタ（カーソル）移動でのポインタ位置検出 155
イベントターゲットの検出： getid(e) イベント発生ノードをイベントオブジェクトから識別 ・IE系ブラウザ e.srcElement ・IE以外のブラウザ e.target
function getid(e){ var tgt; if(!e) var e = window.event; if(e.srcElement){ // Microsoft tgt = e.srcElement.id; if(tgt.nodeType == 3) tgt = tgt.rapentNode; }else if(e.target){ // W3C/Netscape tgt = e.target.id; }else{ tgt = false; } return tgt; }
getid関数(funcs.js) イベント発生ノード のID属性値を返す
156
function getkcode(e){
if(!e) var e = window.event;
if(e.keyCode){
return e.keyCode;
}else if(e.which){
return e.which;
}else{
return false;
}
}
getkcode関数(funcs.js) キー押下時のイベントで 入力キーコード値を返す
入力キーコードの検出: getkcode(e) 押下キーコードをイベントオブジェクトから識別 ・IE系および新しいFireFox e. keyCode ・古いFireFox e.which
157
キー コードBack Space 8Tab 9Enter 13Shift 16Cntrl 17Alt 18Break 19ESC 27変換 28無変換 29スペース 32Page Up 33Page Down 34END 35Home 36← 37↑ 38→ 39↓ 40Print Screen 44Insert 45Delete 46Num Lock 145
参考資料 キーコード対応表
158
getkcodeで返されるキーコード値
function getkchar(e){
var code;
if(!e) var e = window.event;
if(e.keyCode){
code = e.keyCode;
}else if(e.which){
code = e.which;
}else{
code = false;
}
if(code)
return String.fromCharCode(code);
else
return code;
}
入力キー文字の表示: getkchar(e) (funcs.js)
159
テーブルでのキー入力 入力行/列、入力キー検出
・入力位置（行/列） → getid(e)
・入力キーコード → getkcode(e)
・入力キー文字 → getkchar(e)
160
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>テーブル入力</title> <link rel="stylesheet" type="text/css" href="../lib/style.css" /> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function initOnLoad(){ var table = "<table id='id1' cellspacing='0' cellpadding='0'><tbody>"; for(var i = 0; i < 7; i++){ table += "<tr>"; for(var j = 0; j < 5; j++){ table += "<td><input type='text' id='"+i+":"+j+"' size='4' /></td>"; } table += "</tr>"; } table += "</tbody></table>"; document.getElementById("view").innerHTML = table; var observer = document.getElementById("id1"); setListener(observer, "keyup", check); }
table.htm 1/2 テーブル入力処理
161
function check(e){ var tid = getid(e); var kcode = getkcode(e); var kchar = getkchar(e); var row = tid.split(":")[0]; var col = tid.split(":")[1]; alert("行="+row+" 列="+col+" キー="+kcode+" 文字="+kchar); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <h3>テーブル入力処理</h3> <div id="view"></div> </body> </html>
table.htm 2/2
162
クリックマウスボタン（左右）の検知
FireFox 関数：e.which
•Left button： 1
•Middle button： *
•Right button： 3
MS(IE) 関数：e.button
•Left button： 1
•Middle button： *
•Right button： 2
163
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>入力キー</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript"> //<![CDATA[ function check(e){ if (!e) var e = window.event; if (e.which){ alert("e.which = "+e.which); }else if (e.button){ alert("e.button = "+e.button); } }
mclick1.htm 1/2
164
function initOnLoad(){ setListener($("id1"), "mousedown", check); } setListener(window, "load", initOnLoad ); //]]> </script> </head> <body> <center> <h3>マウスボタン検知</h3> <p><input type="text" id="id1" value="ボタンクリック" /></p> <p id="id2">ボタンクリック </p> </center> </body> </html>
mclick1.htm 2/2
165
function mbutton(e){
var click;
if(!e) var e = window.event;
if (e.which){
if(e.which == 1){
click = "L";
}else if(e.which == 3){
click = "R";
}
}else if (e.button){
if(e.button == 1){
click = "L";
}else if(e.button == 2){
click = "R";
}
}else{
click = "F";
}
return click;
}
クリックマウスボタンの検出 mbutton(funcs.js)
・左ボタンクリック → 戻り値（“L”） ・右ボタンクリック → 戻り値（“R”）
166
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>入力キー</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript" src="../lib/prototype.js"></script> <script type="text/javascript"> //<![CDATA[ function check(e){ var button = mbutton(e); if(button == "L"){ alert("左ボタンクリック"); }else if(button == "M"){ alert("中央ボタンクリック"); }else if(button == "R"){ alert("右ボタンクリック"); }else{ alert("エラー"); } }
mclick2.htm 1/2 167
function initOnLoad(){ setListener($("id1"), "mousedown", check ); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <center> <h3>マウスボタン検知</h3> <p><input type="text" id="id1" value="ボタンクリック" /></p> <p id="id2">ボタンクリック </p> </center> </body> </html> mclick2.htm 2/2
168
１． e.clientX、 e.clientY [IE,FF] 原点（０，０）：ブラウザ画面左上 e.clientX： ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.clientY： ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。 ２． e.offsetX、 e.offsetY [IEのみ] e.offsetX： イベントでオフセットの親となるoffsetParentオブジェクトの左上を 基準としてオブジェクトのX座標をピクセル値で返す。 e.offsetY： イベントでオフセットの親となるoffsetParentオブジェクトの左上を 基準としてオブジェクトのY座標をピクセル値で返す。 ３． e.screenX、 e.screenY [IE,FF] 原点（０，０）：モニタ画面左上 e.screenX： スクリーン上マウス位置のX座標をピクセル値で返す。 e.screenY： スクリーン上マウス位置のX座標をピクセル値で返す。 ４． e.x、 e.y [IEのみ、e.clientX、 e.clientYと同じ] e.x： ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.y： ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。
移動するマウスポインタ位置の検出
169
マウスポインタ位置の検出
170
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> <!-- #area {position: absolute; background-color: #eeeeee; top: 5px; left: 5px; width: 300px; height: 300px;} #stat {position: absolute; top: 35px; left: 315px;} --> </style> <title>マウスボタン </title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function check(e){ document.getElementById("x1").value = e.clientX; document.getElementById("y1").value = e.clientY; document.getElementById("x2").value = e.screenX; document.getElementById("y2").value = e.screenY; }
マウスポインタ位置の検出 mpos2.htm 1/2
171
function initOnLoad(){ var observer = document.getElementById("area"); setListener(observer, "mousemove", check); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div id="area"></div> <div id ="stat"> <h4>マウスポインタ位置の検出</h4> <ul type="circle"> <li>e.clientX_<input type="text" size="5" id="x1" /></li> <li>e.clientY_<input type="text" size="5" id="y1" /></li> </ul> <ul type="circle"> <li>e.screenX<input type="text" size="5" id="x2" /></li> <li>e.screenY<input type="text" size="5" id="y2" /></li> </ul> </div> </body> <//html>
mpos2.htm 2/2
172
Ajax演習-４
従業員番号から氏名表示を下記仕様に変更 ①従業員番号（５桁）入力により氏名表示 ヒント]入力文字数は $(“emp_no”).value.length で取得
②従業員番号入力後ALTキー押下で氏名表示 ヒント] getkcodeで返されるキーコード値はスライド NO１５９
173
Ajaxのフォームコントロール操作
・ラジオボタン ・チェクボックス ・セレクトメニュー 必要性 : AjaxモデルでのＵＩ操作性向上(RIA化) メリット ：従来モデルにないＵＩ操作性を実現 Ex]サーバレスポンスデータでの動的値設定 動的絞り込み検索 デメリット：従来モデルに比べて処理が複雑
174
ラジオボタン
175
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>ラジオボタンの選択確認</title> <script type="text/javascript" src="funcs.js"></script> <script type="text/javascript" src="radioBtn.js"></script> </head> <body> <h3>ラジオボタンの選択確認</h3> <p id="pc"> <input type="radio" id=“CPU" />CPU <input type="radio" id=“RAM" />メモリ <input type="radio" id=“HDD" />ハードデスク <input type="radio" id=“DVD" />DVD </p> <hr /> <p id="result"></p> </body> </html>
radioBtn.htm
176
//<![CDATA[ function checkSel(e){ var sel = getid(e); document.getElementById("result"). innerHTML = "選択結果： " + sel; } Function initOnLoad(){ var observer = document.getElementById("pc"); setListener(observer, "click", checkSel); } setListener(window, "load“,initOnLoad); //]]>
radioBtn.js
177
チェックボックス
178
<?xml version="1.0" encoging="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>チェックボックス</title> <link rel="stylesheet" type="text/css" href=“../lib/style.css" /> <script type="text/javascript" src=”../lib/funcs.js"></script>
<script type="text/javascript" src="checkB.js"></script> </head> <body> <p id="pc"> <input type="checkbox" id=“DISPLAY" />ディスプレイ <input type="checkbox" id=“MOUSE" />マウス <input type="checkbox" id=“KEYBORD" />キーボード <input type="checkbox" id=“DVD" />DVDドライブ </p> </body> </html>
チェックボックス選択確認XHTML checkB.htm
179
チェクボックス選択確認JavaScript checkB.js
//<![CDATA[ function checked(e){ var eid =getid(e); alert("選択は " + eid); } function initOnLoad(){ setListener(id("pc"), "click", checked); } setListener(window, "load", initOnLOad); //]]>
180
チェックボックス-複数選択での処理
181
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>チェックボックス</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javascript" src="funcs.js"></script> <script type="text/javascript" src="checkBox.js"></script> </head> <body> <p id="pc"> <input type="checkbox" id="display" />ディスプレイ <input type="checkbox" id="mouse" />マウス <input type="checkbox" id="keybord" />キーボード <input type="checkbox" id="dvd" />DVDドライブ <br /><br /> <button type="button" class="b2" id="confirm">受信確認</button> </p><hr /> <table> <tr><td>選択確認</td><td id="result1"></td></tr> <tr><td>選択累積</td><td id="result2"></td></tr> <tr><td>受信確認</td><td id="result3"></td></tr> </table> </body> </html>
checkBox.htm
182
//<![CDATA[
var optcum = new Array();
var options = new Array();
function checked(e){
var xhrObj = getXhrObj();
var eid =getid(e);
if(eid != “confirm”){
optcum.push(eid);
document.getElementById(“result1”).innerText = eid;
document.getElementById(“result2”).innerHTML = optcum;
document.getElementById(“result2”).innerHTML = optcum;
} else {
for(var i = 0; i < optcum.length; i++){
if(document.getElementById(optcum[i]).checked == true)
options.push(optcum[i]);
}
xhrObj.open(“post”, “../checkbox”, false);
xhrObj.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhrObj.send(“options=” + options);
out = xhrObj.responseText;
document.getElementById(“result3”).innerHTML = out;
}
}
function initOnLoad(){
var observer = document.getElementById("pc");
setListener(observer, "click", checked);
}
setListener(window, "load", initOnLoad);
//]]>
checkBox.js
183
package domevent;
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class checkBox extends HttpServlet {
public void doPost (HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException {
int i;
String options[ ] = req.getParameterValues("options");
PrintWriter out;
res.setContentType("text/html; charset=Shift_JIS");
out = res.getWriter();
for (i = 0; i < options.length - 1; i++){
out.println(options[i] + ",");
}
out.println(options[i]);
out.close();
}
}
checkBox.java
184
セレクトメニュー
185
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <title>セレクトメニューの選択確認</title> <script type="text/javascript" src="../funcs.js"></script> <script type="text/javascript" src="selectMenu.js"></script> </head> <body> <h3>セレクトメニューの選択確認</h3> <p> <select id="pc"> <option value="SEL" id="sel"><=選択=></option> <option value="CPU" id="cpu">CPU</option> <option value="RAM" id="ram">メモリ</option> <option value="HDD" id="hdd">ハードデスク</option> <option value="DVD" id="dvd">DVD</option> </select> </p><hr /> <p id="result"></p> </body> </html>
selectMenu.htm
186
//<![CDATA[ function checkSpec(){ var source = document.getElementById("pc").value; document.getElementById("result").innerText = "選択結果： " + source; } function initOnLoad(){ var observer = document.getElementById("pc"); setListener(observer, "change", checkSpec); } setListener(window, "load", initOnLOad); //]]>
selectMenu.js
//<![CDATA[ function checkSpec(){ $(“result”).innerText = “選択結果： ” + $("pc").value; } function initOnLoad(){ setListener($(“pc”), "change", checkSpec); } setListener(window, "load", initOnLoad); //]]>
Prototype.js
187
セレクトメニュー 絞り込み検索
188
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Select2</title>
<link type="text/css" rel="stylesheet" href="../lib/style.css"/>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//JavaScript
</script>
</head>
<body>
<center class="t3">Select Menu2</center>
<table width="440" align="center">
<tr>
<td width="90" align="right">クラス1項目</td>
<td width="130" id="class1">
<select><option value="">-----クラス1選択-----</option></select>
</td>
<td width="90" align="right">クラス2項目</td>
<td width="130"id="class2">
<select><option value="">-----クラス2選択-----</option></select>
</td>
</table>
</body>
</html>
selectMenu2.htm 1/4
189
//<![CDATA[
Var xhrObj = getXhrObj();
function getClass1(){
xhrObj.open('get', 'getClass1Sel.php’);
xhrObj.onreadystatechange = getClass1Resp;
xhrObj.send(null);
}
function getClass1Resp(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resRows = xhrObj.responseText.split(“<r>");
var out = '<select id="class1List">'
+ '<option value="">----クラス1選択----</option>';
for(var i = 0; i < resRows.length; i++){
var resRow = resRows[i].split(“<i>");
for(var j = 0; j < resRow.length; j++){
if(j==0){
class1_code = resRow[j];
}else{
out += '<option value=' + class1_code + '>' + resRow[j] + '</option>';
}
}
}
out += '</select>';
$("class1").innerHTML = out;
}
}
}
selectMenu2.htm 2/4
190
function getClass2(){
var class1_code = $("class1List").value;
xhrObj.open('get', 'getClass2Sel.php?class1_code='+class1_code, false);
xhrObj.onreadystatechange = getClass2Rv;
xhrObj.send(null);
}
function getClass2Rv(){
var i, j, resRows, resRow, out, out3, code;
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
resRows = xhrObj.responseText.split(“<r>");
out = '<select id="class2List">'
+ '<option value="">---クラス2選択済---</option>';
for(i = 0; i < resRows.length; i++){
resRow = resRows[i].split(“<i>");
for(j = 0; j < resRow.length; j++){
if(j==0){
class2_code = resRow[j];
}else{
out += '<option value=' + class2_code + '>' + resRow[j] + '</option>';
}
}
}
out += '</select>';
$("class2").innerHTML = out;
setListener($("class2List"), "change", getClass3);
}
}
}
selectMenu2.htm 3/4
191
function getClass3(){
alert($("class2List").value);
}
Function initOnLoad(){
setListener($("class1List"), "change", getClass2);
}
setListener(window, "load", initOnLoad);
setListener(window, "load", getClass1,);
selectMenu2.htm 4/4
192
<html>
<head>
<title>ActiveWidgets Examples</title>
<script src="../awidgets/runtime/lib/aw.js"></script>
<link href="../awidgets/runtime/styles/xp/aw.css" rel="stylesheet"></link>
</style>
</head>
<body class="aw-background-1">
<table>
<tr>
<td><p>Combo:</p><span id="combo1"></span></td>
</tr>
<script>
var itemTextArray = ["Home", "Favorites", "Font size", "Search"];
var itemImageArray = ["home", "favorites", "fontsize", "search"];
var combo = new AW.UI.Combo;
combo.setId("combo1");
combo.setControlText("Combo");
combo.setControlImage("favorites");
combo.setItemText(itemTextArray);
combo.setItemImage(itemImageArray);
combo.setItemCount(4);
combo.refresh();
</script>
</body>
</html>
コンボボックス
http://cs001.spacewarp.co.jp:8080/ajax/awidgets/combo-w.htm
ActiveWidgetsコントロールサンプル
193
Ajax演習-５
従業員番号から氏名表示 従業員番号をセレクトメニューからの 選択表示に変更 ※従業員番号のセレクトメニュー設定も非同期 通信で動的に行ってください。 解答はselect-base.htmのAAAAA～FFFFF
を埋める形で行って下さい。
194
(5)ＵＩ表示 5 DOMを使用してイベントの相互作用と動的な画面表示を行う dynamic display and interaction using the Document Object Model
195
DOMとDynamicHTML（DHTML）
1997年 Microsoft、Netscape：DynamicHTML HTMLに独自の拡張機能をそれぞれのWebブラウザに組み込んだ。 =>両社で仕様が違うため、Webブラウザごとで表示が異なる。 1998年 W3CXML：DOM XMLやHTMLなどをコントロールするための言語非依存 のAPIである「DOM(Document Object Model)」を勧告。 =>W3Cでは、DHTMLを「ベンダー固有のマーケティング用語」として 扱っているため、各勧告の中にも「Dynamic HTML」や「DHTML」と いった表現は採用されていない。
DOMオブジェクト (ツリー構造文書)
DOM API (言語非依存)
DynamicHTML
W3C勧告
Microsoft JScriptに実装 NetScape JavaScriptに実装
196
Ajaxモデルでの動的表示方式
１. HTMLタグの流し込み
２. DOMノード操作での動的ノード生成
３. XSLT(スタイルシート)での動的画面生成
４．画像ファイルの非同期ダウンロード
197
DOMノード操作概要
ノードの種類 ・要素ノード (element node) ・属性ノード (attribute node) ・テキストノード(text node)
<div id=“id1” class=“class1”>DOMノード操作</div>
要素ノード <div>
テキストノード DOMノード操作
属性ノード id=“id1” , class=“class1”
例]
198
インタフェース名 概要 Node DOMツリーの一つのノードを表す。 以下は全てNodeインタフェースの継承。 Attr 属性を表す CharacterData 文字データを表す Text CharacterDataを継承し、 要素や属性の内容の文字列を表す Comment CharacterDataを継承し、 コメントの内容の文字列を表す CDATASection Textを継承し、CDATAセクションを表す Document XML文書全体を表す DocumentFragment DOMツリーの一部を表す DocumentType DTDを表す Element 要素を表す Entity 実体を表す EntityReference 実体参照を表す Notation ノーテーションを表す ProcessingInstruction 処理命令を表す
参考]DOMツリーのノードの種類
199
body 要素
table 要素
tbody 要素
id=“obs”
属性
tr 要素
tr 要素 id=“tgt1”
属性
id=“tgt2”
属性
td 要素
td 要素
td 要素
td 要素
“埼玉”
テキスト “千葉”
テキスト
“神奈川”
テキスト “山梨”
テキスト
h1 要素
“東京近県”
テキスト
DOMツリーとノード
要素：要素ノード
属性:属性ノード
テキスト：テキストノード
document hｔｍｌ
200
xhrObj.onreadystatechange = function(){ if(xhrObj.readyState == 4){ if(xhrObj.status == 200){ finalItems = xhrObj.responseText.split(“<i>"); for(var i in finalItems){ tagNode = document.createElement("p"); tagNode.setAttribute("id", finalItems[i]); docNode = document.createTextNode('[0] '+finalItems[i]); tagNode.appendChild(docNode); document.getElementById("tree").appendChild(tagNode); } } } }
(1) DOMノード操作サンプル
201
[1] ノードの参照
PreviousSibling
firstChild lastChild getAttribute
202
getAttribute メソッド
書式] object.getAttribute('attributeName‘ [, 'type‘]) 説明] オブジェクトの指定された属性の値を返す。 引数] attributeNameは属性の名前を指定。 typeは種類を指定。次のいずれか。 0（アトリビュート名の大文字小文字の区別をしない） 1（アトリビュート名の大文字小文字の区別をする） 2（値を返す） 返値] アトリビュートの値 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
属性ノードの参照
203
getAttributeメソッド
204
function domFunc(){ var i, rows = 3, cols = 2, elm = new Array(rows); for(i = 0; i < rows; i++ ){ elm[i] = new Array(cols); } elm[0][0] = 'document.getElementById("emp_no").getAttribute("type")'; elm[1][0] = 'document.getElementById("emp_no").getAttribute("size")'; elm[2][0] = 'document.getElementById("emp_no").getAttribute("id")'; elm[0][1] = document.getElementById("emp_no").getAttribute("type"); elm[1][1] = document.getElementById("emp_no").getAttribute("size"); elm[2][1] = document.getElementById("emp_no").getAttribute("id"); var view = "<table border='1' width='430'><tbody>" + "<tr><th>メソッド</th></th><th>値</th></tr>" for(i = 0; i < rows; i++){ view += "<tr><td align='center'>"+elm[i][0] + "</td><td align='center'>"+elm[i][1]+"</td></tr>"; } view += "</tbody></table>"; document.getElementById("view").innerHTML = view; }
getAttribute.htm
205
getAttributeNode メソッド
書式] object.getAttributeNode('attributeName') 説明] オブジェクトの指定された属性のノード値を返す。 引数] AttributeNameは属性名を指定。 返値] attributeオブジェクトを返す。 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]
属性ノードの参照
206
var value1 = document.getElementById(“id1”).getAttributeNode(“id”).nodeType; =>value１に 2(属性ノードのノードタイプ) が返される。 var value1 = document.getElementById(“id1”).getAttributeNode(“ｉｄ”).nodeName; =>value１に “id”(id属性の属性名) が返される。 var value1 = document.getElementById(“id1”).getAttributeNode(“id”).nodeValue; =>value１に “id1”(id属性の属性値) が返される。 ※.getAttributeNodeメソッドの引数に”name”を指定すれば、name属性に関して 同様の値が参照される。.
getAttributeNodeサンプル
207
getAttributeNodeメソッド
208
function domFunc(){ var i, rows = 3, cols = 2, elm = new Array(rows); for(i = 0; i < rows; i++ ){ elm[i] = new Array(cols); } elm[0][0] = 'document.getElementById("emp_no").getAttributeNode("size").nodeType'; elm[1][0] = 'document.getElementById("emp_no").getAttributeNode("size").nodeName'; elm[2][0] = 'document.getElementById("emp_no").getAttributeNode("size").nodeValue'; elm[0][1] = document.getElementById("emp_no").getAttributeNode("size").nodeType; elm[1][1] = document.getElementById("emp_no").getAttributeNode("size").nodeName; elm[2][1] = document.getElementById("emp_no").getAttributeNode("size").nodeValue; var view = "<table border='1' width='500'><tbody>" + "<tr><th>メソッド</th></th><th>値</th></tr>" for(i = 0; i < rows; i++){ view += "<tr><td align='center'>"+elm[i][0] + "</td><td align='center'>"+elm[i][1]+"</td></tr>"; } view += "</tbody></table>"; document.getElementById("view").innerHTML = view; }
getAttributeNode.htm
209
属性ノードの参照 サンプルプログラム－２
210
revattr2.htm
//<![CDATA[ function revNode(){ var out = "<br/>"; var tags = tn("*"); for(var i = 0; i < tags.length; i++){ if(tags[i].getAttributeNode("id").nodeValue != ""){ out += "ノードタイプ：" + tags[i].getAttributeNode("id").nodeType; out += " ノード名：" + tags[i].getAttributeNode("id").nodeName; out += " ノード値：" + tags[i].getAttributeNode("id").nodeValue ; out += "<br/>" } } $("status").innerHTML = out; } function initOnLOad(){ setListener($("sel"), "click", revNode); } setListener(self, "load", initOnLOad); //]]> 211
3.子ノードの参照
var value1 = document.getElementById(“id1”).firstChild.nodeType; =>value１に ID属性で値”id1を持つノード、つまり<p>タグの最初の子ノード ” DOMノード参照１”のノードタイプ3(テキストノードのノードタイプ) が返される。 var value1 = document.getElementById(“id1”).firstChild.nodeValue; =>value１に ” DOMノード参照１”が返される。 childnodesは子ノード総てのリストを返し、インデックスで第何子かを指定 することができる。 var value1 = document.getElementById(“div1”).childNodes.nodeName; =>value1にはdivタグの子ノードすべてが配列で返される。 var value1 = document.getElementById(“div1”).childNodes[0].nodeName; => value1にはdivタグの最初の子ノードが返される。
212
firstChild プロパティ
書式] object.firstChild 説明] オブジェクトの最初の子ノードを返す。 firstChildはchildNodes[0]と同じになる 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
lastChild プロパティ
書式] object.firstChild 説明] オブジェクトの最後の子ノードを返す。 firstChildはchildNodes[object.childNodes.length-1]と同じになる 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
子ノードの参照
213
firstChild,lastChildプロパティ
214
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var i, rows = 2, cols = 2, elm = new Array(rows); for(i = 0; i < rows; i++ ){ elm[i] = new Array(cols); } elm[0][0] = 'document.getElementsByTagName("tr")[1].fitstChild.firstChild.nodeValue'; elm[1][0] = 'document.getElementsByTagName("tr")[1].lastChild.firstChild.nodeValue'; elm[0][1] = document.getElementsByTagName("tr")[0].firstChild.firstChild.nodeValue; elm[1][1] = document.getElementsByTagName("tr")[0].lastChild.firstChild.nodeValue; var view = "<table border='1' width='550'><tbody>" + "<tr><th>メソッド</th></th><th>値</th></tr>" for(i = 0; i < rows; i++){ view += "<tr><td align='center'>"+elm[i][0] + "</td><td align='center'>"+elm[i][1]+"</td></tr>"; } view += "</tbody></table>"; document.getElementById("view").innerHTML = view; }
fastLastChild.htm (1/2)
215
function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div><hr /> <center> <h3>fistChild,lastChildプロパティ</h3> <div id="view"></div> </center> </body> </html>
fastLastChild.htm (2/2)
216
childNodes コレクション
書式] object.childNodes object.childNodes[index] object.childNodes.length 機能] オブジェクトの子ノードを返す。 評価値は配列で最初の子ノードは0番になる。 引数] id属性値。 返値] 子ノードオブジェクトの配列 適用] object 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
子ノードの参照
217
childNodesプロパティ
218
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var i, rows = 2, cols = 2, elm = new Array(rows); for(i = 0; i < rows; i++ ){ elm[i] = new Array(cols); } elm[0][0] = 'document.getElementsByTagName("tr")[0].childNodes[0].firstChild.nodeValue'; elm[1][0] = 'document.getElementsByTagName("tr")[0].childNodes[1].firstChild.nodeValue'; elm[0][1] = document.getElementsByTagName("tr")[0].childNodes[0].firstChild.nodeValue; elm[1][1] = document.getElementsByTagName("tr")[0].childNodes[1].firstChild.nodeValue; var view = "<table border='1' width='600'><tbody>" + "<tr><th>メソッド</th></th><th>値</th></tr>" for(i = 0; i < rows; i++){ view += "<tr><td align='center'>"+elm[i][0] + "</td><td align='center'>"+elm[i][1]+"</td></tr>"; } view += "</tbody></table>"; document.getElementById("view").innerHTML = view; }
childNodes.htm
219
hasChildNodes メソッド 書式] object.hasChildNodes() 機能] 子ノードがあるかどうか返す。 子ノードがある場合はtrue、ない場合はfalseを返す。 引数] id属性値。 返値] 真偽値 適用] object 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
子ノードの参照-3
function check() { if ($("sample").hasChildNodes()) { alert(“子ノードがあります。”); } else { alert(“子ノードがありません。”); } }
220
hasChildNodesメソッド
221
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var nodes = document.getElementsByTagName("td"); for(var i = 0; i < nodes.length; i++){ if(nodes[i].hasChildNodes){ alert("子ノードがあります"); }else{ alert("子ノードがありせん"); } } } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); }
hasChildNodes.htm
222
setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> <hr /> <center> <h3>hasChildNodesメソッド</h3> <div id="view"></div> </center> </body> </html>
hasChildNodes.htm
223
3.兄弟ノードの参照（nextSibling、previousSibling） ・兄弟ノードはnextSiblingメソッドで参照することができる。 ・firstChild.で長子が参照されたあとnextSiblingの適用で次子が参照される。 var value1 = document.getElementById(“id1”).nextSibling.nodeName; =>value１に次の兄弟ノードのタグ名が返される。 ・次子から三子、四子とたどっていく場合にはnextSiblingを連結して適用していく 例] document.getElementById(“id1”).nextSibling.nextSibling.nextSibling.nodeValue;
4.親ノードの参照(parentNode) 親ノードはparentNodeプロパティで参照される。 var value1 = document.getElementById(“id1”).parentNode.nodeName; =>value１に ”DIV”(親ノードのタグ名) が返される。
224
nextSibling プロパティ 書式] object.nextSibling 機能] オブジェクトの次の兄弟ノードを参照する。 返値] ノードオブジェクトの参照 適用] 多くのノードオブジェクト 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
兄弟ノードの参照
previousSibling プロパティ 書式] object.previousSibling 機能] オブジェクトの前の兄弟ノードを参照する。 返値] ノードオブジェクトの参照 適用] 多くのノードオブジェクト 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
225
nextSibling、previousSibling
226
siblingNode.htm
(1/2) <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var i, rows = 2, cols = 2, elm = new Array(rows); for(i = 0; i < rows; i++ ){ elm[i] = new Array(cols); } elm[0][0] = 'document.getElementsByTagName("td")[0].nextSibling.firstChild.nodeValue'; elm[1][0] = 'document.getElementsByTagName("td")[1].previousSibling.firstChild.nodeValue'; elm[0][1] = document.getElementsByTagName("td")[0].nextSibling.firstChild.nodeValue; elm[1][1] = document.getElementsByTagName("td")[1].previousSibling.firstChild.nodeValue; var view = "<table border='1' width='600'><tbody>" + "<tr><th>メソッド</th></th><th>値</th></tr>" for(i = 0; i < rows; i++){ view += "<tr><td align='left'>"+elm[i][0] + "</td><td align='center'>"+elm[i][1]+"</td></tr>"; } view += "</tbody></table>"; document.getElementById("view").innerHTML = view; } 227
siblingNode.htm
(2/2)
function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div><hr /> <center> <h3>nextSibling,previousSiblingプロパティ</h3> <div id="view"></div> </center> </body> </html> 228
parentNode プロパティ 書式] object.parentNode 機能] 親ノードを参照する。 適用] object 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
親ノードの参照
229
parentNodeプロパティ
230
parentNode.htm (1/2)
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var i, rows = 2, cols = 2, elm = new Array(rows); for(i = 0; i < rows; i++ ){ elm[i] = new Array(cols); } elm[0][0] = 'document.getElementsByTagName("input")[1].parentNode.firstChild.nodeValue'; elm[1][0] = 'document.getElementsByTagName("input")[2].parentNode.firstChild.nodeValue'; elm[0][1] = document.getElementsByTagName("input")[1].parentNode.firstChild.nodeValue; elm[1][1] = document.getElementsByTagName("input")[2].parentNode.firstChild.nodeValue; var view = "<table border='1' width='600'><tbody>" + "<tr><th>メソッド</th></th><th>値</th></tr>" for(i = 0; i < rows; i++){ view += "<tr><td align='left'>"+elm[i][0] + "</td><td align='center'>"+elm[i][1]+"</td></tr>"; } view += "</tbody></table>"; document.getElementById("view").innerHTML = view; } 231
parentNode.htm (2/2)
function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div><hr /> <center> <h3>parentNodeプロパティ</h3> <div id="view"></div> </center> </body> </html> 232
body 要素
table 要素
tbody 要素
id=“obs”
属性
h1 要素
“東京近県”
テキスト
createElement createElement
createTextNode
setAttribute
[2] ノードの追加
233
appendChild
createElement メソッド 書式] object.createElement(element)
機能] 引数で指定したエレメントを生成する。 引数] 要素(エレメント)の名前 戻値] 作成したオブジェクト。 適用] document 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
例] divノードの生成 var div1= document.createElement(“div");
要素ノードの生成
234
createTextNode メソッド 書式] object.createTextNode(text) 機能] 引数で指定されたテキストノードを生成する 引数] 作成するテキスト 返値] TextNodeオブジェクト 適用] document 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]
例] テキストノード “Ａｊａｘ基礎講座” を生成 var text1 = document.createTextNode(“Ajax基礎講座");
テキストノードの生成
235
appendChild メソッド 書式] object.appendChild(newChild) 機能] 要素オブジェクトに引数指定のオブジェクトを追加する。 引数] 追加する子ノードオブジェクト 返値] ノードオブジェクト 適用] 多くのタグ 対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
ノードの追加
function add() { var newNode = document.createElement("LI"); var text = document.createTextNode(“追加しました。”); newNode.appendChild(text); var parent = document.getElementById("sample"); parent.appendChild(newNode); } 236
例]
ノードの生成
237
createNode.htm (1/2)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var eNode = document.createElement("div"); var tNode = document.createTextNode("追加されたテキストノード"); eNode.appendChild(tNode); document.getElementById("view").appendChild(eNode); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head>
238
createNode.htm (2/2)
<body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> <hr /> <center> <h3>createElement,createTextNode,appendChild</h3> <div id="view"></div> </center> </body> </html>
239
属性ノードの追加
setAttribute メソッド
書式]object.setAttribute('attributeName', 'value', ['type‘] ) 機能] オブジェクトに、引数で指定された属性を追加する。
引数] attributeNameはアトリビュート名を指定。 valueは値を指定。 typeは種類を指定。次のいずれか。 0（アトリビュート名の大文字小文字の区別をしない） 1（アトリビュート名の大文字小文字の区別をする）
返値] なし
例] div1 = document.createElement(“div"); div1.setAttribute("id", “id1”]);
240
属性の追加
241
setAttribute.htm (1/2)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ document.getElementById("emp_no").setAttribute("class", "class1"); var attr = document.getElementById("emp_no").getAttribute("class"); alert("属性値 = "+attr+" のclass属性が追加された。"); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script>
242
setAttribute.htm (2/2)
</head> <body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> <hr /> <center> <h3>setAttribute,getAttribute</h3> <div id="view"></div> </center> </body> </html>
243
属性の変更は、属性の上書き（setAttribute）で可能
244
setAttribute2.htm (1/2)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ document.getElementById("emp_no").setAttribute("size", “20”); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head>
245
setAttribute2.htm (2/2)
<body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 変更 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="8" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> <hr /> <center> <h3>setAttributeメソッド</h3> </center> </body> </html>
246
insertBefore メソッド
書式] object.insertBefore(newNode, existingNode)
機能] objectで指定されたノード内で、第２引数で指定された既存ノード オブジェクトの前に指定された新しいノードオブジェクトを挿入する。 引数] newNode： 新しいノードオブジェクトを指定。 existingNode： 既存のノードオブジェクトを指定。 戻値] ノードオブジェクト。
対応] [IE5～][Firefox 1～][Safari 1～][Opera 8～][Netscape 6～]
既存ノードの前に新規ノードオブジェクトを挿入する
247
insertBefore
248
insertBefore.htm (1/2)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var divNode = document.createElement("div"); var textNode = document.createTextNode("情報システム部") divNode.appendChild(textNode); preNode = document.getElementsByTagName("table")[0]; document.getElementsByTagName("div")[0].insertBefore(divNode, preNode); }
249
insertBefore.htm (2/2) function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <div align="center"> <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> </body> </html> 250
replaceChild メソッド
書式] object.replaceChild(newNode, oldNode)
機能] オブジェクトの指定された子ノードオブジェクトを置き換える。
引数] newChildは新しい子供のノードオブジェクトを指定。 oldChildは古い子供のノードオブジェクトを指定。
返値] ノードオブジェクトを返す。
子ノードの置き換え
function change() { var node = document.getElementById("sample"); var oldNode = node.firstChild; var newNode = document.createTextNode(“新しいノード”); node.replaceChild(newNode, oldNode); }
251
replaceChild
252
replaceChild.htm(1/2)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var parNode = document.getElementsByTagName("td")[1]; var curText = parNode.firstChild; var newText = document.createTextNode("所属部署"); parNode.replaceChild(newText, curText); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); 253
replaceChild.htm(2/2)
//]]> </script> </head> <body> <div align="center" > <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> </body> </html>
254
テキストの挿入
insertData メソッド
書式] object.insertData(‘offset’, ‘text’)
機能] オブジェクト(object)に、第２引数で指定されたテキストを 挿入する。 引数] offsett：既存テキストの、どの文字位置にテキストを挿入 するかを指定する。 text：挿入されるテキストリテラル。 ※テキスト位置は英数字と漢字を区別しないで指定可能。 適用] テキストノード、コメント 返値] なし
255
insertData
256
insertData.htm 1/2 <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var parNode = document.getElementsByTagName("td")[1]; parNode.firstChild.insertData(3, "部署と");; } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]> </script>
257
insertData.htm 2/2
</head> <body> <div align="center" > <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> </body> </html>
258
その他のノード追加用DOMメソッド
object.insertCell(index)
・TDオブジェクトを挿入
object.insertRow(index)
・TRオブジェクトを挿入
object.insertAdjacentText('type','text')
・オブジェクトの指定された位置に隣接するテキストを挿入
object.insertAdjacentHTML('type','HTML')
・オブジェクトの指定された位置に隣接するHTMLを挿入
object.replaceAdjacentText('type','text')
・指定された位置に隣接するテキストを置換
object.replaceNode(oNode)
・オブジェクトの指定されたノードオブジェクトを置換
object.replace('URL')
・locationオブジェクトの指定されたURLを置換 259
removeNode メソッド
書式] object.removeNode(“value”) 機能] 指定されたノードオブジェクトを削除する。 引数] valueは値を指定。次のいずれか。 true（childNodesコレクションを含める） false（childNodesコレクションを含めない） 返値] ノードオブジェクトを返す。
[３] ノードの削除
ノードオブジェクトを削除
260
ノードオブジェクトの削除
261
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var target = document.getElementById("emp_name"); target.parentNode.removeNode(true); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad);
removeNode.htm 1/2
262
//]]> </script> </head> <body> <div align="center" > <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> </body> </html>
removeNode.htm 2/2
263
removeChild メソッド
書式] pnode.removeChild(cnode) 機能] オブジェクトの指定された子ノードオブジェクトを 削除する。 引数] pnode：親ノードオブジェクト。 cnode：子ノードオブジェクト。 返値] ノードオブジェクト。 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]
子ノードオブジェクトを削除する
264
ID値id1を持つ親ノードの３番目の子ノードを削除 function remove() { var parentNode = document.getElementById(“id1"); parentNode.removeChild(parentNode.childNodes[2]); } ID値id1を持つノード自身を削除する function remove() { var selfNode = document.getElementById(“id1"); selfNode.parentNode.removeChild(selfNode); }
removeChild サンプル
265
子ノードの削除
266
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DOMノード操作</title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function domFunc(){ var target = document.getElementById("emp_name"); target.parentNode.removeChild(target); } function initOnLoad(){ var observer = document.getElementById("sel"); setListener(observer, "click", domFunc); } setListener(window, "load", initOnLoad); //]]>
removeChild.htm 1/2
267
</script> </head> <body> <div align="center" > <h3>従業員番号から氏名表示<input type="button" id="sel" value=" 表示 "/></h3> <table> <tbody> <tr> <td>従業員番号:<input type="text" size="10" id="emp_no" /></td> <td>従業員氏名:<input type="text" size="14" id="emp_name" /></td> </tr> </tbody> </table> </div> </body> </html>
removeChild.htm 2/2
268
removeAttribute メソッド 書式] object.removeAttribute('attributeName', ['type‘]) 機能] オブジェクトの指定された属性値を削除する。 引数] attributeName：アトリビュート名を指定。 type：は種類を指定。次のいずれか。 0（アトリビュート名の大文字小文字の区別をしない） 1（アトリビュート名の大文字小文字の区別をする） 返値] true（削除）、false（非削除） 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]
例] $(“id1”). removeAttribute(‘name', 0)
属性（attribute）を削除
269
Ajax演習-６
従業員番号から氏名表示 選択従業員番号と氏名を画面下部 に履歴表示して下さい。 解答はseldom-base.htmのAAAAA～FFFFF
を埋める形で行って下さい。
270
4. XMLとXSLTを使用したデータ交換と操作を行う data interchange and manipulation using XML and XSLT
XML/XSLT
271
XMLドキュメント
スタイルシート
XMLデータの受信と表示-1 ・製品選択項目クリックで対応する商品一覧を表示 ・XMLファイルをサーバから受け取る。 ・DOMノード操作で画面表示を行う。
製品選択項目
製品一覧
272
XHTML
JavaScript関数
XMLデータの受信と表示-1 機能概要
XMLファイル
XHR
DOMオブジェクト
データの取出し
データ組立・表示
[使用ファイル] HTMLファイル xmlSmpl1.htm XMLファイル xml1.xml
JavaScript外部フィル funcs.js
サーバ環境
マウスクリックイベント
273
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="xml2.xsl" type="text/xsl" ?>
<mart>
<computer>
<model>PCモデル1</model>
<os>WindowsXP Home</os>
<cpu>Celeron2 Ghz</cpu>
<memory>SDRAM 256MB</memory>
<hdd>40GB 7200rpm</hdd>
<dvd>CD-ROM</dvd>
<display>NA</display>
<price>62,000</price>
</computer>
<computer>
<model>PCモデル2</model>
<os>WindowsXP Pro</os>
<cpu>Celeron2 Ghz</cpu>
<memory>SDRAM 512MB</memory>
<hdd>60GB 7200rpm</hdd>
<dvd>CD-RW</dvd>
<display>15インチ液晶</display>
<price>72,000</price>
</computer>
<computer>
<model>PCモデル3</model>
<os>WindowsXP Pro</os>
<cpu>Pentium4 2Ghz</cpu>
<memory>SDRAM 512MB</memory>
<hdd>60GB 7200rpm</hdd>
<dvd>CDROM DVD</dvd>
<display>17インチ液晶</display>
<price>72,000</price>
</computer>
<computer>
<model>PCモデル4</model>
<os>RedHat9</os>
<cpu>Pentium4 2Ghz</cpu>
<memory>SDRAM 512MB</memory>
<hdd>80GB 7200rpm</hdd>
<dvd>CD-ROM</dvd>
<display>NA</display>
<price>72,000</price>
</computer>
<computer>
<model>PCモデル5</model>
<os>Fedora Core4</os>
<cpu>Pentium4 3Ghz</cpu>
<memory>SDRAM 1GB</memory>
<hdd>80GB 7200rpm</hdd>
<dvd>CD-ROM</dvd>
<display>19インチ液晶</display>
<price>72,000</price>
</computer>
</mart>
XMLファイル(xml1.xml)
274
XMLHttpRequestオブジェクト
responseXMLプロパティ 書式] readonly Document responseXML 機能] リクエストに対する応答はtext/xmlストリームとして解釈される。 属性のDocumentはレスポンスがDOMドキュメントオブジェクトで あることを表している。 リクエストが不成功の場合、または完了していない場合はNULLが 返される。
例] xhrObj.onreadystatechange = function() { if (xhrObj.readyState == 4) { if(xhrObj.status==200) { var xmlVal = xhrObj.responseXML; ： } } }
※Internet Explorerの場合、受信データはUnicode文字列として解釈される。
275
getElementsByTagName メソッド
書式] object. getElementsByTagName(“タグ名”) 機能] 指定したタグ名を持つオブジェクト（要素ノード）を配列形式で返す 引数] タグ名 返値] オブジェクトの参照 適用] document 対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]
要素ノードの参照
※ワイルドカード “*” で総てのノード要素を指定することが出来る。 ※funcs.jsでショートカット関数が用意されている。 例] document.getElementsByTagName(“div”);
↓
tn(“div”); // funcs.js
276
<?xml version="1.0" encoging="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Ajax Sample1</title>
<style type="text/css">
#items {background-color: #ccffcc}
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
var httpObj;
function reqItems(e){
var reqXmlUri = "xmldoc/xml" + getid(e).substr(4,1) +".xml";
new Ajax.Request(reqXmlUri, {method:'get', onComplete:out});
}
xmlSmp1.htm 1/3
277
function out(data){
var resXml = data.responseXML;
var model = resXml.getElementsByTagName("model");
var os = resXml.getElementsByTagName("os");
var cpu = resXml.getElementsByTagName("cpu");
var memory = resXml.getElementsByTagName("memory");
var hdd = resXml.getElementsByTagName("hdd");
var price = resXml.getElementsByTagName("price");
var out = '<table align="center" border="1">'
+ '<tr bgcolor="#ccffcc">'
+ '<th>モデル</th><th>OS</th><th>CPU</th>'
+ '<th>メモリ</th><th>ハードディスク</th><th>価格</th>'
+ '</tr>';
for(var i = 0; i < model.length; i++){
out += '<tr><td>' + model[i].firstChild.nodeValue + '</td>'
+ '<td>' + os[i].firstChild.nodeValue + '</td>'
+ '<td>' + cpu[i].firstChild.nodeValue + '</td>'
+ '<td>' + memory[i].firstChild.nodeValue + '</td>'
+ '<td>' + hdd[i].firstChild.nodeValue + '</td>'
+ '<td>' + price[i].firstChild.nodeValue + '</td></tr>';
}
out += '</table>';
$("out").innerHTML = out;
}
xmlSmp1.htm 2/3
278
Function initOnLoad(e) {
setListener($("items"), "click", reqItems);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<table border="1" align="center" width="600">
<tr id="items">
<td align="center" id="item1">デスクトップ</td>
<td align="center" id="item2">ノート PC</td>
<td align="center" id="item3">サーバ製品</td>
<td align="center" id="item4">周辺機器</td>
<td align="center" id="item5">プリンタ</td>
</tr>
</table>
<br />
<div id="out"></div>
</body>
</html>
xmlSmp1.htm 3/3
279
XML(eXtensoble Markup Language) ：文書やデータの意味や構造を記述するためのマークアップ言語。 SGML(ISO8879)のサブセットであり、XML文書は，必ずSGML規格に適合する。 仕様策定：W3C 策定目的：任意のデータを HTMLと同様の感覚で送受信できることを目標に作成された XML ドラフト (1996年11月) XML ver1.0勧告 (1998年2月) XML ver1.0 Second Edition勧告 (2000年10月)
XSLT(XML Stylesheet Language Transformations） ：XML文書の構造を別の形式に変形するための変換ルールを記述する言語で、 記述されたXSLT文書はスタイルシート(XSLスタイルシート)と呼ばれる。 出力形式は、XML、HTML、プレインテキストなどがある。 仕様策定：W3C XSLT ドラフト (1999年10月) XSLT ver1.0勧告 (1998年2月) XSLT ver1.0 Second Edition勧告 (2000年10月)
(1) XMLとXSLT
280
・XSLT言語
・XPath
XML文書
(データ)
XSLTプロセッサ
・MSXML :IE
・Xalan :Apache
・XT :Java
など
XSLT
スタイルシート
変換後文書
・HTML,XHTML
・テキスト文書
など
(2) XML/XSLTとXSLTプロセッサ
abc.xml
xyz.xsl
※XMLデータをHTMLと 同じようにWebブラウザ に表示するには、XSLT スタイルシートが必要。
※XSLスタイルシート を変えることにより、同 じXML文書のWebブラウ ザでの表現を変える事 ができる。
XML文書ｵﾌﾞｼﾞｪｸﾄ名.transformNode(ｽﾀｲﾙｼｰﾄｵﾌﾞｼﾞｪｸﾄ名);
281
<?xml version="1.0" encoding="utf-8" ?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" > <xsl:template match="/"> <table width="400" border="1"> <tr> <th width=“200”>タイトル</th> <th width=“100”>ページ数</th> <th width=“100”>価格</th> </tr> <xsl:for-each select="/book/computer"> <tr> <td align="left"><xsl:value-of select="title" /></td> <td align="right"><xsl:value-of select="page" /></td> <td align="right"><xsl:value-of select="price" /></td> </tr> </xsl:for-each> </table> </xsl:template> </xsl:stylesheet>
(3) XSLスタイルシート例
282
XMLデータの受信と表示-２ ・製品選択項目クリックで対応する商品一覧を表示 ・XMLファイル、 スタイルシートをサーバから受け取る。 ・ブラウザ内蔵のパ－サを利用して画面表示を行う。
283
XHTML JavaScript
Ajaxサンプルプログラム2 機能概要図
XMLファイル
XHR
[使用ファイル] HTMLファイル xmlSmpl2.htm XMLファイル xml1.xml, xml2.xml, xml5.xml XSLファイル xml1.xsl, xml2.xsl, xml5.xsl
JavaScript外部フィル funcs.js
スタイルシート
サーバ環境
XHR
イベントリスナ
イベント
XML
ｽﾀｲﾙｼｰﾄ
XSLTパーサ
284
<?xml version="1.0" encoging="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Ajax Sample2</title>
<style type="text/css">
.items {background-color: #ccffcc}
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqItems(e){
var xhrObj = getXhrObj();
xhrObj.open("get", "xmldoc/xml"+getid(e).substr(4,1)+".xsl" , false);
xhrObj.send(null);
var dataXsl = xhrObj.responseXML;
xhrObj.open("get", "xmldoc/xml"+getid(e).substr(4,1)+".xml" , false);
xhrObj.send(null);
var dataXml = xhrObj.responseXML;
$("out").innerHTML = dataXml.transformNode(dataXsl.documentElement);
}
xmlSmp2.htm
1/2
285
function initOnLoad(){
setListener($("item"), "click", reqItems);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<table id="item" border="1" align="center" width="600">
<tr class="items">
<td align="center" id="item1">デスクトップ</td>
<td align="center" id="item2">ノート PC</td>
<td align="center" id="item3">サーバ製品</td>
<td align="center" id="item4">周辺機器</td>
<td align="center" id="item5">プリンタ</td>
</tr>
</table>
<br />
<div id="out"></div>
</body>
</html>
xmlSmpl2.htm
2/2
286
<?xml version="1.0" encoging="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Ajax Sample2</title>
<style type="text/css">
.items {background-color: #ccffcc}
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqItems(e){
var req = "xmldoc/xml"+getid(e).substr(4,1);
var xslDat = getsynx(req + ".xsl");
var xmlDat = getsynx(req + ".xml");
$("out").innerHTML = xmlDat.transformNode(xslDat.documentElement);
}
xmlSmp3.htm
1/2
287
function initOnLoad(){ setListener($("item"), "click", reqItems); } setListener(window, "load", initOnLoad); //]]> </script> </head> <body> <table id="item" border="1" align="center" width="600"> <tr class="items"> <td align="center" id="item1">デスクトップ</td> <td align="center" id="item2">ノート PC</td> <td align="center" id="item3">サーバ製品</td> <td align="center" id="item4">周辺機器</td> <td align="center" id="item5">プリンタ</td> </tr> </table> <br /> <div id="out"></div> </body> </html>
xmlSmp3.htm
2/2
288
JSON（JavaScript Object Notation）
JavaScriptにおけるオブジェクトの表記法をベースとした 軽量なデータ記述
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<children>
<girl>花子</girl>
<boy>太郎</boy>
<boy>次郎</boy>
</children>
{
“children”: {
“girl”: “花子”,
“boy”: [ “太郎”, “次郎” ]
}
}
XML
JSON
289
290
JSONデータの書式 オブジェクトと配列の組合せで構造化されたデータを表現する。
1.オブジェクトは{}で全体を囲み、キーと値のペアをコロン（:）で区切って記述。
カンマ（,）で複数のキーと値を記述できるが、キーには文字列のみ使用可能。
例： { "emp_no": "A0001", "emp_name": "山田太郎“}
2.配列は繰り返し項目を表現する際に使用する。
全体を[]で囲み、値をカンマ（,）で区切って列挙。
例： [“山田太郎”, “鈴木健児”, “田中佳子”]
3.構造化されたデータを表現するため、オブジェクトと配列を自由にネストさ
せることができる。
例： { “emp_name”: [“山田太郎”, “鈴木健児”, “田中佳子”]}
291
JSONプログラムの処理手順
1.非同期通信でJSONデータをテキストモードで受信
2. 受信データをeval()関数で評価
⇒受信データはJavaScriptのオブジェクトに変換される。
例] var resp = eval("(" + xhrObj.responseText + ")");
3.受信データオブジェクトから、連想配列と配列のアクセス形式
でデータを所得する。
例] var emp_no = resp.empmas.employee[i].emp_no;
or
var emp_no = resp["empmas"]["employee"][i]["emp_no"];
JSONデータで従業員情報表示
292
{ "empmas":
{ "employee":
[
{ "emp_no": "A0001", "emp_name": "山田太郎", "section": "総務部"},
{ "emp_no": "A0002", "emp_name": "鈴木健児", "section": "総務部"},
{ "emp_no": "A0003", "emp_name": "田中佳子", "section": "総務部"},
{ "emp_no": "A0004", "emp_name": "佐藤弘明", "section": "経理部"},
{ "emp_no": "A0005", "emp_name": "伊藤広志", "section": "人事部"}
]
}
}
jsonemp.txt
293
JSONのデータ形式
294
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>従業員情報表示</title>
<script type="text/javascript" src="../../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
//JavaScriptコード
//]]>
</script>
</head>
<body>
<center>
<h4>
従業員情報表示<input type="button" value=" 表示 " id="sel" />
</h4>
<div id="view"></div>
</center>
</body>
</html>
jsonEmpAll.htm
295
function xhrFunc(){
var emp_id, emp_name;
var view = "<table width='300' border='1'><tbody>"
+ "<tr><th>従業員番号</th><th>氏名</th></th><th>所属</th></tr>";
var xhrObj = getXhrObj();
xhrObj.open("get", "jsonemp.txt");
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
xhrObj.send(null);
xhrObj.onreadystatechange = function(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resp = eval("(" + xhrObj.responseText + ")");
for(var i = 0; i < resp.empmas.employee.length; i++){
var emp_no = resp.empmas.employee[i].emp_no;
var emp_name= resp.empmas.employee[i].emp_name;
var section = resp.empmas.employee[i].section;
view+="<tr><td>"+emp_no+"</td><td>"+emp_name+"</td><td>"+section+"</td></tr>";
}
view += "</tbody></table>";
id("view").innerHTML = view;
}
}
}
}
function initOnLoad(){
setListener(id("sel"), "click", xhrFunc);
}
setListener(window, “load”, initOnLoad);
jsonEmpAll.htm
Ajax開発環境
Appendix
296
Windows Script Debugger http://www.microsoft.com/downloads/details.aspx?FamilyID=e606e71f-ba7f-471e-a57d-f2216d81ec3d&DisplayLang=ja
297
Firebug Firefoxアドオンの開発デバッグ環境
https://addons.mozilla.org/ja/firefox/addon/1843
298
Ajaxクライアント開発環境 – APTANA http://www.aptana.com
299
APTANA - メソッドのブラウザ対応表示
300