Download - Ajax basic
![Page 2: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/2.jpg)
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
![Page 3: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/3.jpg)
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
![Page 4: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/4.jpg)
Ajaxとは
4
![Page 5: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/5.jpg)
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
![Page 6: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/6.jpg)
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
![Page 7: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/7.jpg)
Web
GUI
Ajaxモデルでの処理の流れ
JavaScript (Ajaxエンジン)
⑤ 演算処理 ④ 表示制御
サーバ
① イベント処理
② サーバ通信
③ UI表示 XHTML+CSS ・XHTML 画面構成 ・CSS 表示制御
・テキストデータ ・XMLデータ
GET/POST
DOM
7
MODEL
VIEW
CONTROLLER
![Page 8: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/8.jpg)
XML
DB プレゼンテーション
Web UI
AjaxモデルでのWebシステム (SPI=Single Page Interface)
Webクライアント CGI系プログラム
ビジネスロジック
ユーザPC サーバサイド
データアクセス
Ajaxエンジン
Webブラウザ
GET/POST
テキスト XML
データストア
XHR
8
![Page 9: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/9.jpg)
DB
データアクセス
ビジネスロジック
プレゼンテーション
Web
UI-1
従来モデルでのWebシステム (MPI=Multi Page Interface)
Web
UI-2
ユーザPC サーバサイド
HTML画面
GET/POST
9
![Page 10: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/10.jpg)
C/Sクライアント
汎用機ダム端末
Ajaxクライアント
Webクライアント
UIリッチ度
ネットワーク・管理
SOAP
REST
ライブラリ
W3C
UI機能の変遷
10
![Page 11: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/11.jpg)
使用されるソフトウエア技術=Web標準
Ajaxを構成する要素技術は、ほぼ総てがW3C勧告準拠
⇒プラグイン等の設定なして動作可能 ⇒将来の永続的サポートが保障される
[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
![Page 12: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/12.jpg)
Ajax適用の 代表的サイト
12
![Page 13: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/13.jpg)
Ajax適用の代表的サイト
コンシューマ向けサイト ・Ajaxの代表サイトとされるコンシューマサイト Googleマップス、Googleインクリメンタルサーチ ・DynamicHTMLとの類似 画像ファイルのダウンロード ・マッシュアップ(Web2.0) ・既存ソフトとの機能融合(相乗効果)
13
![Page 14: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/14.jpg)
1) Netflix http://www.netflix.com/BrowseSelection?lnkctr=nmhbs
⇒AjaxとDynamicHTMLの境界
14
![Page 15: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/15.jpg)
2) Googleマップ http://maps.google.co.jp/
⇒Ajaxの通信方式を使わない代表的Ajaxサイト
15
![Page 16: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/16.jpg)
3) Googleサジェスト http://www.google.co.jp/webhp?complete=1
⇒典型的なAjax手法を適用したサイト:インクリメンタル検索
16
![Page 17: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/17.jpg)
4) map.rails2u.com http://map.rails2u.com/
⇒Ajax手法の組み合わせ : マッシュアップ
[マッシュアップ] 複数の異なる提供元の技術 やコンテンツを複合させて 新しいサービスを形作ること
17
![Page 18: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/18.jpg)
5) Ajaxでの日本語入力 http://chasen.org/~taku/software/ajax/ime/
⇒Ajaxと既存アプリの組合せ - 日本語入力機能のないOSから日本語入力
18
![Page 19: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/19.jpg)
Ajaxサンプル 業務アプリケーションのRIA化
仕訳データ入力 UI操作性の向上とプラットホームとしてのWeb
19
![Page 20: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/20.jpg)
20
部品構成表示 再帰呼び出し関数内からの非同期通信
![Page 21: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/21.jpg)
電子商取引システムへのAjax適用
クラス1項目
クラス3項目
クラス2項目
商品
テーブル
ユーザ画面 データベース 管理者画面
登録
登録
登録
登録
参照・更新・削除
参照・更新・削除
参照・更新・削除
Ajax適用
Ajax適用
電子商取引 サイト
全項目
参照・更新・削除
21
![Page 22: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/22.jpg)
22
クラス1項目
クラス2項目
クラス3項目
商品マスタ
電子商取引サイトでの商品表示-操作手順
[大分類]
[中分類]
[小分類]
[商品]
画面ロード
イベント
クリック
クリック
クリック
![Page 23: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/23.jpg)
23
電子商取引サイト画面
![Page 24: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/24.jpg)
24
電子商取引サイト商品情報登録画面
![Page 25: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/25.jpg)
25
Webスプレッドシート応用事例
![Page 26: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/26.jpg)
26
Webスプレッドシートでのグラフ表示例
![Page 27: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/27.jpg)
27
受注情報登録画面のRIA化
![Page 28: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/28.jpg)
28
受注情報登録とコールバック表示(1)
![Page 29: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/29.jpg)
29
受注情報登録とコールバック表示(2)
![Page 30: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/30.jpg)
Ajax
プログラミング
30
![Page 31: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/31.jpg)
[1]Ajax初めてのプログラム
従業員番号から氏名表示
[操作手順] 1.従業員番号入力 ↓ 2.カーソル移動 ↓ 3.従業員氏名表示
31
![Page 32: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/32.jpg)
デ―タ表示
①
② ③
④
XMLHttpRequest
DOM API
イベントハンドラ ①HTML画面からのイベント発生
↓
②XMLHttpRequestでサーバへの
HTTPリクエスト発行
↓
③サーバでのデータアクセス処理等
↓
④サーバからのデータ送信と
XMLHttpRequestでの受信 ↓
⑤DOM APIへの受信データセット
と表示
XHTML
JavaScript
⑤
⑤
サーバ側
プログラム DB
Ajax初めてのプログラム 処理フロー
テキスト
ファイル
Ajax処理フロー
32
![Page 33: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/33.jpg)
[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
![Page 34: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/34.jpg)
<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>
[2] イベントリスナと関数スケルトン記述
34
![Page 35: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/35.jpg)
[3] イベントリスナの設定
<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
![Page 36: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/36.jpg)
[4] サーバへ非同期リクエストを送る(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
![Page 37: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/37.jpg)
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
![Page 38: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/38.jpg)
[5] データ受信と表示(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が4、statusが200でサーバからのレスポンス受信完了 var emp_name = xhrObj.responseText; //レスポンスデータ(従業員氏名)を変数emp_nameにセット document.getElementById("emp_name").value = emp_name; //従業員指名をID値emp_nameの入力(INPUT)フィールドに表示 } } } xhrObj.send(null); }
38
![Page 39: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/39.jpg)
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[“送信パラメータ名”] で受信
[6] サーバ側スクリプト(PHP)
A0001山田太郎 A0002鈴木健児 A0003田中佳子 A0004佐藤弘明 A0005伊藤弘志
empfile.txtファイル
![Page 40: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/40.jpg)
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){ //最初の5文字がGET受信データと等しい場合条件成立
echo substr($data[0], 5); //5文字から後の名前部分をAjaxクライアントへ送信 break;
} } fclose($fp); //ファイルクローズ ?>
getUniq.php
![Page 41: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/41.jpg)
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に替わるだけ
![Page 42: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/42.jpg)
42
PHP: Hypertext Preprocessor Apacheモジュールとして動作するスクリプト言語とその実行環境 1994年秋、Rasmus Lerdorf(グリーンランド⇒デンマーク) が作っていた Perlスクリプトを C言語で書き直し、HTMLフォームを扱える動的なWebアプリケーションのための機能 に拡張したのが始まりとされる。
PHP公式サイト http://www.php.net/
![Page 43: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/43.jpg)
43
[PHPの特徴] (1)Webアプリケーション開発に特化した言語。 ・ CGI処理用の構文・変数等を装備 (2)文法が比較的容易に誰でも習得することができる。 ・基本シンタックスはC言語類似だが、より簡略化されている。 (3)インタープリタ言語でコンパイルの必要なし。 ・小回りが利き、短期開発に向いている。 (4)CGIと比較すると、実行速度が断然早い。 ・Apacheモジュールとして実行され、別プロセスを生成しない (5) 多くの拡張ライブラリをサポート ・PEAR (PHP Extension and Application Repository) ・CakePHP、Zend Framework など (6)どのような種類のデータベースとも接続可能。
![Page 44: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/44.jpg)
Ajaxian.com 2007 Survey Results 出典: Ajaxian.com (http://ajaxian.com/)
44
PHPはAjaxとの組み合わせで最もよく使用される言語
![Page 45: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/45.jpg)
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>
![Page 46: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/46.jpg)
従来モデルとAjaxモデルのサーバ 側プログラム比較 ・従来モデル ⇒HTMLタグを生成してSTDOUTに出力 ・Ajaxモデル ⇒テキスト文字列でSTDOUTに出力 ※非同期通信/同期通信でプログラムパターンは同じ。
1.GETまたはPOSTでパラメータ受信 2.データベースまたはファイルアクセス 3.演算処理(ビジネスロジック) 4.クライアントにテキスト(並び)送信
従来のCGI形式 プログラムと同じ
従来はHTML タグ生成
[Ajaxモデルサーバ側プログラム処理手順]
46
![Page 47: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/47.jpg)
<?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サーバ 側プログラム例
※従来モデルと同じ 1.POST・GETパラメータ受信 2.データベースアクセス 3.演算処理(ビジネスロジック)
※従来モデルと異なる 4.クライアントにテキスト列送信
47 ※PHPでの文字列連結はドットで行う
![Page 48: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/48.jpg)
Apache
PHP5 MySQL
FedoraCore5
(サーバ)
サンプルプログラムでのシステム構成
Webサーバ データベース
ブラウザ・クライアント
IE6/7 FireFox
Version2
Safari Version3
Opera Version9
48
テキストファイル
PHP
スクリプト
⇒Webアプケーションでの標準的なシステム構成
LAMP(Linux + Apache + MySQL + PHP)
![Page 49: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/49.jpg)
1. XHTMLとCSSを利用したWeb標準での画面構成にする standards-based presentation using XHTML and CSS
XHTML/CSS
49
![Page 50: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/50.jpg)
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
![Page 51: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/51.jpg)
<?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
![Page 52: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/52.jpg)
(2) XHTML文書の適合要件
1. 提供される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が特定(所得)できなかった場合はURIで指定されたdtdを使用。 ※ DTD: XML文書の要素、属性、エンティティ、記法を宣言(定義)したもの。 2.文書のルート要素が html であること。 3.ルート要素は、xmlns属性でXHTML名前空間を明示すること。 ※名前空間: 文書内に複数ボキャブラリが存在する場合に、要素名、属性名 が重ならないようにその適用範囲(スコープ)を明示するための規格。 指定例] <html xmlns="http://www.w3.org/1999/xhtml">
52
![Page 53: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/53.jpg)
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
![Page 54: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/54.jpg)
9. &はあらゆるところで&と記述する × <a href="/cgi-bin/myscript?name=kanzaki&score=100"> 〇 <a href="/cgi-bin/myscript?name=kanzaki&score=100"> 10.属性の省略書式は使わない ×<input type="radio" name="bar" checked> 〇<input type="radio" name="bar" checked="checked" /> 11. head要素内のスクリプトやスタイルシートの注意 < はタグの開始と見なされ、コメントした内容は無視される ×<style type="text/css"> <!-- p {color:red} --> </style> 解決策:外部ファイルにスタイルシートやスクリプトを記述 12.言語コードの指定にxml:lang属性を用いる <p lang=“jp” xml:lang=“jp”>今日は</p> 注:XHTML 1.1ではlang属性は廃止され、xml:lang属性のみを記述
XHTML文書の適合要件
54
![Page 55: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/55.jpg)
CSS (Cascading Style Sheets) - スタイル定義 CSS:スタイルシートを記述する為の言語仕様の1つ ※スタイルシート:Webページのレイアウトや整形方法を指定する整形言語 =>文書の表現方法の指定に特化した構文の集合体
仕様策定] W3C、現在CSS1(第1版)とCSS2(第2版)が正式に勧告されている。
策定目的] 文字のサイズやフォント、背景色や行間の大きさなどの 見栄えに関する情報を文書本体から切り離し、ユーザが複数の レイアウトから選択することができるようにする。
CSS1:W3C勧告 1996年12月17日、 改定1999年1月11日 単純なスタイル構造(構造化文書に対してフォント,色と背景,スペーシング,テキストの装飾,ボーダー,
マージンやパディング,といったスタイルを与えることができる)を定義した最初のCSS仕様。
CSS2: W3C勧告 1998年05月12日
HTML用として制定されたCSS1をXMLでも利用できるように機能拡張,CSS1の全機能が含まれる。
メディアタイプ依存のスタイルシートに対応しており,グラフィカルなブラウザ,音声出力装置, 点字出力装置,プリンタ,小型情報機器など,多様な出力を想定したスタイル設定が可能 CSS3:CSS2の次世代仕様
モジュール化(機能や役割ごとに仕様書が細分化)されており,複雑化してきたスタイルシートの各
機能の関係を明確にし,部分的な実装を容易にし,更に新しい機能を導入し易くなるという,メリットが
期待される。
55
![Page 56: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/56.jpg)
(1) CSSの基本書式
[タイプ1] 要素名 {プロパティ:値 [;プロパティ:値 [… …]]} 要素名 {プロパティ:値 [;プロパティ:値 [… …]]} 例] td {font-size:18px; font-weight:600; color:#aa0000} [タイプ2] 要素名.クラス名 {プロパティ:値 [;プロパティ:値 [… …]]} 要素名#ID名 {プロパティ:値 [;プロパティ:値 [… …]]} 例] td#title {font-size:18px; font-weight:600; color:#aa0000} td.title {font-size:18px; font-weight:600; color:#aa0000} [タイプ3] .クラス名 {プロパティ:値 [;プロパティ:値 [… …]]} #ID名 {プロパティ:値 [;プロパティ:値 [… …]]} 例] #title {font-size:18px; font-weight:600; color:#aa0000} .title {font-size:18px; font-weight:600; color:#aa0000}
56
![Page 57: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/57.jpg)
<div style="background:lightblue; color:blue;"> 背景の色を水色に、<br> 文字色は青にしています。 </div>
(2) CSSの指定方法
1.XHTMLタグに直接スタイルを設定する。
特定の箇所にのみスタイルを設定する場合に使用 => 非推奨
例
57
![Page 58: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/58.jpg)
<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>レベル2のタイトル</h2> <span class=“data1”>レベル1のデータ</span> <span id=“data2”>レベル2のデータ</span>
: </body> </html>
2. HTMLヘッダ内で宣言する
58
![Page 59: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/59.jpg)
<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>レベル2のタイトル</h2> <span class=“data1”>レベル1のデータ</span> <span id=“data2”>レベル2のデータ</span> </body> </html>
3. 外部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
![Page 60: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/60.jpg)
<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>
4. 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
![Page 61: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/61.jpg)
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
![Page 62: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/62.jpg)
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
![Page 63: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/63.jpg)
2. JavaScriptによって総ての機能を統合する and JavaScript binding everything together.
JavaScript
63
![Page 64: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/64.jpg)
(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
![Page 65: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/65.jpg)
<html> <head> <title>….</title>
</head> <body> : <script type="text/javascript"> : alert(“Hello World”); //処理内容
: </script> : </body> </html>
JavaScript – head、bodyタグ内に直接記述
65
![Page 66: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/66.jpg)
<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
![Page 67: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/67.jpg)
<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
![Page 68: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/68.jpg)
ハンドラ名 内容
onClick マウスがクリックされた際に発生 onSelect 入力フィールドの選択、あるいは入力フィールドにある 文字列をドラッグしたときに発生 onChange 選択メニューでの選択項目やテキスト入力欄の文字列 が変更されたときに発生 onMouseover マウスカーソルが、ある要素の上にきたときに発生 onKeyup 押下されたキーが開放されたときに発生 onFocus リンクや入力フィールドがフォーカス (選択) されたとき に発生 onBlur 入力フィールドでフォーカスが他に移動したときに発生 onResize ウィンドウサイズが変更されたときに発生 onSubmit 送信(サブミット)ボタンが押されときに発生 onReset 取消(リセット)ボタンが押されたときに発生 onAbort 処理を中断したときに発生 onLoad ページが読み込まれたときに発生 onUnload リンククリックなどによって、今いるページから移動した ときに発生
(3) イベントハンドラの種類
68
![Page 69: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/69.jpg)
2 その他のイベント
[ウィンドウイベント] onActivate 要素がアクティブになったときに発生 onDeactivate 要素がアクティブでなくなったときに発生 onCloseQuery ウィンドウを閉じるときの確認で発生 onDblClick キーボードやマウスなどが「ダブルクリック」されたときに 発生 onFileDrop ファイルがエクスプローラなどからウィンドウにドロップ されたときに発生 onKeyDown キーが押下されたときに発生 onKeyPress キーが押されているときに発生 onMouseDown マウスボタンが押されたときに発生 onMouseEnter マウスが領域内に入ってきたときに発生 onMouseLeave マウスが領域内から出ていったときに発生 onMouseMove マウスカーソルが移動したときに発生 onMouseUp マウスボタンが離れたときに発生 onMouseWheel マウスホイールが回転したときに発生 onPopupHide ポップアップウィンドウを閉じたときに発生 [タイマイベント] setTimeout 一定時間後に指定した処理を行う clearTimeout setTimeoutを解除する setInterval 一定時間ごとに繰返し指定した処理を行う clearInterval setIntervalを解除する 69
![Page 70: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/70.jpg)
XMLHTTPRequestを使用し非同期でサーバとのメッセージ交換を行う asynchronous data retrieval using XMLHttpRequest
[6]非同期通信(XHR)
70
![Page 71: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/71.jpg)
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
![Page 72: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/72.jpg)
XMLHttpRequest による送受信フロー(同期通信)
DOM APIでの動的表示
データ
受信
リクエスト
送信
•
(1) XMLHttpRequest オブジェクトの生成
↓
(2) open メソッド
(GET/POST、リクエストURL、同期指定) ↓
(3) setRequestHeaderメソッド (注1) POSTの場合のみ ↓
(4) send メソッド (注2) GETの場合null送信 (データ送信)
↓
【サーバ処理 】
↓
(5) responseTextまたはresponseXML プロパティ
データの受信処理(テキストデータまたはXMLデータで受信)
72
![Page 73: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/73.jpg)
XMLHttpRequest による送受信フロー(同期通信)
DOM APIでの動的表示
データ
受信
リクエスト
送信
•
(1) XMLHttpRequest オブジェクトの生成
↓
(2) open メソッド
(GET/POST、リクエストURL、同期指定) ↓
(3) setRequestHeaderメソッド (注1) POSTの場合のみ ↓
(4) send メソッド (注2) GETの場合null送信 (データ送信)
↓
【サーバ処理 】
↓
(5) responseTextまたはresponseXML プロパティ
データの受信処理(テキストデータまたはXMLデータで受信)
73
![Page 74: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/74.jpg)
<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
![Page 75: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/75.jpg)
<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
![Page 76: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/76.jpg)
<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
![Page 77: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/77.jpg)
<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
![Page 78: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/78.jpg)
<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
![Page 79: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/79.jpg)
Ajax演習-1
従業員番号から氏名表示 ・GET/POSTと非同期/同期の合計4種類の非同期通信 組み合せを自分のディレクトリから動作確認して下さい。 ・関数名指定でのGET/非同期を動作確認して下さい。
※この演習は演習環境の動作確認チェックにもなってい ます。ftpクライアント設定、エディタでの文字コード指定 (UTF-8)も確認して下さい。 ※PHPの場合、クライアントPOST送信の場合はサーバ側PHPもPOST受信に変更が必要
79
![Page 80: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/80.jpg)
80
Ajax演習-1 動作確認ファイル類
・ディレクトリ sample ・GET/非同期 getAsyn.htm getUniq.php ・別関数 getAsyn2.htm 同上 ・GET/同期 getSyn.htm 同上 ・POST/非同期 postAsyn.htm postUniq.php ・POST/同期 postSyn.htm 同上 ・データファイル employee.txt
![Page 81: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/81.jpg)
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
単一テキストの場合
![Page 82: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/82.jpg)
データベース検索結果の表示
(単一レコード、複数アイテム)
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>”) ->アイテム区切り
![Page 83: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/83.jpg)
データベース検索結果の表示 (複数レコード、複数アイテム)
var recs = xhrObj.responseText.split("<r>"); for(i = 0; i < recs.length; i++ ){ var items = recs[i].split("<i>"); for(j = 0; j < items.length; j++ ){ : //xhtmlタグ作成 : } } document.getElementById("area1”).innerHTML = out; //outは作成されたxhtmlタグ構成
83
![Page 84: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/84.jpg)
従来モデル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
![Page 85: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/85.jpg)
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
![Page 86: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/86.jpg)
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
![Page 87: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/87.jpg)
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
![Page 88: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/88.jpg)
<?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
![Page 89: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/89.jpg)
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
![Page 90: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/90.jpg)
XMLHttpRequestオブジェクト
openメソッド
書式] void open ( String メソッド , String サーバアドレス [,boolean 同期/非同期 [, String ユーザ名 [,String パスワード]]] ) 機能] 送信先アドレス、送信方式等を指定し、リクエストを初期化する。 引数] 通信メソッド : HTTPメソッド指定 - “POST” または “GET“ URL が HTTP URLでない場合は無視される。 サーバアドレス:リクエスト送信先のURLを指定. 同期/非同期 :(オプション) 非同期:true, 同期:false (省略時は非同期) ユーザ名 :(オプション) ユーザ名を指定 パスワード :(オプション) パスワードを指定 ※XMLHttpRequestがリクエストを送信できるのは同一ドメイン内に制限される。 ※URLはopen実行スクリプトファイルのダウンロード元から相対アドレスで指定可。 ※asyncで非同期指定の場合:sendメソッドは即座に処理を返し、その後は onreadystatechangeイベントの中で読み込み状況を確認する。 同期指定の場合リソースを所得し終えるまで処理を返さない (クライアント側はロックされる)。
例] xhrObj.open( “get” , “./foo/bar1.php” , true ); xhrObj.open( “post” , “./foo/bar2.php” , false ); 90
![Page 91: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/91.jpg)
XMLHttpRequestオブジェクト
(2) setRequestHeaderメソッド
書式] void setRequestHeader ( String ヘッダ , String 値 ) 機能] HTTPリクエストに対する、HTTPリクエストヘッダ. 引数] ヘッダ: 送信するヘッダの名前 値 : ヘッダのボディ
例] //openでPOST指定の場合、sendでの送信実行前に指定。 xhrObj.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); //キャッシュ回避で、sendでの送信実行前に指定。 xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
91
![Page 92: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/92.jpg)
XMLHttpRequestオブジェクト
(3) sendメソッド
書式] void send ( variant ボディ ) 機能]リクエストを送信する。 リクエストが非同期の場合はリクエスト送信後直ちに、処理が戻る。 リクエストが同期の場合は、応答が帰ったあとに、処理が戻る。 引数] body:DOMドキュメントのインスタンス、文字列、inputストリーム
※メソッドがPOSTでパラメータがDOMドキュメントで無い場合bodyはシリアライズ される。 ※inputストリームの場合、ContentType: および ContentLength: ヘッダ(header) 情報および、ストリームの最後に’CR/LF’の添付が必要。.
例] var sendVal = “data1=“ + aaaa + ”&data2=“ + bbbb; xhrObj.send(sendVal);
92
![Page 93: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/93.jpg)
XMLHttpRequestオブジェクト
(4)onreadyStatechangeプロパティ - 非同期通信時のみ使用 書式] ハンドラ onreadystatechange 機能] readyState変更時にコールバック関数を自動起動する
例1] 匿名関数形式 : xhrObj.onreadystatechange = function() { 受信処理 } 例2] 関数指定形式 : xhrObj.onreadystatechange = func1; } function func1() { 受信処理 }
93
![Page 94: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/94.jpg)
書式] readonly int readyState 機能]リクエストの処理状態を表す。 値]
例] if (xhrObj.readyState == 4 ){ [httpステータス確認とデータ受信後の処理] } ※クライアント(ブラウザ)側の処理は、受信完了(値=4)後に行うのが通常。 データ受信中(値=3)に受信データにアクセスした場合、ブラウザにより、 応答が異なる(Internet ExplorerおよびOpreraではエラーを返す。)
XMLHttpRequestオブジェクト
(5) readyStateプロパティ - 非同期通信時のみ使用
値 表記 状態
0 UNINITIALIZED オブジェクトは生成されているが、まだ初期化されていない
(openメソッドが呼ばれていない)
1 LOADING オブジェクトが生成されたが、まだsendメソッドが呼ばれていない
2 LOADED Sendメソッドは呼ばれ、statusとヘッダが有効になった。
3 INTERACTIVE クライアントは応答テキストを受信中(データの一部を保持)
4 COMPLETED 総ての操作が完了、データは総て受信完了
94
![Page 95: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/95.jpg)
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
![Page 96: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/96.jpg)
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
![Page 97: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/97.jpg)
(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
![Page 98: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/98.jpg)
DOMオブジェクト (9) innerHTMLプロパティ
書式] object.innerHTML [ = innerHTML] 機能] 開始・終了タグに挟まれた部分のHTMLを設定したり、読み出す。 設定] テキストとHTMLタグの組み合わせで使用する。 ただし、<html>、<head>、<title>タグは除く。 例] document.getElementById(“result”).innerHTML = resp; ※このプロパティの設定で、指定した文字列でエレメントの既存の内容 を完全に置き換える。 ※このプロパティはドキュメントがロード中に設定することはできない。
98
![Page 99: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/99.jpg)
DOMオブジェクト (10) innerTextプロパティ
書式] object.innerText[ = innerText]
機能] 開始・終了タグに挟まれた部分のテキストを設定したり、
読み出す。
設定]
テキストとHTMLタグの組み合わせで使用する。ただし、<html>、<head>、<title>タグは除く。
例] document.getElementById(“result”).innerText = resp;
※このプロパティの設定で、指定した文字列でエレメントの既存の内容を完全
に置き換える。
※このプロパティはドキュメントがロード中に設定することはできない。
※innerTextの場合、HTMLのタグは解釈されずそのまま画面に表示される。
99
![Page 100: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/100.jpg)
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
![Page 101: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/101.jpg)
XMLHttpRequestオブジェクト – その他のメソッド (11) abortメソッド
書式] object.abort ( )
機能] XMLHttpRequestオブジェクトのHTTPリクエストを中止する
返り値] なし 適用] XMLHttpRequest
例] xhrObj.abort();
101
![Page 102: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/102.jpg)
通信タイムアウトの処理 一定時間が経過してもサーバーから応答がない場合の処理。 1. タイムアウトしたとき、エラーメッセージを表示する。 2. setInterval()でタイマーを設定し、一定時間経過後に指定 した関数を呼び出す。 例]
//5000ミリ秒経過するとtimeout()を実行する timerId = setInterval('timeout()', 5000); //XMLHttpRequestの通信を中断するときは abort() を実行する。 //タイムアウトの処理 function timeout() { //タイマーを終了する clearInterval(timerId); //通信を切断する xhrObj.abort(); }
102
![Page 103: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/103.jpg)
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);
//]]>
通信タイムアウトの処理サンプルコード
![Page 104: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/104.jpg)
Ajax演習-2
従業員全データを一覧表示して下さい。 Ajax] ・複数レコード、複数アイテム の受信処理を利用 PHP] ・文字列連結はドット(.)を使用 ・PHPプログラムはgetUniq.php をもとにファイル名getAllEmp.phpで作成してください。
104
![Page 105: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/105.jpg)
(4)イベント処理 DOMを使用してイベントの相互作用と動的な画面表示を行う dynamic display and interaction using the Document Object Model
105
![Page 106: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/106.jpg)
(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
![Page 107: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/107.jpg)
<html> <head> <title>XMLガイド</title> </head> <body> <ol> <li>項目1</li> <li>項目2</li> <li>項目3</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
![Page 108: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/108.jpg)
キャプチャフェーズ
バブリングフェース オブザーバ
ターゲット
body
table
tr
td
DOMイベントモデル
・ターゲット イベント発生
・オブザーバ イベントキャッチ
・バブリングフェーズ
イベントの上位伝播
・キャプチャフェーズ
イベントの下位伝播
イベント発生
イベントキャッチ
tbody
document
html
108 参考] W3C Document Object Model Events
![Page 109: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/109.jpg)
:
:
:
window
document
table
thead
tbody
tfoot
tr td
イベント
ネットスケープモデル マイクロソフトモデル
DOMイベントモデル イベントの伝播方向
-マイクロソフトモデル 内側のタグから外側のタグに伝播 -ネットスケープモデル 外側のタグから内側のタグに伝播
109
![Page 110: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/110.jpg)
DOMイベントモデルの機能と特徴
(1) イベントの伝播とイベントリスナでのキャッチ addEventListener関数 (ie6では attachEvent関数) (2) イベントの発生場所はid属性値で識別 (3) イベントハンドラは従来のものから 先頭のonを省いたものと同じ (4) XHTMLとJavaScriptコードの分離
110
![Page 111: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/111.jpg)
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
![Page 112: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/112.jpg)
(1) 検索・参照画面の作成 -GET/非同期通信 (2) 登録画面の作成 -POST/同期通信 (3) 参照・更新・削除画面の作成 -登録系・参照系の組合せ
Ajaxでのデータ参照・登録・更新・削除
112
![Page 113: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/113.jpg)
Ajaxでの参照画面例
従業員マスタ参照
113
![Page 114: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/114.jpg)
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
var xhrObj = getXhrObj();
function revEmpMas(){
var emp_no = document.getElementById("emp_no").value;
xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
xhrObj.send(null);
xhrObj.onreadystatechange = respEmpData;
}
データ参照 revEmpMas.htm(1/3)
114
![Page 115: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/115.jpg)
function respEmpData(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resp = xhrObj.responseText.split("<i>");
if(resp[0]=="OK"){
document.getElementById(“status”).innerHTML = resp[0];
document.getElementById("emp_name").innerHTML = resp[1];
document.getElementById("section").innerHTML = resp[2];
document.getElementById("mod_date").innerHTML = resp[3];
}else{
document.getElementById("status").innerHTML = resp[0];
}
}
}
}
function initOnLoad(){
var observer = document.getElementById("rev");
setListener(observer, "click", revEmpMas);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
データ参照 revEmpMas.htm(2/3)
115
![Page 116: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/116.jpg)
<body>
<center>
<h2>従業員マスタ管理</h2>
<table width="380" border="1">
<tbody>
<tr><th colspan="2">従業員マスタ参照</th></tr>
<tr>
<th width="120">従業員番号</th>
<td><input type="text" id="emp_no"></td>
</tr>
<tr><th>従業員氏名</th><td id="emp_name"> </td></tr>
<tr><th>所属部署</th><td id="section"> </td></tr>
<tr><th>登録日</th><td id="mod_date"> </td></tr>
<tr>
<th><input type="button" id="rev" value=" 参照 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
データ参照 revEmpMas.htm(2/3)
116
![Page 117: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/117.jpg)
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "insert into emp_mas
values('$emp_no', '$emp_name', '$section', '$mod_date')";
if($rows = mysql_query($sql, $sv)){
echo "登録成功: "."従業員番号=".$emp_no;
}else{
echo "登録不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
参照画面サーバコード revEmpMas.php
117
![Page 118: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/118.jpg)
$server = "localhost"; $user = "mysql"; $passwd = "callback"; $sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
PHPでのMySQLデータベースアクセス手順 参照画面サーバコード revEmpMas.php
118
(1)データベースサーバへの接続 最初にmysql_connect でデータベースサーバ(ホスト)に接続する。
接続ID = mysql_connect(ホスト名,ユーザ名,パスワード)
戻り値$svには、データベースへの接続IDが代入される。 この後、この接続IDを参照してデータベースへのアクセスを行う。
![Page 119: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/119.jpg)
$dbname = "ajax_ec";
$db = mysql_select_db($dbname) or die("Connection error2");
119
(2)データベースの選択 次に、接続したデータベースサーバの中から利用するデータベースをmysql_select_dbで選択する。
$db = mysql_select_db(データベース名、接続ID)
選択に成功すれば、戻り値はTRUE、失敗すればFALSEとなる。
![Page 120: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/120.jpg)
$sql = "select * from emp_mas where emp_no='$emp_no'";
$rows = mysql_query($sql, $sv) or die("mysql query Error");
120
(3)SQL文の実行 選択したデータベースに対するSQL文の実行を、mysql_query()で行う。
結果ID = mysql_query(SQL文,接続ID);
戻り値($rows)には、SQL文の処理結果が格納される。 処理結果は「結果ID」または「結果セット」と呼ばれる。
![Page 121: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/121.jpg)
$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
(4)レコードの読みとり 結果セット($rows)には現在のレコードを示すポインタがあり、先頭は結果セットの第1レコードを示している。現在のレコードデータを連想配列名をキー値として読み出すには、 mysql_fetch_arrayの第一引数に結果セットを、第二引数に MYSQL_ASSOC を指定する。 ※同様の処理関数としてmysql_fetch_assocも使用可能。
※PHPでの文字列連結はドット演算子(.)で行う
![Page 122: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/122.jpg)
mysql_close($sv);
122
(5)データベースサーバへの接続をクローズ データベースに対する処理がすべて終了後、データベースサーバへの接続を切断する。
mysql_close(接続ID)
![Page 123: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/123.jpg)
Ajax データ登録の特徴
1) POSTメソッド使用
2) 画面遷移の無い登録 =>迅速な連続登録
3) 登録項目の動的絞込み値設定・表示 例1] リスト項目での絞込み 部リスト選択
->対応課リスト表示・選択 ->対応従業員リスト表示
例2] 検索項目入力での値設定 郵便番号入力
-> 対応住所の住所入力フィールド自動設定
4) 登録結果(成功・不成功・ステータス)の動的表示
123
![Page 124: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/124.jpg)
Ajaxでの登録画面作成
従業員マスタ登録
124
![Page 125: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/125.jpg)
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
function addEmpMas(){
var emp_no = document.getElementById("emp_no").value;
var emp_name = document.getElementById("emp_name").value;
var section = document.getElementById("section").value;
var req="emp_no="+emp_no+"&emp_name="+emp_name+"§ion="+section;
var xhrObj = getXhrObj();
xhrObj.open("post", "addEmpMas.php", false);
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrObj.send(req);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
function initOnLoad(){
var observer = document.getElementById("add");
setListener(observer, "click", addEmpMas);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
データ登録 addEmpMas.htm
(1/2)
125
![Page 126: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/126.jpg)
</head>
<body>
<center>
<h2>従業員マスタ管理</h2>
<table width="380" border="1">
<tbody>
<tr><th colspan="2">従業員マスタ登録</th></tr>
<tr>
<th width="120">従業員番号</th>
<td><input type="text" size="8" id="emp_no"></td>
</tr>
<tr><th>従業員氏名</th><td><input type="text" id="emp_name"></td></tr>
<tr><th>所属部署</th><td><input type="text" id="section"></td></tr>
<tr>
<th><input type="button" id="add" value=" 登録 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
データ登録 addEmpMas.htm
(2/2)
126
![Page 127: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/127.jpg)
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
$db = mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "insert into emp_mas values('$emp_no', '$emp_name', '$section', '$mod_date')";
if($rows = mysql_query($sql, $sv)){
echo "登録成功: "."従業員番号=".$emp_no;
}else{
echo "登録不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
データ登録サーバコード(PHP) addEmpMas.php
127
![Page 128: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/128.jpg)
Ajaxデータ検索・参照の特徴
(1)検索表示のハイスピード表示
(2) GETメソッド使用 =>検索待ち時間のタイムアウト処理 (3) 検索画面上での検索結果動的表示 =>迅速な連続検索 (4) 検索条件の絞込み・動的設定 表示 例1] 下位項目表示での絞込み 例2] リスト項目での絞込み (5) 検索結果(成功・不成功・ステータス)の動的表示
128
![Page 129: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/129.jpg)
Ajaxデータ更新・削除の特徴
(1) POSTメソッド使用
(2) 同一画面上での連続更新・削除
=>迅速な連続更新・削除処理に対応
(3) 検索結果(成功・不成功・ステータス)の動的表示 ※更新のクライアントロジックは登録と同じ、 サーバ側で受信データで登録処理を行うか更新処理 を行うかで異なる。
129
![Page 130: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/130.jpg)
Ajaxでの参照・更新・削除画面例 従業員マスタ参照/更新/削除
130
![Page 131: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/131.jpg)
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
var xhrObj = getXhrObj();
function revEmpMas(){
var emp_no = document.getElementById("emp_no").value;
xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
xhrObj.send(null);
xhrObj.onreadystatechange = function(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resp = xhrObj.responseText.split("<i>");
if(resp[0]=="OK"){
document.getElementById("status").innerHTML = resp[0];
document.getElementById("emp_name").value = resp[1];
document.getElementById("section").value = resp[2];
document.getElementById("mod_date").innerHTML = resp[3];
}else{
document.getElementById("status").innerHTML = resp[0];
}
}
}
}
}
データ更新 updEmpMas.htm
(1/3)
131
![Page 132: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/132.jpg)
function updEmpMas(){
var emp_no = document.getElementById("emp_no").value;
var emp_name = document.getElementById("emp_name").value;
var section = document.getElementById("section").value;
var req="emp_no="+emp_no+"&emp_name="+emp_name+"§ion="+section;
xhrObj.open("post", "updEmpMas.php", false);
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrObj.send(req);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
function delEmpMas(){
var emp_no = document.getElementById("emp_no").value;
xhrObj.open("post", "delEmpMas.php", false);
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhrObj.send("emp_no="+emp_no);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
function initOnLoad(){
var observer = document.getElementById("rev");
setListener(observer, "click", revEmpMas);
var observer = document.getElementById("upd");
setListener(observer, "click", updEmpMas);
var observer = document.getElementById("del");
setListener(observer, "click", delEmpMas);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
データ更新 updEmpMas.htm
(2/3)
132
![Page 133: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/133.jpg)
</head>
<body>
<center>
<h2>従業員マスタ管理</h2>
<table width="390" border="1">
<tbody>
<tr>
<th colspan="2" id="mod">
従業員マスタ参照/更新/削除
<input type="button" id="rev" value=" 参照 " />
<input type="button" id="upd" value=" 更新 " />
<input type="button" id="del" value=" 削除 " />
</th>
</tr>
<tr>
<th width="120">従業員番号</th>
<td width="260"><input type="text" id="emp_no" size="8"></td>
</tr>
<tr><th>従業員氏名</th><td><input type="text" id="emp_name"></td></tr>
<tr><th>所属部署</th><td><input type="text" id="section"></td></tr>
<tr><th>登録日</th><td id="mod_date"> </td></tr>
<tr><th>ステータス</th><td id="status"> </td></tr>
</tbody>
</table>
</center>
</body>
</html>
データ更新 updEmpMas.htm
(3/3)
133
![Page 134: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/134.jpg)
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
$db = mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "update emp_mas
set
emp_name = '$emp_name',
section = '$section',
mod_date = '$mod_date'
where
emp_no = '$emp_no'";
if($rows = mysql_query($sql, $sv)){
echo "更新成功: "."従業員番号=".$emp_no;
}else{
echo "更新不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
データ更新 updEmpMas.php
134
![Page 135: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/135.jpg)
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$passwd = "callback";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
$db = mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$sql = "delete from emp_mas where emp_no='$emp_no'";
if($rows = mysql_query($sql, $sv)){
echo "削除成功: "."従業員番号=".$emp_no;
}else{
echo "削除不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
データ更新 delEmpMas.php
135
![Page 136: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/136.jpg)
http://www.prototypejs.org
・Ajaxフレームワーク ・コード記述のシンプル化 ・クロスブラウザ対応
prototype.js
136
![Page 137: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/137.jpg)
Ajaxian.com 2007 Survey Results
137 出典: Ajaxian.com (http://ajaxian.com/)
![Page 138: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/138.jpg)
138
Google Trendsでの prototype.js dojo jQuery検索トラフィック比較
http://www.google.co.jp/trends?q=prototype.js%2C+dojo%2C+jQuery
![Page 139: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/139.jpg)
Prototype.jsの主要機能 1 ショートカット
長文メソッド名等のショートカット
2 Ajaxフレームワーク
定型的Ajaxクライアントコード記述
3 JavaScript言語機能の強化
・イテレータ
・文字列処理
・配列処理
4 オブジェクト指向機能の強化
139
![Page 140: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/140.jpg)
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
![Page 141: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/141.jpg)
使用方法 ダウントードされるprototype.jsファイルを外部js参照指定でOK <script type="text/javascript" src="../lib/prototype.js"></script>
141
![Page 142: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/142.jpg)
Prototype.js
[1] ショートカット(ユーティリティメソッド)
$() 関数 document.getElementByIdのショートカット $(“id1”) → document.getElementById(“id1”); $F() 関数 INPUTフィールドの値を所得 $F(“id1”) → document.getElementById(“id1”).value; $A() 関数 引数指定列挙型リストを配列オブジェクトに変換
142
![Page 143: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/143.jpg)
$() 関数 ID属性の値を返す 例] document.getElementByIdのショートカット document.getElementById(“id1”) → $(“id1”) ※引数として2つ以上のIDを渡すと、ID属性の並びを 配列で返す var divs = $(‘div1’, ‘div2’, ‘div3’); ※配列だけでなく要素オブジェクトそのものを渡すこともできる。
143
![Page 144: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/144.jpg)
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 [2] Ajaxフレームワーク
継承
![Page 145: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/145.jpg)
[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
![Page 146: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/146.jpg)
従業員マスタ登録をPrototype.js(Ajax.Updater) で書き換え
146
![Page 147: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/147.jpg)
<?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
![Page 148: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/148.jpg)
<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
![Page 149: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/149.jpg)
従業員マスタ参照をPrototype.js(Ajax.Request) で書き換え
149
![Page 150: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/150.jpg)
<?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
![Page 151: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/151.jpg)
//]]> </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
![Page 152: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/152.jpg)
<?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
![Page 153: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/153.jpg)
//]]> </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
![Page 154: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/154.jpg)
Ajax演習-3 prototype.js Ajaxフレームワーク 従業員番号から氏名表示を prototype.js(Ajax.Request)で書き換え て下さい。
154
![Page 155: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/155.jpg)
function revEmpMas(e) {
//処理内容
}
function initOnLoad() {
var observer = document.getElementById(“sel");
setListener(observer, "click", revEmpMas);
}
setListener(window, "load", initOnLoad );
イベントオブジェクト(e)
イベントオブジェクトからイベントに関する様々な情報を所得可能
・キー入力、マウスクリックでのイベント発生ノード識別
・キー入力イベントでの入力キー識別(キーコード値)
・マウスクリックイベントでのマウスボタン(左、右、中央)識別
・マウスポインタ(カーソル)移動でのポインタ位置検出 155
![Page 156: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/156.jpg)
イベントターゲットの検出: 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
![Page 157: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/157.jpg)
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
![Page 158: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/158.jpg)
キー コード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で返されるキーコード値
![Page 159: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/159.jpg)
function getkchar(e){
var code;
if(!e) var e = window.event;
if(e.keyCode){
code = e.keyCode;
}else if(e.which){
code = e.which;
}else{
code = false;
}
if(code)
return String.fromCharCode(code);
else
return code;
}
入力キー文字の表示: getkchar(e) (funcs.js)
159
![Page 160: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/160.jpg)
テーブルでのキー入力 入力行/列、入力キー検出
・入力位置(行/列) → getid(e)
・入力キーコード → getkcode(e)
・入力キー文字 → getkchar(e)
160
![Page 161: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/161.jpg)
<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
![Page 162: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/162.jpg)
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
![Page 163: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/163.jpg)
クリックマウスボタン(左右)の検知
FireFox 関数:e.which
•Left button: 1
•Middle button: *
•Right button: 3
MS(IE) 関数:e.button
•Left button: 1
•Middle button: *
•Right button: 2
163
![Page 164: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/164.jpg)
<?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
![Page 165: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/165.jpg)
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
![Page 166: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/166.jpg)
function mbutton(e){
var click;
if(!e) var e = window.event;
if (e.which){
if(e.which == 1){
click = "L";
}else if(e.which == 3){
click = "R";
}
}else if (e.button){
if(e.button == 1){
click = "L";
}else if(e.button == 2){
click = "R";
}
}else{
click = "F";
}
return click;
}
クリックマウスボタンの検出 mbutton(funcs.js)
・左ボタンクリック → 戻り値(“L”) ・右ボタンクリック → 戻り値(“R”)
166
![Page 167: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/167.jpg)
<?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
![Page 168: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/168.jpg)
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
![Page 169: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/169.jpg)
1. e.clientX、 e.clientY [IE,FF] 原点(0,0):ブラウザ画面左上 e.clientX: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.clientY: ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。 2. e.offsetX、 e.offsetY [IEのみ] e.offsetX: イベントでオフセットの親となるoffsetParentオブジェクトの左上を 基準としてオブジェクトのX座標をピクセル値で返す。 e.offsetY: イベントでオフセットの親となるoffsetParentオブジェクトの左上を 基準としてオブジェクトのY座標をピクセル値で返す。 3. e.screenX、 e.screenY [IE,FF] 原点(0,0):モニタ画面左上 e.screenX: スクリーン上マウス位置のX座標をピクセル値で返す。 e.screenY: スクリーン上マウス位置のX座標をピクセル値で返す。 4. e.x、 e.y [IEのみ、e.clientX、 e.clientYと同じ] e.x: ウィンドウ表示部分の左上を基準としてX座標をピクセル値で返す。 e.y: ウィンドウ表示部分の左上を基準としてY座標をピクセル値で返す。
移動するマウスポインタ位置の検出
169
![Page 170: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/170.jpg)
マウスポインタ位置の検出
170
![Page 171: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/171.jpg)
<?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <style> <!-- #area {position: absolute; background-color: #eeeeee; top: 5px; left: 5px; width: 300px; height: 300px;} #stat {position: absolute; top: 35px; left: 315px;} --> </style> <title>マウスボタン </title> <script type="text/javascript" src="../lib/funcs.js"></script> <script type="text/javascript"> //<![CDATA[ function check(e){ document.getElementById("x1").value = e.clientX; document.getElementById("y1").value = e.clientY; document.getElementById("x2").value = e.screenX; document.getElementById("y2").value = e.screenY; }
マウスポインタ位置の検出 mpos2.htm 1/2
171
![Page 172: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/172.jpg)
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
![Page 173: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/173.jpg)
Ajax演習-4
従業員番号から氏名表示を下記仕様に変更 ①従業員番号(5桁)入力により氏名表示 ヒント]入力文字数は $(“emp_no”).value.length で取得
②従業員番号入力後ALTキー押下で氏名表示 ヒント] getkcodeで返されるキーコード値はスライド NO159
173
![Page 174: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/174.jpg)
Ajaxのフォームコントロール操作
・ラジオボタン ・チェクボックス ・セレクトメニュー 必要性 : AjaxモデルでのUI操作性向上(RIA化) メリット :従来モデルにないUI操作性を実現 Ex]サーバレスポンスデータでの動的値設定 動的絞り込み検索 デメリット:従来モデルに比べて処理が複雑
174
![Page 175: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/175.jpg)
ラジオボタン
175
![Page 176: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/176.jpg)
<?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
![Page 177: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/177.jpg)
//<![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
![Page 178: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/178.jpg)
チェックボックス
178
![Page 179: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/179.jpg)
<?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
![Page 180: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/180.jpg)
チェクボックス選択確認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
![Page 181: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/181.jpg)
チェックボックス-複数選択での処理
181
![Page 182: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/182.jpg)
<?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
![Page 183: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/183.jpg)
//<![CDATA[
var optcum = new Array();
var options = new Array();
function checked(e){
var xhrObj = getXhrObj();
var eid =getid(e);
if(eid != “confirm”){
optcum.push(eid);
document.getElementById(“result1”).innerText = eid;
document.getElementById(“result2”).innerHTML = optcum;
document.getElementById(“result2”).innerHTML = optcum;
} else {
for(var i = 0; i < optcum.length; i++){
if(document.getElementById(optcum[i]).checked == true)
options.push(optcum[i]);
}
xhrObj.open(“post”, “../checkbox”, false);
xhrObj.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);
xhrObj.send(“options=” + options);
out = xhrObj.responseText;
document.getElementById(“result3”).innerHTML = out;
}
}
function initOnLoad(){
var observer = document.getElementById("pc");
setListener(observer, "click", checked);
}
setListener(window, "load", initOnLoad);
//]]>
checkBox.js
183
![Page 184: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/184.jpg)
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
![Page 185: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/185.jpg)
セレクトメニュー
185
![Page 186: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/186.jpg)
<?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
![Page 187: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/187.jpg)
//<![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
![Page 188: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/188.jpg)
セレクトメニュー 絞り込み検索
188
![Page 189: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/189.jpg)
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Select2</title>
<link type="text/css" rel="stylesheet" href="../lib/style.css"/>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//JavaScript
</script>
</head>
<body>
<center class="t3">Select Menu2</center>
<table width="440" align="center">
<tr>
<td width="90" align="right">クラス1項目</td>
<td width="130" id="class1">
<select><option value="">-----クラス1選択-----</option></select>
</td>
<td width="90" align="right">クラス2項目</td>
<td width="130"id="class2">
<select><option value="">-----クラス2選択-----</option></select>
</td>
</table>
</body>
</html>
selectMenu2.htm 1/4
189
![Page 190: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/190.jpg)
//<![CDATA[
Var xhrObj = getXhrObj();
function getClass1(){
xhrObj.open('get', 'getClass1Sel.php’);
xhrObj.onreadystatechange = getClass1Resp;
xhrObj.send(null);
}
function getClass1Resp(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resRows = xhrObj.responseText.split(“<r>");
var out = '<select id="class1List">'
+ '<option value="">----クラス1選択----</option>';
for(var i = 0; i < resRows.length; i++){
var resRow = resRows[i].split(“<i>");
for(var j = 0; j < resRow.length; j++){
if(j==0){
class1_code = resRow[j];
}else{
out += '<option value=' + class1_code + '>' + resRow[j] + '</option>';
}
}
}
out += '</select>';
$("class1").innerHTML = out;
}
}
}
selectMenu2.htm 2/4
190
![Page 191: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/191.jpg)
function getClass2(){
var class1_code = $("class1List").value;
xhrObj.open('get', 'getClass2Sel.php?class1_code='+class1_code, false);
xhrObj.onreadystatechange = getClass2Rv;
xhrObj.send(null);
}
function getClass2Rv(){
var i, j, resRows, resRow, out, out3, code;
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
resRows = xhrObj.responseText.split(“<r>");
out = '<select id="class2List">'
+ '<option value="">---クラス2選択済---</option>';
for(i = 0; i < resRows.length; i++){
resRow = resRows[i].split(“<i>");
for(j = 0; j < resRow.length; j++){
if(j==0){
class2_code = resRow[j];
}else{
out += '<option value=' + class2_code + '>' + resRow[j] + '</option>';
}
}
}
out += '</select>';
$("class2").innerHTML = out;
setListener($("class2List"), "change", getClass3);
}
}
}
selectMenu2.htm 3/4
191
![Page 192: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/192.jpg)
function getClass3(){
alert($("class2List").value);
}
Function initOnLoad(){
setListener($("class1List"), "change", getClass2);
}
setListener(window, "load", initOnLoad);
setListener(window, "load", getClass1,);
selectMenu2.htm 4/4
192
![Page 193: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/193.jpg)
<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
![Page 194: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/194.jpg)
Ajax演習-5
従業員番号から氏名表示 従業員番号をセレクトメニューからの 選択表示に変更 ※従業員番号のセレクトメニュー設定も非同期 通信で動的に行ってください。 解答はselect-base.htmのAAAAA~FFFFF
を埋める形で行って下さい。
194
![Page 195: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/195.jpg)
(5)UI表示 5 DOMを使用してイベントの相互作用と動的な画面表示を行う dynamic display and interaction using the Document Object Model
195
![Page 196: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/196.jpg)
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
![Page 197: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/197.jpg)
Ajaxモデルでの動的表示方式
1. HTMLタグの流し込み
2. DOMノード操作での動的ノード生成
3. XSLT(スタイルシート)での動的画面生成
4.画像ファイルの非同期ダウンロード
197
![Page 198: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/198.jpg)
DOMノード操作概要
ノードの種類 ・要素ノード (element node) ・属性ノード (attribute node) ・テキストノード(text node)
<div id=“id1” class=“class1”>DOMノード操作</div>
要素ノード <div>
テキストノード DOMノード操作
属性ノード id=“id1” , class=“class1”
例]
198
![Page 199: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/199.jpg)
インタフェース名 概要 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
![Page 200: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/200.jpg)
body 要素
table 要素
tbody 要素
id=“obs”
属性
tr 要素
tr 要素 id=“tgt1”
属性
id=“tgt2”
属性
td 要素
td 要素
td 要素
td 要素
“埼玉”
テキスト “千葉”
テキスト
“神奈川”
テキスト “山梨”
テキスト
h1 要素
“東京近県”
テキスト
DOMツリーとノード
要素:要素ノード
属性:属性ノード
テキスト:テキストノード
document html
200
![Page 201: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/201.jpg)
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
![Page 202: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/202.jpg)
[1] ノードの参照
PreviousSibling
firstChild lastChild getAttribute
202
![Page 203: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/203.jpg)
getAttribute メソッド
書式] object.getAttribute('attributeName‘ [, 'type‘]) 説明] オブジェクトの指定された属性の値を返す。 引数] attributeNameは属性の名前を指定。 typeは種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする) 2(値を返す) 返値] アトリビュートの値 対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
属性ノードの参照
203
![Page 204: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/204.jpg)
getAttributeメソッド
204
![Page 205: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/205.jpg)
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
![Page 206: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/206.jpg)
getAttributeNode メソッド
書式] object.getAttributeNode('attributeName') 説明] オブジェクトの指定された属性のノード値を返す。 引数] AttributeNameは属性名を指定。 返値] attributeオブジェクトを返す。 対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
属性ノードの参照
206
![Page 207: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/207.jpg)
var value1 = document.getElementById(“id1”).getAttributeNode(“id”).nodeType; =>value1に 2(属性ノードのノードタイプ) が返される。 var value1 = document.getElementById(“id1”).getAttributeNode(“id”).nodeName; =>value1に “id”(id属性の属性名) が返される。 var value1 = document.getElementById(“id1”).getAttributeNode(“id”).nodeValue; =>value1に “id1”(id属性の属性値) が返される。 ※.getAttributeNodeメソッドの引数に”name”を指定すれば、name属性に関して 同様の値が参照される。.
getAttributeNodeサンプル
207
![Page 208: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/208.jpg)
getAttributeNodeメソッド
208
![Page 209: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/209.jpg)
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
![Page 210: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/210.jpg)
属性ノードの参照 サンプルプログラム-2
210
![Page 211: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/211.jpg)
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
![Page 212: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/212.jpg)
3.子ノードの参照
var value1 = document.getElementById(“id1”).firstChild.nodeType; =>value1に ID属性で値”id1を持つノード、つまり<p>タグの最初の子ノード ” DOMノード参照1”のノードタイプ3(テキストノードのノードタイプ) が返される。 var value1 = document.getElementById(“id1”).firstChild.nodeValue; =>value1に ” DOMノード参照1”が返される。 childnodesは子ノード総てのリストを返し、インデックスで第何子かを指定 することができる。 var value1 = document.getElementById(“div1”).childNodes.nodeName; =>value1にはdivタグの子ノードすべてが配列で返される。 var value1 = document.getElementById(“div1”).childNodes[0].nodeName; => value1にはdivタグの最初の子ノードが返される。
212
![Page 213: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/213.jpg)
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
![Page 214: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/214.jpg)
firstChild,lastChildプロパティ
214
![Page 215: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/215.jpg)
<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
![Page 216: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/216.jpg)
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
![Page 217: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/217.jpg)
childNodes コレクション
書式] object.childNodes object.childNodes[index] object.childNodes.length 機能] オブジェクトの子ノードを返す。 評価値は配列で最初の子ノードは0番になる。 引数] id属性値。 返値] 子ノードオブジェクトの配列 適用] object 対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
子ノードの参照
217
![Page 218: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/218.jpg)
childNodesプロパティ
218
![Page 219: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/219.jpg)
<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
![Page 220: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/220.jpg)
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
![Page 221: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/221.jpg)
hasChildNodesメソッド
221
![Page 222: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/222.jpg)
<?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
![Page 223: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/223.jpg)
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
![Page 224: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/224.jpg)
3.兄弟ノードの参照(nextSibling、previousSibling) ・兄弟ノードはnextSiblingメソッドで参照することができる。 ・firstChild.で長子が参照されたあとnextSiblingの適用で次子が参照される。 var value1 = document.getElementById(“id1”).nextSibling.nodeName; =>value1に次の兄弟ノードのタグ名が返される。 ・次子から三子、四子とたどっていく場合にはnextSiblingを連結して適用していく 例] document.getElementById(“id1”).nextSibling.nextSibling.nextSibling.nodeValue;
4.親ノードの参照(parentNode) 親ノードはparentNodeプロパティで参照される。 var value1 = document.getElementById(“id1”).parentNode.nodeName; =>value1に ”DIV”(親ノードのタグ名) が返される。
224
![Page 225: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/225.jpg)
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
![Page 226: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/226.jpg)
nextSibling、previousSibling
226
![Page 227: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/227.jpg)
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
![Page 228: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/228.jpg)
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
![Page 229: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/229.jpg)
parentNode プロパティ 書式] object.parentNode 機能] 親ノードを参照する。 適用] object 対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
親ノードの参照
229
![Page 230: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/230.jpg)
parentNodeプロパティ
230
![Page 231: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/231.jpg)
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
![Page 232: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/232.jpg)
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
![Page 233: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/233.jpg)
body 要素
table 要素
tbody 要素
id=“obs”
属性
h1 要素
“東京近県”
テキスト
createElement createElement
createTextNode
setAttribute
[2] ノードの追加
233
appendChild
![Page 234: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/234.jpg)
createElement メソッド 書式] object.createElement(element)
機能] 引数で指定したエレメントを生成する。 引数] 要素(エレメント)の名前 戻値] 作成したオブジェクト。 適用] document 対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
例] divノードの生成 var div1= document.createElement(“div");
要素ノードの生成
234
![Page 235: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/235.jpg)
createTextNode メソッド 書式] object.createTextNode(text) 機能] 引数で指定されたテキストノードを生成する 引数] 作成するテキスト 返値] TextNodeオブジェクト 適用] document 対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
例] テキストノード “Ajax基礎講座” を生成 var text1 = document.createTextNode(“Ajax基礎講座");
テキストノードの生成
235
![Page 236: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/236.jpg)
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
例]
![Page 237: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/237.jpg)
ノードの生成
237
![Page 238: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/238.jpg)
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
![Page 239: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/239.jpg)
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
![Page 240: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/240.jpg)
属性ノードの追加
setAttribute メソッド
書式]object.setAttribute('attributeName', 'value', ['type‘] ) 機能] オブジェクトに、引数で指定された属性を追加する。
引数] attributeNameはアトリビュート名を指定。 valueは値を指定。 typeは種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする)
返値] なし
例] div1 = document.createElement(“div"); div1.setAttribute("id", “id1”]);
240
![Page 241: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/241.jpg)
属性の追加
241
![Page 242: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/242.jpg)
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
![Page 243: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/243.jpg)
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
![Page 244: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/244.jpg)
属性の変更は、属性の上書き(setAttribute)で可能
244
![Page 245: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/245.jpg)
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
![Page 246: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/246.jpg)
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
![Page 247: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/247.jpg)
insertBefore メソッド
書式] object.insertBefore(newNode, existingNode)
機能] objectで指定されたノード内で、第2引数で指定された既存ノード オブジェクトの前に指定された新しいノードオブジェクトを挿入する。 引数] newNode: 新しいノードオブジェクトを指定。 existingNode: 既存のノードオブジェクトを指定。 戻値] ノードオブジェクト。
対応] [IE5~][Firefox 1~][Safari 1~][Opera 8~][Netscape 6~]
既存ノードの前に新規ノードオブジェクトを挿入する
247
![Page 248: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/248.jpg)
insertBefore
248
![Page 249: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/249.jpg)
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
![Page 250: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/250.jpg)
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
![Page 251: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/251.jpg)
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
![Page 252: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/252.jpg)
replaceChild
252
![Page 253: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/253.jpg)
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
![Page 254: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/254.jpg)
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
![Page 255: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/255.jpg)
テキストの挿入
insertData メソッド
書式] object.insertData(‘offset’, ‘text’)
機能] オブジェクト(object)に、第2引数で指定されたテキストを 挿入する。 引数] offsett:既存テキストの、どの文字位置にテキストを挿入 するかを指定する。 text:挿入されるテキストリテラル。 ※テキスト位置は英数字と漢字を区別しないで指定可能。 適用] テキストノード、コメント 返値] なし
255
![Page 256: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/256.jpg)
insertData
256
![Page 257: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/257.jpg)
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
![Page 258: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/258.jpg)
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
![Page 259: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/259.jpg)
その他のノード追加用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
![Page 260: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/260.jpg)
removeNode メソッド
書式] object.removeNode(“value”) 機能] 指定されたノードオブジェクトを削除する。 引数] valueは値を指定。次のいずれか。 true(childNodesコレクションを含める) false(childNodesコレクションを含めない) 返値] ノードオブジェクトを返す。
[3] ノードの削除
ノードオブジェクトを削除
260
![Page 261: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/261.jpg)
ノードオブジェクトの削除
261
![Page 262: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/262.jpg)
<?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
![Page 263: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/263.jpg)
//]]> </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
![Page 264: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/264.jpg)
removeChild メソッド
書式] pnode.removeChild(cnode) 機能] オブジェクトの指定された子ノードオブジェクトを 削除する。 引数] pnode:親ノードオブジェクト。 cnode:子ノードオブジェクト。 返値] ノードオブジェクト。 対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
子ノードオブジェクトを削除する
264
![Page 265: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/265.jpg)
ID値id1を持つ親ノードの3番目の子ノードを削除 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
![Page 266: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/266.jpg)
子ノードの削除
266
![Page 267: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/267.jpg)
<?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
![Page 268: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/268.jpg)
</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
![Page 269: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/269.jpg)
removeAttribute メソッド 書式] object.removeAttribute('attributeName', ['type‘]) 機能] オブジェクトの指定された属性値を削除する。 引数] attributeName:アトリビュート名を指定。 type:は種類を指定。次のいずれか。 0(アトリビュート名の大文字小文字の区別をしない) 1(アトリビュート名の大文字小文字の区別をする) 返値] true(削除)、false(非削除) 対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
例] $(“id1”). removeAttribute(‘name', 0)
属性(attribute)を削除
269
![Page 270: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/270.jpg)
Ajax演習-6
従業員番号から氏名表示 選択従業員番号と氏名を画面下部 に履歴表示して下さい。 解答はseldom-base.htmのAAAAA~FFFFF
を埋める形で行って下さい。
270
![Page 271: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/271.jpg)
4. XMLとXSLTを使用したデータ交換と操作を行う data interchange and manipulation using XML and XSLT
XML/XSLT
271
XMLドキュメント
スタイルシート
![Page 272: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/272.jpg)
XMLデータの受信と表示-1 ・製品選択項目クリックで対応する商品一覧を表示 ・XMLファイルをサーバから受け取る。 ・DOMノード操作で画面表示を行う。
製品選択項目
製品一覧
272
![Page 273: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/273.jpg)
XHTML
JavaScript関数
XMLデータの受信と表示-1 機能概要
XMLファイル
XHR
DOMオブジェクト
データの取出し
データ組立・表示
[使用ファイル] HTMLファイル xmlSmpl1.htm XMLファイル xml1.xml
JavaScript外部フィル funcs.js
サーバ環境
マウスクリックイベント
273
![Page 274: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/274.jpg)
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="xml2.xsl" type="text/xsl" ?>
<mart>
<computer>
<model>PCモデル1</model>
<os>WindowsXP Home</os>
<cpu>Celeron2 Ghz</cpu>
<memory>SDRAM 256MB</memory>
<hdd>40GB 7200rpm</hdd>
<dvd>CD-ROM</dvd>
<display>NA</display>
<price>62,000</price>
</computer>
<computer>
<model>PCモデル2</model>
<os>WindowsXP Pro</os>
<cpu>Celeron2 Ghz</cpu>
<memory>SDRAM 512MB</memory>
<hdd>60GB 7200rpm</hdd>
<dvd>CD-RW</dvd>
<display>15インチ液晶</display>
<price>72,000</price>
</computer>
<computer>
<model>PCモデル3</model>
<os>WindowsXP Pro</os>
<cpu>Pentium4 2Ghz</cpu>
<memory>SDRAM 512MB</memory>
<hdd>60GB 7200rpm</hdd>
<dvd>CDROM DVD</dvd>
<display>17インチ液晶</display>
<price>72,000</price>
</computer>
<computer>
<model>PCモデル4</model>
<os>RedHat9</os>
<cpu>Pentium4 2Ghz</cpu>
<memory>SDRAM 512MB</memory>
<hdd>80GB 7200rpm</hdd>
<dvd>CD-ROM</dvd>
<display>NA</display>
<price>72,000</price>
</computer>
<computer>
<model>PCモデル5</model>
<os>Fedora Core4</os>
<cpu>Pentium4 3Ghz</cpu>
<memory>SDRAM 1GB</memory>
<hdd>80GB 7200rpm</hdd>
<dvd>CD-ROM</dvd>
<display>19インチ液晶</display>
<price>72,000</price>
</computer>
</mart>
XMLファイル(xml1.xml)
274
![Page 275: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/275.jpg)
XMLHttpRequestオブジェクト
responseXMLプロパティ 書式] readonly Document responseXML 機能] リクエストに対する応答はtext/xmlストリームとして解釈される。 属性のDocumentはレスポンスがDOMドキュメントオブジェクトで あることを表している。 リクエストが不成功の場合、または完了していない場合はNULLが 返される。
例] xhrObj.onreadystatechange = function() { if (xhrObj.readyState == 4) { if(xhrObj.status==200) { var xmlVal = xhrObj.responseXML; : } } }
※Internet Explorerの場合、受信データはUnicode文字列として解釈される。
275
![Page 276: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/276.jpg)
getElementsByTagName メソッド
書式] object. getElementsByTagName(“タグ名”) 機能] 指定したタグ名を持つオブジェクト(要素ノード)を配列形式で返す 引数] タグ名 返値] オブジェクトの参照 適用] document 対応] [IE5~][Firefox1~][Safari1~][Opera8~][Netscape6~]
要素ノードの参照
※ワイルドカード “*” で総てのノード要素を指定することが出来る。 ※funcs.jsでショートカット関数が用意されている。 例] document.getElementsByTagName(“div”);
↓
tn(“div”); // funcs.js
276
![Page 277: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/277.jpg)
<?xml version="1.0" encoging="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Ajax Sample1</title>
<style type="text/css">
#items {background-color: #ccffcc}
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
var httpObj;
function reqItems(e){
var reqXmlUri = "xmldoc/xml" + getid(e).substr(4,1) +".xml";
new Ajax.Request(reqXmlUri, {method:'get', onComplete:out});
}
xmlSmp1.htm 1/3
277
![Page 278: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/278.jpg)
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
![Page 279: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/279.jpg)
Function initOnLoad(e) {
setListener($("items"), "click", reqItems);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<table border="1" align="center" width="600">
<tr id="items">
<td align="center" id="item1">デスクトップ</td>
<td align="center" id="item2">ノート PC</td>
<td align="center" id="item3">サーバ製品</td>
<td align="center" id="item4">周辺機器</td>
<td align="center" id="item5">プリンタ</td>
</tr>
</table>
<br />
<div id="out"></div>
</body>
</html>
xmlSmp1.htm 3/3
279
![Page 280: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/280.jpg)
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
![Page 281: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/281.jpg)
・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
![Page 282: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/282.jpg)
<?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
![Page 283: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/283.jpg)
XMLデータの受信と表示-2 ・製品選択項目クリックで対応する商品一覧を表示 ・XMLファイル、 スタイルシートをサーバから受け取る。 ・ブラウザ内蔵のパ-サを利用して画面表示を行う。
283
![Page 284: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/284.jpg)
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
![Page 285: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/285.jpg)
<?xml version="1.0" encoging="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Ajax Sample2</title>
<style type="text/css">
.items {background-color: #ccffcc}
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqItems(e){
var xhrObj = getXhrObj();
xhrObj.open("get", "xmldoc/xml"+getid(e).substr(4,1)+".xsl" , false);
xhrObj.send(null);
var dataXsl = xhrObj.responseXML;
xhrObj.open("get", "xmldoc/xml"+getid(e).substr(4,1)+".xml" , false);
xhrObj.send(null);
var dataXml = xhrObj.responseXML;
$("out").innerHTML = dataXml.transformNode(dataXsl.documentElement);
}
xmlSmp2.htm
1/2
285
![Page 286: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/286.jpg)
function initOnLoad(){
setListener($("item"), "click", reqItems);
}
setListener(window, "load", initOnLoad);
//]]>
</script>
</head>
<body>
<table id="item" border="1" align="center" width="600">
<tr class="items">
<td align="center" id="item1">デスクトップ</td>
<td align="center" id="item2">ノート PC</td>
<td align="center" id="item3">サーバ製品</td>
<td align="center" id="item4">周辺機器</td>
<td align="center" id="item5">プリンタ</td>
</tr>
</table>
<br />
<div id="out"></div>
</body>
</html>
xmlSmpl2.htm
2/2
286
![Page 287: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/287.jpg)
<?xml version="1.0" encoging="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Ajax Sample2</title>
<style type="text/css">
.items {background-color: #ccffcc}
</style>
<script type="text/javascript" src="../lib/funcs.js"></script>
<script type="text/javascript" src="../lib/prototype.js"></script>
<script type="text/javascript">
//<![CDATA[
function reqItems(e){
var req = "xmldoc/xml"+getid(e).substr(4,1);
var xslDat = getsynx(req + ".xsl");
var xmlDat = getsynx(req + ".xml");
$("out").innerHTML = xmlDat.transformNode(xslDat.documentElement);
}
xmlSmp3.htm
1/2
287
![Page 288: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/288.jpg)
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
![Page 289: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/289.jpg)
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
![Page 290: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/290.jpg)
290
JSONデータの書式 オブジェクトと配列の組合せで構造化されたデータを表現する。
1.オブジェクトは{}で全体を囲み、キーと値のペアをコロン(:)で区切って記述。
カンマ(,)で複数のキーと値を記述できるが、キーには文字列のみ使用可能。
例: { "emp_no": "A0001", "emp_name": "山田太郎“}
2.配列は繰り返し項目を表現する際に使用する。
全体を[]で囲み、値をカンマ(,)で区切って列挙。
例: [“山田太郎”, “鈴木健児”, “田中佳子”]
3.構造化されたデータを表現するため、オブジェクトと配列を自由にネストさ
せることができる。
例: { “emp_name”: [“山田太郎”, “鈴木健児”, “田中佳子”]}
![Page 291: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/291.jpg)
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"];
![Page 292: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/292.jpg)
JSONデータで従業員情報表示
292
![Page 293: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/293.jpg)
{ "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のデータ形式
![Page 294: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/294.jpg)
294
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>従業員情報表示</title>
<script type="text/javascript" src="../../lib/funcs.js"></script>
<script type="text/javascript">
//<![CDATA[
//JavaScriptコード
//]]>
</script>
</head>
<body>
<center>
<h4>
従業員情報表示<input type="button" value=" 表示 " id="sel" />
</h4>
<div id="view"></div>
</center>
</body>
</html>
jsonEmpAll.htm
![Page 295: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/295.jpg)
295
function xhrFunc(){
var emp_id, emp_name;
var view = "<table width='300' border='1'><tbody>"
+ "<tr><th>従業員番号</th><th>氏名</th></th><th>所属</th></tr>";
var xhrObj = getXhrObj();
xhrObj.open("get", "jsonemp.txt");
xhrObj.setRequestHeader("If-Modified-Since", "01 Jan 2000 00:00:00 GMT");
xhrObj.send(null);
xhrObj.onreadystatechange = function(){
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
var resp = eval("(" + xhrObj.responseText + ")");
for(var i = 0; i < resp.empmas.employee.length; i++){
var emp_no = resp.empmas.employee[i].emp_no;
var emp_name= resp.empmas.employee[i].emp_name;
var section = resp.empmas.employee[i].section;
view+="<tr><td>"+emp_no+"</td><td>"+emp_name+"</td><td>"+section+"</td></tr>";
}
view += "</tbody></table>";
id("view").innerHTML = view;
}
}
}
}
function initOnLoad(){
setListener(id("sel"), "click", xhrFunc);
}
setListener(window, “load”, initOnLoad);
jsonEmpAll.htm
![Page 296: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/296.jpg)
Ajax開発環境
Appendix
296
![Page 297: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/297.jpg)
Windows Script Debugger http://www.microsoft.com/downloads/details.aspx?FamilyID=e606e71f-ba7f-471e-a57d-f2216d81ec3d&DisplayLang=ja
297
![Page 298: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/298.jpg)
Firebug Firefoxアドオンの開発デバッグ環境
https://addons.mozilla.org/ja/firefox/addon/1843
298
![Page 299: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/299.jpg)
Ajaxクライアント開発環境 – APTANA http://www.aptana.com
299
![Page 300: Ajax basic](https://reader033.vdocuments.pub/reader033/viewer/2022052623/559b67831a28ab213c8b4813/html5/thumbnails/300.jpg)
APTANA - メソッドのブラウザ対応表示
300