Ajax basic

Ajaxによる Webアプリケーション開発基礎

清野克行

http://www.at21.net

[email protected]

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




http://www.scottandrew.com/weblog/articles/dom_1

http://www-106.ibm.com/developerworks/xml/library/x-xslt/?article=xr

http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

http://www.crockford.com/javascript/javascript.html

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

http://e-words.jp/w/WWW.html

http://e-words.jp/w/E6ACA7E5B79EE59088E5908CE7B4A0E7B292E5AD90E58E9FE5AD90E6A0B8E7A094E7A9B6E6A99FE6A78B.html



http://e-words.jp/w/CERN.html

http://e-words.jp/w/E3839BE382B9E38388.html

Ajax適用の代表的サイト

12

Ajax適用の代表的サイト

コンシューマ向けサイト・Ajaxの代表サイトとされるコンシューマサイト Googleマップス、Googleインクリメンタルサーチ・DynamicHTMLとの類似画像ファイルのダウンロード・マッシュアップ(Web2.0) ・既存ソフトとの機能融合(相乗効果)

13

1) Netflix http://www.netflix.com/BrowseSelection?lnkctr=nmhbs

⇒AjaxとDynamicHTMLの境界

14

http://www.netflix.com/BrowseSelection?lnkctr=nmhbs

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

http://www.sophia-it.com/content/%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84

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

http://www.w3.org/1999/xhtml

<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/

http://www.scollabo.com/banban/php/apd_03.html

http://www.scollabo.com/banban/php/apd_03.html

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

http://e-words.jp/w/HTML.html

http://e-words.jp/w/XML.html

http://e-words.jp/w/E3839EE383BCE382AFE382A2E38383E38397E8A880E8AA9E.html

http://e-words.jp/w/E382A4E383B3E382BFE383BCE3838DE38383E38388.html

http://e-words.jp/w/CSS.html

http://www.kanzaki.com/docs/html/xhtml1.html

http://www.kanzaki.com/docs/html/xhtml1.html

<?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">  </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

http://e-words.jp/w/WebE3839AE383BCE382B8.html


(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

http://hp.vector.co.jp/authors/VA013937/cssref/backgrou.html

http://hp.vector.co.jp/authors/VA013937/cssref/backgcol.html



http://hp.vector.co.jp/authors/VA013937/cssref/backgima.html



http://hp.vector.co.jp/authors/VA013937/cssref/backgatt.html



http://hp.vector.co.jp/authors/VA013937/cssref/backgpos.html



http://hp.vector.co.jp/authors/VA013937/cssref/backgrep.html



http://hp.vector.co.jp/authors/VA013937/cssref/font.html

http://hp.vector.co.jp/authors/VA013937/cssref/fontweig.html



http://hp.vector.co.jp/authors/VA013937/cssref/fontvari.html



http://hp.vector.co.jp/authors/VA013937/cssref/fontstyl.html



http://hp.vector.co.jp/authors/VA013937/cssref/fontsize.html



http://hp.vector.co.jp/authors/VA013937/cssref/fontfami.html



http://hp.vector.co.jp/authors/VA013937/cssref/lineheig.html



http://hp.vector.co.jp/authors/VA013937/cssref/texttran.html



http://hp.vector.co.jp/authors/VA013937/cssref/textdeco.html



http://hp.vector.co.jp/authors/VA013937/cssref/textalig.html



http://hp.vector.co.jp/authors/VA013937/cssref/textinde.html



http://hp.vector.co.jp/authors/VA013937/cssref/lettersp.html



http://hp.vector.co.jp/authors/VA013937/cssref/color.html

http://hp.vector.co.jp/authors/VA013937/cssref/float.html

http://hp.vector.co.jp/authors/VA013937/cssref/clear.html

http://hp.vector.co.jp/authors/VA013937/cssref/widthhei.html

http://hp.vector.co.jp/authors/VA013937/cssref/widthhei.html

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

http://hp.vector.co.jp/authors/VA013937/cssref/border.html

http://hp.vector.co.jp/authors/VA013937/cssref/borderst.html



http://hp.vector.co.jp/authors/VA013937/cssref/borderwi.html



http://hp.vector.co.jp/authors/VA013937/cssref/borderco.html



http://hp.vector.co.jp/authors/VA013937/cssref/margin.html

http://hp.vector.co.jp/authors/VA013937/cssref/padding.html

http://hp.vector.co.jp/authors/VA013937/cssref/overflow.html

http://hp.vector.co.jp/authors/VA013937/cssref/liststyl.html



http://hp.vector.co.jp/authors/VA013937/cssref/listimag.html





http://hp.vector.co.jp/authors/VA013937/cssref/listtype.html





http://hp.vector.co.jp/authors/VA013937/cssref/listposi.html





http://hp.vector.co.jp/authors/VA013937/cssref/cursor.html

http://hp.vector.co.jp/authors/VA013937/cssref/position.html

http://hp.vector.co.jp/authors/VA013937/cssref/lefttop.html

http://hp.vector.co.jp/authors/VA013937/cssref/lefttop.html

http://hp.vector.co.jp/authors/VA013937/cssref/vertical.html



http://hp.vector.co.jp/authors/VA013937/cssref/clip.html

http://hp.vector.co.jp/authors/VA013937/cssref/zindex.html



http://hp.vector.co.jp/authors/VA013937/cssref/visibili.html

http://hp.vector.co.jp/authors/VA013937/cssref/display.html

http://hp.vector.co.jp/authors/VA013937/cssref/pagebrea.html










2. JavaScriptによって総ての機能を統合する and JavaScript binding everything together.

JavaScript

63

http://www.crockford.com/javascript/javascript.html

(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

http://e-words.jp/w/WebE38396E383A9E382A6E382B6.html

http://e-words.jp/w/WebE38396E383A9E382A6E382B6.html

http://e-words.jp/w/E382B9E382AFE383AAE38397E38388E8A880E8AA9E.html

http://e-words.jp/w/E38397E383ADE382B0E383A9E3839FE383B3E382B0E8A880E8AA9E.html



http://e-words.jp/w/Netscape20Communications.html

http://e-words.jp/w/E5AE9FE8A385.html

http://e-words.jp/w/JScript.html

http://e-words.jp/w/ActionScript.html

<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

http://www.xml.com/pub/a/2005/02/09/xml-http-request.html

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 による送受信フロー(同期通信)


データ

受信

リクエスト

送信

•


↓


(GET/POST、リクエストURL、同期指定) ↓



↓


↓



72

XMLHttpRequest による送受信フロー(同期通信)


データ

受信

リクエスト

送信

•


↓


(GET/POST、リクエストURL、同期指定) ↓



↓


↓



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

http://d.hatena.ne.jp/keyword/JavaScript

http://d.hatena.ne.jp/keyword/JScript

http://d.hatena.ne.jp/keyword/HTTP

http://d.hatena.ne.jp/keyword/%a5%aa%a5%d6%a5%b8%a5%a7%a5%af%a5%c8

http://d.hatena.ne.jp/keyword/%a5%b5%a1%bc%a5%d0

http://d.hatena.ne.jp/keyword/XML

http://d.hatena.ne.jp/keyword/%a5%a2%a5%af%a5%bb%a5%b9

http://d.hatena.ne.jp/keyword/Microsoft

http://d.hatena.ne.jp/keyword/Internet Explorer

http://d.hatena.ne.jp/keyword/%a5%d6%a5%e9%a5%a6%a5%b6

http://d.hatena.ne.jp/keyword/%a5%c7%a5%d5%a5%a1%a5%af%a5%c8%a5%b9%a5%bf%a5%f3%a5%c0%a1%bc%a5%c9

http://d.hatena.ne.jp/keyword/%a5%c7%a5%d5%a5%a1%a5%af%a5%c8%a5%b9%a5%bf%a5%f3%a5%c0%a1%bc%a5%c9


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


(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


(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


（４）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ではエラーを返す。）


(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



http://e-words.jp/w/E382B9E382AFE383AAE38397E38388E8A880E8AA9E.html

http://e-words.jp/w/Dynamic20HTML.html

http://e-words.jp/w/W3C.html

<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[


function revEmpMas(){

var emp_no = document.getElementById("emp_no").value;

xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);


xhrObj.send(null);

xhrObj.onreadystatechange = respEmpData;

}

データ参照 revEmpMas.htm(1/3)

114

function respEmpData(){



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];

}

}

}

}


var observer = document.getElementById("rev");

setListener(observer, "click", revEmpMas);

}


//]]>

</script>

</head>


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>


116

<?php



$user = "mysql";


$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を参照してデータベースへのアクセスを行う。


$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





<head>





//<![CDATA[

function addEmpMas(){


var emp_name = document.getElementById("emp_name").value;

var section = document.getElementById("section").value;

var req="emp_no="+emp_no+"&emp_name="+emp_name+"&section="+section;


xhrObj.open("post", "addEmpMas.php", false);

xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhrObj.send(req);

document.getElementById('status').innerHTML = xhrObj.responseText;

}


var observer = document.getElementById("add");

setListener(observer, "click", addEmpMas);

}


//]]>

</script>

データ登録 addEmpMas.htm

(1/2)

125

</head>

<body>

<center>



<tbody>

<tr><th colspan="2">従業員マスタ登録</th></tr>

<tr>


<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



$user = "mysql";








$sql = "insert into emp_mas values('$emp_no', '$emp_name', '$section', '$mod_date')";


echo "登録成功: "."従業員番号=".$emp_no;

}else{

echo "登録不成功: "."従業員番号=".$emp_no;

}

mysql_close($sv);

?>

データ登録サーバコード(PHP） addEmpMas.php

127

Ajaxデータ検索・参照の特徴

(１）検索表示のハイスピード表示

(２) GETメソッド使用 =>検索待ち時間のタイムアウト処理 (３) 検索画面上での検索結果動的表示 =>迅速な連続検索 (４) 検索条件の絞込み・動的設定表示例１] 下位項目表示での絞込み例２] リスト項目での絞込み (５) 検索結果(成功・不成功・ステータス)の動的表示

128

Ajaxデータ更新・削除の特徴

(１) ＰＯＳＴメソッド使用

(２) 同一画面上での連続更新・削除

=>迅速な連続更新・削除処理に対応

(３) 検索結果(成功・不成功・ステータス)の動的表示 ※更新のクライアントロジックは登録と同じ、サーバ側で受信データで登録処理を行うか更新処理を行うかで異なる。

129

Ajaxでの参照・更新・削除画面例従業員マスタ参照/更新/削除

130


<head>





//<![CDATA[


function revEmpMas(){


xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);


xhrObj.send(null);

xhrObj.onreadystatechange = function(){



var resp = xhrObj.responseText.split("<i>");

if(resp[0]=="OK"){


document.getElementById("emp_name").value = resp[1];

document.getElementById("section").value = resp[2];

document.getElementById("mod_date").innerHTML = resp[3];

}else{


}

}

}

}

}

データ更新 updEmpMas.htm

(1/3)

131

function updEmpMas(){


var emp_name = document.getElementById("emp_name").value;

var section = document.getElementById("section").value;

var req="emp_no="+emp_no+"&emp_name="+emp_name+"&section="+section;

xhrObj.open("post", "updEmpMas.php", false);


xhrObj.send(req);


}

function delEmpMas(){


xhrObj.open("post", "delEmpMas.php", false);


xhrObj.send("emp_no="+emp_no);


}


var observer = document.getElementById("rev");


var observer = document.getElementById("upd");

setListener(observer, "click", updEmpMas);

var observer = document.getElementById("del");

setListener(observer, "click", delEmpMas);

}


//]]>

</script>


(2/3)

132

</head>

<body>

<center>



<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>


<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>


(3/3)

133

<?php



$user = "mysql";








$sql = "update emp_mas

set

emp_name = '$emp_name',

section = '$section',

mod_date = '$mod_date'

where

emp_no = '$emp_no'";


echo "更新成功: "."従業員番号=".$emp_no;

}else{

echo "更新不成功: "."従業員番号=".$emp_no;

}

mysql_close($sv);

?>

データ更新 updEmpMas.php

134

<?php



$user = "mysql";





$sql = "delete from emp_mas where emp_no='$emp_no'";


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(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.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.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>  </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 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;

}

}


var observer = document.getElementById("pc");

setListener(observer, "click", checked);

}


//]]>

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





<head>


<title>Select2</title>

<link type="text/css" rel="stylesheet" href="../lib/style.css"/>


<script type="text/javascript" src="../lib/prototype.js"></script>


//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(){



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


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;



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


alert($("class2List").value);

}

Function initOnLoad(){

setListener($("class1List"), "change", getClass2);

}


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

http://yougo.ascii24.com/gh/13/001364.html





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ドキュメント

スタイルシート

http://www-106.ibm.com/developerworks/xml/library/x-xslt/?article=xr

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>


<os>WindowsXP Pro</os>

<cpu>Celeron2 Ghz</cpu>



<dvd>CD-RW</dvd>

<display>15インチ液晶</display>


</computer>

<computer>


<os>WindowsXP Pro</os>

<cpu>Pentium4 2Ghz</cpu>



<dvd>CDROM DVD</dvd>



</computer>

<computer>


<os>RedHat9</os>




<dvd>CD-ROM</dvd>

<display>NA</display>


</computer>

<computer>


<os>Fedora Core4</os>


<memory>SDRAM 1GB</memory>


<dvd>CD-ROM</dvd>



</computer>

</mart>

XMLファイル(xml1.xml)

274


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"?>




<head>

<title>Ajax Sample1</title>

<style type="text/css">

#items {background-color: #ccffcc}

</style>




//<![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);

}


//]]>

</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

http://e-words.jp/w/E3839EE383BCE382AFE382A2E38383E38397E8A880E8AA9E.html

http://e-words.jp/w/SGML.html

http://e-words.jp/w/HTML.html

http://e-words.jp/w/E382B9E382BFE382A4E383ABE382B7E383BCE38388.html

http://e-words.jp/w/E382B9E382BFE382A4E383ABE382B7E383BCE38388.html

http://d.hatena.ne.jp/keyword/XML

http://d.hatena.ne.jp/keyword/HTML

・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" ?>




<head>



.items {background-color: #ccffcc}

</style>




//<![CDATA[



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


setListener($("item"), "click", reqItems);

}


//]]>

</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"?>




<head>



.items {background-color: #ccffcc}

</style>




//<![CDATA[


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

http://ja.wikipedia.org/wiki/JavaScript

http://ja.wikipedia.org/wiki/%E3%83%87%E3%83%BC%E3%82%BF%E8%A8%98%E8%BF%B0%E8%A8%80%E8%AA%9E

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





<head>

<title>従業員情報表示</title>

<script type="text/javascript" src="../../lib/funcs.js"></script>


//<![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>";


xhrObj.open("get", "jsonemp.txt");


xhrObj.send(null);

xhrObj.onreadystatechange = function(){



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;

}

}

}

}


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

Technology

Ajax basic