Ajax basic

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

清野克行
http://www.at21.net
superelmer21@gmail.com

1

基礎編目次
１ Ajaxの概要
1.1 Ajaxの特徴
1.2 Ajaxを利用したWebアプリケーション例

2. Ajax初めてのプログラム
2.1 XHTMLでの画面定義
2.2 CSSでのスタイル指定
2.3 DOMモデルでのイベント処理
2.4 XMLHttpRequestで非同期通信
2.5 Ajax非同期通信でのデータ表示例
2.6 GET/POSTと同期/非同期の組み合わせパターン
[PC実習] 非同期通信でのデータ表示画面作成

3. AjaxでのデータCRUD(登録・参照・更新・削除)処理
3.1 Ajaxでのマスタ登録画面作成方法
3.2 Ajaxでのマスタ参照画面作成方法
3.2 Ajaxでのマスタ更新画面作成方法
[PC実習] Ajaxでのマスタ登録画面作成
Ajaxでのマスタ参照画面作成

2

4. Prototype.jsのAjaxフレームワーク
4.1 Ajax.Requestでの非同期通信
4.2 Ajax.Updaterでの非同期通信
4.3 Periodical.Updaterの非同期通信
[PC実習] Ajax.Requestでのマスタ参照画面修正
Ajax.Updaterでのマスタ登録画面修正
4.4 Form.serializeでの登録機能
4.5 $()関数とイテレータでの参照機能
[PC実習] Form.serializeでのマスタ参照画面修正
$()関数とイテレータでの参照画面修正

5.フォームコントロールへのAjax適用
5.1 Ajaxでのラジオボタン処理
5.2 Ajaxでのチェクボックス処理
5.3 Ajaxでのプルダウンメニュー処理
[PC実習] 参照画面をプルダウンメニュー検索に変更

6. .XMLとスタイルシートを使用したデータ交換と操作
6.1 XMLデータ受信での画面表示
6.2 XMLとスタイルシート受信での画面表示
6.3JSONデータ受信での画面表示
6.4XMLデータ受信JSON変換でのデータ表示

3

Ajaxの始まり
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

5

Ajax命名者のJesse James Garrettによる
Ajaxの定義
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 6

Ajaxモデルでの処理の流れ
DOM
① イベント処理

CONTROLLER
Web GET/POST
GUI
MODEL サーバ
VIEW ・テキストデータ
② サーバ通信
・XMLデータ
ＸＨＴＭＬ＋ＣＳＳ ③ ＵＩ表示
・XHTML 画面構成
・CSS 表示制御

④ 表示制御 ⑤ 演算処理

JavaScript
(Ajaxエンジン)
7

AjaxモデルでのWebシステム
(SPI=Single Page Interface)

Webブラウザ
データアクセス
プレゼンテーション DB
GET/POST
Web
XHR
UI テキスト
ビジネスロジック XML
Ajaxエンジン
XML
データストア

Webクライアント CGI系プログラム

ユーザPC サーバサイド

8

従来モデルでのWebシステム
(MPI=Multi Page Interface)

Web GET/POST
UI-1 データアクセス

DB

ビジネスロジック

プレゼンテーション
Web HTML画面
UI-2

ユーザPC サーバサイド

9

UI機能の変遷 SOAP
REST

Webクライアントライブラリ
ネ W3C
ッ Ajaxクライアント
ト
ワ
ー
ク
・
管
理

汎用機ダム端末

C/Sクライアント

UIリッチ度 10

使用されるソフトウエア技術=Web標準
Ajaxを構成する要素技術は、ほぼ総てがW３C勧告準拠
⇒プラグイン等の設定なして動作可能
⇒将来の永続的サポートが保障される

[W3C = World Wide Web Consortium]
WWWで利用される技術の標準化をすすめる団体。WWW技術に関わりの深い企業、
大学・研究所、個人などが集まって、1994年10月に発足した。 W3Cの設立には
マサチューセッツ工科大学(MIT)やWWWが開発された欧州合同素粒子原子核研究
機構(CERN)などが大きな役割を果たしている。現在では、

・マサチューセッツ工科大学計算機科学研究所(MIT/LCS)、
・フランス国立情報処理自動化研究所(INRIA)、
・日本の慶應義塾大学SFC研究所(Keio-SFC)

がホスト機関としてW3Cを共同運営している。
なお、2003年1月にはこのうちINRIAがホストから抜ける予定で、INRIAに代わって
欧州情報処理数学研究コンソーシアム(ERCIM)が欧州からのホスト機関として参加
する。ERCIMはINRIAやFraunhofer-Gesellschaftなど、欧州各国の研究機関からな
る組織。
11

Ajax適用の
代表的サイト
12

Ajax適用の代表的サイト
コンシューマ向けサイト
・Ajaxの代表サイトとされるコンシューマサイト
Googleマップス、Googleインクリメンタルサーチ

・DynamicHTMLとの類似
画像ファイルのダウンロード

・マッシュアップ(Web2.0)

・既存ソフトとの機能融合(相乗効果)

13

1) Netflix http://www.netflix.com/BrowseSelection?lnkctr=nmhbs
⇒AjaxとDynamicHTMLの境界

14

2) Googleマップ http://maps.google.co.jp/
⇒Ajaxの通信方式を使わない代表的Ajaxサイト

15

3) Googleサジェスト http://www.google.co.jp/webhp?complete=1
⇒典型的なAjax手法を適用したサイト：インクリメンタル検索

16

4) map.rails2u.com http://map.rails2u.com/
⇒Ajax手法の組み合わせ : マッシュアップ
[マッシュアップ]
複数の異なる提供元の技術
やコンテンツを複合させて
新しいサービスを形作ること

17

5) Ajaxでの日本語入力 http://chasen.org/~taku/software/ajax/ime/

⇒Ajaxと既存アプリの組合せ - 日本語入力機能のないOSから日本語入力

18

Ajaxサンプル業務アプリケーションのＲＩＡ化
仕訳データ入力
UI操作性の向上とプラットホームとしてのWeb

19

部品構成表示
再帰呼び出し関数内からの非同期通信

20

電子商取引システムへのAjax適用
ユーザ画面データベース管理者画面
Ajax適用

参照・更新・削除
Ajax適用クラス１項目登録

クラス２項目登録
電子商取引
サイト
クラス３項目登録

全項目
商品登録参照・更新・削除
テーブル
21

電子商取引サイトでの商品表示-操作手順
[大分類] 画面ロード
イベント
クラス１項目
クリック
[中分類]
クラス２項目
クリック
[小分類]
クラス３項目
クリック
[商品]

商品マスタ

22

電子商取引サイト画面

23

電子商取引サイト商品情報登録画面

24

Webスプレッドシート応用事例

25

Webスプレッドシートでのグラフ表示例

26

受注情報登録画面のＲＩＡ化

27

受注情報登録とコールバック表示（１）

28

受注情報登録とコールバック表示（２）

29

Ajax
プログラミング
30

[１]Ajax初めてのプログラム
従業員番号から氏名表示
[操作手順]

1.従業員番号入力
↓
2.カーソル移動
↓
3.従業員氏名表示

31

Ajax初めてのプログラム処理フロー
XHTML
JavaScript
② ③ テキスト
XMLHttpRequest サーバ側
ファイル
④ プログラム DB
⑤
① DOM API
Ajax処理フロー
①HTML画面からのイベント発生
イベントハンドラ
↓
⑤
②XMLHttpRequestでサーバへの
デ―タ表示 HTTPリクエスト発行
↓
③サーバでのデータアクセス処理等
↓
④サーバからのデータ送信と
XMLHttpRequestでの受信
↓
⑤DOM APIへの受信データセット
と表示
32

Ajax初めてのプログラム – プログラム作成手順
[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> 33

[２] イベントリスナと関数スケルトン記述
<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> 34
</html>

[３] イベントリスナの設定
//<![CDATA[
function xhrFunc(){
//非同期通信処理
}
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のフィールドにフォーカスを移動する。
}
//画面ロード完了イベントで関数initOnLoadを呼び出す。
//]]>
</script>

35

[４] サーバへ非同期リクエストを送る(GET/非同期)
//<![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

XMLHttpRequestオブジェクトの生成
ファイル名：funcs.js
function getEmpName(){ 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;
}
37

[５] データ受信と表示(GET/非同期)
function xhrFunc(){
xhrObj.onreadystatechange = function(){
//readyStateの値が変更のたびに右辺の匿名関数を呼び出す
if(xhrObj.readyState == 4){
if(xhrObj.status == 200){
//readyStateが４、statusが200でサーバからのレスポンス受信完了
var emp_name = xhrObj.responseText;
//レスポンスデータ（従業員氏名）を変数emp_nameにセット
document.getElementById("emp_name").value = emp_name;
//従業員指名をID値emp_nameの入力（INPUT）フィールドに表示
}
}
}
xhrObj.send(null);
}
38

[６] サーバ側スクリプト(PHP)
GETメソッドでのPHP
<?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);
?>
① PHPコード記述は <?php で始まり ?> で終わる empfile.txtファイル
② Ajaxではタグ記述部分は（一般に）使用されない。 A0001山田太郎
③ 基本シンタックスはC言語に類似 A0002鈴木健児
④ 変数名は先頭に＄を付ける A0003田中佳子
⑤ Ajaxクライアント（GETメソッド）からの送信データは A0004佐藤弘明
$_GET[“送信パラメータ名”] で受信 A0005伊藤弘志 39

<?php getUniq.php
//PHPコード記述の開始
$emp_no = $_GET["emp_no"];
//変数名は先頭$で始める
//GETメソッドでの送信データは$_GET[“送信パラメータ名”]で受信
$fp = fopen("empfile.txt", "r") or die("OPENエラー");
//テキストファイル“employee.txt”をREADモードでオープン
//fgets($fp) は$fpから行単位で読み取り変数$dataにセットする
if(strncmp($data[0], $emp_no, 5) == 0){
//最初の５文字がGET受信データと等しい場合条件成立
echo substr($data[0], 5);
//５文字から後の名前部分をAjaxクライアントへ送信
break;
}
}
fclose($fp); //ファイルクローズ
?> 40

POSTメソッドでのPHP postUniq.php
<?php
$emp_no = $_GET[“emp_no”];
$fp = fopen(“empfile.txt”, “r”) or die(“OPENエラー”);
if(strncmp($data, $emp_no, 5) == 0){
echo substr($data, 5);
break;
}
}
fclose($fp);
?>

受信処理で $_GETが$_POSTに替わるだけ

41

PHP: Hypertext Preprocessor
Apacheモジュールとして動作するスクリプト言語とその実行環境
1994年秋、Rasmus Lerdorf（グリーンランド⇒デンマーク）が作っていた Perlスクリプト
を C言語で書き直し、HTMLフォームを扱える動的なWebアプリケーションのための機
能に拡張したのが始まりとされる。

PHP公式サイト
http://www.php.net/

42

[PHPの特徴]
（１）Webアプリケーション開発に特化した言語。
・ CGI処理用の構文・変数等を装備
（２）文法が比較的容易に誰でも習得することができる。
・基本シンタックスはC言語類似だが、より簡略化されている。
（３）インタープリタ言語でコンパイルの必要なし。
・小回りが利き、短期開発に向いている。
（４）CGIと比較すると、実行速度が断然早い。
・Apacheモジュールとして実行され、別プロセスを生成しない
（５）多くの拡張ライブラリをサポート
・PEAR (PHP Extension and Application Repository）
・CakePHP、Zend Framework など
（６）どのような種類のデータベースとも接続可能。

43

PHPはAjaxとの組み合わせで最もよく使用される言語
Ajaxian.com ２００７ Survey Results
出典： Ajaxian.com (http://ajaxian.com/)

44

従来モデル（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> 45

従来モデルとAjaxモデルのサーバ側プログラム比較

・従来モデル ⇒HTMLタグを生成してSTDOUTに出力
・Ajaxモデル ⇒テキスト文字列でSTDOUTに出力
※非同期通信/同期通信でプログラムパターンは同じ。

[Ajaxモデルサーバ側プログラム処理手順]

１．GETまたはPOSTでパラメータ受信
従来のCGI形式
２．データベースまたはファイルアクセスプログラムと同じ
３．演算処理（ビジネスロジック）
従来はHTML
４．クライアントにテキスト（並び）送信タグ生成
46

PHPのAjaxサーバ側プログラム例
<?php
$class1_code = $_GET["class1_code"]; ※従来モデルと同じ
$server = "localhost"; １．POST・GETパラメータ受信
$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での文字列連結はドットで行う 47

サンプルプログラムでのシステム構成
⇒Webアプケーションでの標準的なシステム構成
LAMP（Linux + Apache + MySQL + PHP）
Webサーバ FedoraCore５データベース
Apache （サーバ）
MySQL
PHP5
PHP
スクリプトテキストファイル

FireFox Opera Safari
IE6/7 Version2 Version9 Version3

ブラウザ・クライアント 48

XHTML/CSS
1. XHTMLとCSSを利用したWeb標準での画面構成にする
standards-based presentation using XHTML and CSS

49

XHTML（Extensible HyperText Markup Language） - 画面構成定義
XHTML ： HTMLをXMLに適合するように定義し直したマークアップ言語

仕様策定] W3C

策定目的] インターネットをはじめとしたオンラインでのデータの送受信
にXMLが使用されることを想定し、HTML文書もXML処理系で統一的
に扱える環境を整える

XHTML1.0：2000年1月 W3C勧告 HTML 4.01をベース
=>HTML 4.01に対応したWebブラウザではほぼ問題なく表示可能
XHTML1.1：2001年5月 W3C勧告 XHTML 1.1で文書見栄えを指定するタグが
廃止、(見栄えの記述は全てCSSで行なうことになった)など、
文書構造の記述に特化した言語へと変化の傾向

※妥当な（valid）XHTML 1.1の要件は、文書型宣言が変わる（従って参照する
DTDが変わる）以外は、基本的にXHTML 1.0の場合と同じ。

50

(1) XHTMLは検証済XML文書の書式に従う
<?xml version="1.0" encoding="utf-8" ?> XML宣言
・整形式XML文書
-XML宣言：任意
<!DOCTYPE book [
-DTD：任意
<!ELEMENT book (computer*)>
-XMLデータ：必須
<!ELEMENT computer (title,page,price)>
<!ELEMENT title (#PCDATA)>
DTD記述
・検証済XML文書 <!ELEMENT page (#PCDATA)>
-XML宣言：任意 <!ELEMENT price (#PCDATA)>
-DTD：必須 ]>
-XMLデータ：必須
<book>
<computer>
<title>XHTMLガイド</title>
<page>240</page>
<price>2,300</price> XMLデータ
</computer>
<computer>
<title>JavaScriptガイド</title>
<page>260</page>
<price>2,500</price>
</computer>
</book>
51

(2) XHTML文書の適合要件
１. 提供されるDTD (Document Type Definition)に従い、
DOCTYPE(文書型)宣言を以下の形式で行う。

“http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

=>文書型宣言として、公開識別子で指定されたＤＴＤを使用、ただし、公開識別
子でＤＴＤが特定(所得)できなかった場合はＵＲＩで指定されたdtdを使用。

※ DTD: XML文書の要素、属性、エンティティ、記法を宣言(定義)したもの。

２．文書のルート要素が html であること。

３．ルート要素は、xmlns属性でXHTML名前空間を明示すること。

※名前空間: 文書内に複数ボキャブラリが存在する場合に、要素名、属性名
が重ならないようにその適用範囲(スコープ)を明示するための規格。
指定例] <html xmlns="http://www.w3.org/1999/xhtml">

52

XHTML文書の適合要件
4. 全てのタグ（要素タイプ名、属性名）は小文字で記述する

5. 属性の値は必ず引用符で囲む
× width=100 => 〇 width="100"

6. 終了タグを省略しない
× <ul><li>甲項目</ul> => 〇 <ul> <li>甲項目</li> </ul>

7. 空要素のタグは />で閉じる
× 部署：<input type="text" name=“section" id=“section">
〇部署：<input type="text" name=“section" id=“section" />

8. ファイル内の位置を示すにはid属性を併記する
× <a href="#foo">アンカーをクリックすると</a>
....
<a name="foo">ここにジャンプする</a>

〇 <a href="#foo">アンカーをクリックすると</a>
....
<a name=“foo” id=“foo”>ここにジャンプする</a>
53

XHTML文書の適合要件
9. &はあらゆるところで&と記述する
× <a href="/cgi-bin/myscript?name=kanzaki&score=100">
〇 <a href="/cgi-bin/myscript?name=kanzaki&score=100">

10.属性の省略書式は使わない
×<input type="radio" name="bar" checked>
〇<input type="radio" name="bar" checked="checked" />

11. head要素内のスクリプトやスタイルシートの注意
< はタグの開始と見なされ、コメントした内容は無視される
×<style type="text/css">  </style>
解決策：外部ファイルにスタイルシートやスクリプトを記述

12.言語コードの指定にxml:lang属性を用いる
<p lang=“jp” xml:lang=“jp”>今日は</p>
注：XHTML 1.1ではlang属性は廃止され、xml:lang属性のみを記述

54

CSS (Cascading Style Sheets) - スタイル定義
CSS：スタイルシートを記述する為の言語仕様の１つ
※スタイルシート:Webページのレイアウトや整形方法を指定する整形言語
=>文書の表現方法の指定に特化した構文の集合体

仕様策定] W３C、現在CSS1(第１版)とCSS2(第２版)が正式に勧告されている。

策定目的] 文字のサイズやフォント、背景色や行間の大きさなどの
見栄えに関する情報を文書本体から切り離し、ユーザが複数の
レイアウトから選択することができるようにする。

CSS1:W3C勧告 1996年12月17日、改定1999年１月11日
単純なスタイル構造(構造化文書に対してフォント，色と背景，スペーシング，テキストの装飾，ボーダー，
マージンやパディング，といったスタイルを与えることができる)を定義した最初のCSS仕様。

CSS2: W3C勧告 1998年05月12日
HTML用として制定されたCSS1をXMLでも利用できるように機能拡張,CSS1の全機能が含まれる。
メディアタイプ依存のスタイルシートに対応しており，グラフィカルなブラウザ，音声出力装置，
点字出力装置，プリンタ，小型情報機器など，多様な出力を想定したスタイル設定が可能

CSS3：CSS2の次世代仕様
モジュール化（機能や役割ごとに仕様書が細分化）されており，複雑化してきたスタイルシートの各
機能の関係を明確にし，部分的な実装を容易にし，更に新しい機能を導入し易くなるという，メリットが
期待される。
55

(1) CSSの基本書式
[タイプ１]
要素名 {プロパティ：値 [；プロパティ：値 [… …]]｝
要素名 {プロパティ：値 [；プロパティ：値 [… …]]｝

例] td {font-size:18px; font-weight:600; color:#aa0000}

[タイプ２]
要素名.クラス名 {プロパティ：値 [；プロパティ：値 [… …]]｝
要素名#ID名 {プロパティ：値 [；プロパティ：値 [… …]]｝

例] td#title {font-size:18px; font-weight:600; color:#aa0000}
td.title {font-size:18px; font-weight:600; color:#aa0000}

[タイプ３]
.クラス名 {プロパティ：値 [；プロパティ：値 [… …]]｝
#ID名 {プロパティ：値 [；プロパティ：値 [… …]]｝

例] #title {font-size:18px; font-weight:600; color:#aa0000}
.title {font-size:18px; font-weight:600; color:#aa0000}

56

(2) CSSの指定方法

１．XHTMLタグに直接スタイルを設定する。
例
<div style="background:lightblue; color:blue;">
背景の色を水色に、<br>
文字色は青にしています。
</div>

特定の箇所にのみスタイルを設定する場合に使用 => 非推奨

57

２. HTMLヘッダ内で宣言する
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>HTMLヘッダで宣言する</title>
<style type=“text/css”>
<!—
h1 {font-size: 24px; font-family: sans-serif; font-weight:700; color:#990000 }
h2 {font-size: 20px; font-family: sans-serif; font-weight:600; color:#aa0000 }
span.data1 {font-size: 16px; font-family: serif; font-weight:500; color:#000099 }
#data2 {font-size: 14px; font-family: serif; font-weight:400; color:#0000aa }
-->
</style>
</head>
<body>
:
<h1>レベル1のタイトル</h1>
<h2>レベル２のタイトル</h2>
<span class=“data1”>レベル1のデータ</span>
<span id=“data2”>レベル2のデータ</span>
:
</body>
</html>
58

３. 外部CSSファイルを読み込む

<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>外部CSSファイルを読み込む </title>
<link rel=“stylesheet” type=“text/css” href=“../lib/style.css”>
</head>
<body>
<h1>レベル1のタイトル</h1>
<h2>レベル２のタイトル</h2>
<span class=“data1”>レベル1のデータ</span>
<span id=“data2”>レベル2のデータ</span>
</body>
</html>

CSSファイル: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

４. JavaScript内で直接指定する
document.getElementById() でタグを取得し、styleプロパティで変更する。

//<![CDATA[
:
var node = document.getElementById(“div1”);
node.style.fontSize = “36px”;
node.style.backgroundColor = “#ffaaaa”;
:
//]]>
</script>
</head>
<body>
：
<div id=“div1”>スタイル指定</div>

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"; 60

CSSの書式-1：参考情報
プロパティ名機能対応
background 背景のプロパティの一括指定 IE4NN4
background-color 背景色を指定する IE4NN4
background-image 背景画像を指定する IE4NN4
background-attachment 背景画像のスクロール方法を指定する IE4NN6
background-position 背景画像の開始位置を指定する IE4NN6
background-repeat 背景画像のリピート方法を指定する IE4NN4
font フォントのプロパティの一括指定 IE4NN6
font-weight フォントの強調を指定する IE4NN4
font-variant フォントの小文字を大文字にする IE4NN6
font-style フォントの斜体(イタリック)表示を指定する IE4NN4
font-size フォントサイズを指定する IE4NN4
font-family フォントの種類を設定する IE4NN6
line-height 行間幅を指定する IE4NN4
text-transform テキストの大文字小文字を指定する IE4NN6
text-decoration テキストにアンダーライン、打消し線等を指定する IE4NN4
text-align 文字の左寄せ右寄せ、センタリングを指定する IE4NN4
text-indent テキストのインデント幅を指定する IE4NN4
letter-spacing 文字間の幅を指定する IE4NN6
Color テキストの色を指定する IE4NN4
float 文字の回り込みの設定 IE4NN6
clear 文字の回り込みを解除する IE4NN6
width ボックスの横幅を指定する IE4NN4
Height ボックスの縦幅を指定する IE4NN6

61

CSSの書式-2：
プロパティ名機能対応
border ボックスの枠線プロパティの一括指定 IE4NN4
border-style ボックスの枠線の形状を指定する IE4NN4
border-width ボックスの枠線の太さを指定する IE4NN4
border-color ボックスの枠線の色を指定する IE4NN4
margin ボックス外部の余白幅を指定する IE4NN4
padding ボックス内部の余白幅を指定する IE4NN4
overflow ボックスに入りきらない表示の表示方法を指定する IE4NN6
list-style リストのプロパティの一括指定 IE4NN4
list-style-image リストの見出しにグラフィックを指定する IE4NN6
list-style-type リストの見出し記号を指定 IE4NN4
list-style-position リスト項目の二行目以降のインデントを指定する IE4NN6
cursor カーソルの形状を指定する IE4NN6
position topとleftの指定方法を決める IE4NN6
left 左端からの位置を指定する IE4NN4
top 上からの位置を指定する IE4NN4
vertical-align 縦方向の位置を指定する IE4NN6
clip 表示をどこで切り取るかを指定する。 IE4NN6
z-index z-indexを指定する IE4NN6
visibility 可視不可視を指定する IE4NN6
display どの要素としての表示かを指定する IE5NN4
page-break-before 印刷のとき、その前で改ページするようにする IE4NN6
page-break-after 印刷のとき、その後で改ページするようにする IE4NN6

62

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

63

(1) Ajax動作環境の統合=JavaScript
JavaScript：ECMAScript(エクマスクリプト)準拠の処理系で、Webブラウザ
などでの利用に適したスクリプト言語(簡易プログラミング言語)。

仕様策定] ECMA(European Computer Manufacturer Association)
ヨーロッパ電子計算機工業会

策定目的] 静的な表現しかできなかったWebページに、動きや対話性を付加
することを目的に開発され、主要なWebブラウザのほとんどに搭載されている。

・元々Sun Microsystems社とNetscape Communications社が開発した、
JavaScriptをベースに後付けで仕様策定されており、各社の実装に微妙な違い
がある。
・現在はECMAScript準拠の処理系をJavaScriptと呼び、独自の拡張を施した
JavaScriptには独自の名称を付けている。
-Microsoft： JScript
-Macromedia：ActionScript

64

JavaScript – head、bodyタグ内に直接記述

<html>
<head>
<title>….</title>
</head>
<body>
：
：
alert(“Hello World”); //処理内容
：
</script>
：
</body>
</html>

65

JavaScriptイベント処理 - イベントハンドラを使用

<html>
<head>
function func1(arg1,..){
：
alert(“Hello world”); //処理コード
：
}
：
</script>
</head>
<body>
：
<input type="text" name="ev1" onclick=”func1(arg1,..);" />
：
</body>
</html>

66

JavaScriptイベント処理 - イベントリスナを使用
<html>
<head>
<script type="text/javascript" src=“../lib/funcs.js"></script>
<script type="text/javascript" src=“../lib/prototype.js"></script>
//<![CDATA[
function xhrFunc() {
alert(“Hello world”); //処理内容
}
function initOnLoad() {
var observer = document.getElementById(“ev1”);
setListener(observer, "click", xhrFunc);
}
//]]>
</script>
</head>
<body>
：
<button type="button" name=“ev1” id="ev1">クラス1表示</button>
：
</body>
</html> 67

(3) イベントハンドラの種類
ハンドラ名内容
onClick マウスがクリックされた際に発生
onSelect 入力フィールドの選択、あるいは入力フィールドにある
文字列をドラッグしたときに発生
onChange 選択メニューでの選択項目やテキスト入力欄の文字列
が変更されたときに発生
onMouseover マウスカーソルが、ある要素の上にきたときに発生
onKeyup 押下されたキーが開放されたときに発生
onFocus リンクや入力フィールドがフォーカス (選択) されたとき
に発生
onBlur 入力フィールドでフォーカスが他に移動したときに発生
onResize ウィンドウサイズが変更されたときに発生
onSubmit 送信（サブミット）ボタンが押されときに発生
onReset 取消（リセット）ボタンが押されたときに発生
onAbort 処理を中断したときに発生
onLoad ページが読み込まれたときに発生
onUnload リンククリックなどによって、今いるページから移動した
ときに発生
68

2 その他のイベント

[ウィンドウイベント]
onActivate 要素がアクティブになったときに発生
onDeactivate 要素がアクティブでなくなったときに発生
onCloseQuery ウィンドウを閉じるときの確認で発生
onDblClick キーボードやマウスなどが「ダブルクリック」されたときに
発生
onFileDrop ファイルがエクスプローラなどからウィンドウにドロップ
されたときに発生
onKeyDown キーが押下されたときに発生
onKeyPress キーが押されているときに発生
onMouseDown マウスボタンが押されたときに発生
onMouseEnter マウスが領域内に入ってきたときに発生
onMouseLeave マウスが領域内から出ていったときに発生
onMouseMove マウスカーソルが移動したときに発生
onMouseUp マウスボタンが離れたときに発生
onMouseWheel マウスホイールが回転したときに発生
onPopupHide ポップアップウィンドウを閉じたときに発生

[タイマイベント]
setTimeout 一定時間後に指定した処理を行う
clearTimeout setTimeoutを解除する
setInterval 一定時間ごとに繰返し指定した処理を行う
clearInterval setIntervalを解除する 69

[6]非同期通信(XHR)
XMLHTTPRequestを使用し非同期でサーバとのメッセージ交換を行う
asynchronous data retrieval using XMLHttpRequest

70

XMLHttpRequestによる送受信フロー(非同期通信)
•
(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データで受信)

DOM APIでの動的表示
71

XMLHttpRequest による送受信フロー(同期通信)
•
↓
リクエスト (2) open メソッド
送信 (GET/POST、リクエストURL、同期指定)
↓
↓
(データ送信)
↓
↓
データ (5) responseTextまたはresponseXML プロパティ
受信


72

XMLHttpRequest による送受信フロー(同期通信)
•
↓
リクエスト (2) open メソッド
送信 (GET/POST、リクエストURL、同期指定)
↓
↓
(データ送信)
↓
↓
データ (5) responseTextまたはresponseXML プロパティ
受信


73

GET/非同期方式
//<![CDATA[
function xhrFunc(){
}
}
}
xhrObj.send(null);
}
//]]>
</script>

74

GET/非同期-関数名指定での受信処理
//<![CDATA[
function xhrFunc(){
xhrObj.open("get", "sample1.php?emp_no=" + emp_no);
xhrObj.send(null);
xhrObj.onreadystatechange = xhrResp;
}
function xhrResp(){
}
}
}
//]]>
</script>
75

POST/非同期方式
//<![CDATA[
function xhrFunc(){
xhrObj.open("post", "postUniq.php");
xhrObj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
}
}
}
xhrObj.send("emp_no="+emp_no);
}
//]]>
</script> 76

GET/同期方式
//<![CDATA[
function xhrFunc(){
xhrObj.open("get", "getUniq.php?emp_no="+emp_no, false);
xhrObj.send(null);
}
//]]>
</script>

77

POST/同期方式
//<![CDATA[
function xhrFunc(){
xhrObj.open("post", "postUniq.php", false);
}
//]]>
</script>

78

Ajax演習-１
従業員番号から氏名表示
・GET/POSTと非同期/同期の合計４種類の非同期通信
組み合せを自分のディレクトリから動作確認して下さい。
・関数名指定でのGET/非同期を動作確認して下さい。

※この演習は演習環境の動作確認チェックにもなってい
ます。ftpクライアント設定、エディタでの文字コード指定
（UTF-8）も確認して下さい。
※PHPの場合、クライアントPOST送信の場合はサーバ側
PHPもPOST受信に変更が必要

79

Ajax演習-１動作確認ファイル類

・ディレクトリ sample

・GET/非同期 getAsyn.htm getUniq.php
・別関数 getAsyn2.htm 同上
・GET/同期 getSyn.htm 同上
・POST/非同期 postAsyn.htm postUniq.php
・POST/同期 postSyn.htm 同上

・データファイル employee.txt

80

XMLHttpRequestオブジェクト
responseTextプロパティ
書式] readonly String responseText

機能] リクエストに対する応答をテキスト形式で返す。
リクエストが不成功の場合、または未完了の場合はNULLが返される。

例] xhrObj.onreadystatechange = function() {
if (xhrObj.readyState == 4) }
if (xhrObj.status == 200) {
var resp = xhrObj.responseText;
document.getElementById("status").innerHTML = resp;
}
}
}

単一テキストの場合

81

データベース検索結果の表示
（単一レコード、複数アイテム）
var items = xhrObj.responseText.split(“<i>");
for(var i = 0; i < (items.length – 1); i++ ){
：
// items[i] のデータ項目処理 :
：
}

配列変数 = XHRオブジェクト.responseText.split(区切文字)

※ 変数itemsは配列になる。
※ 区切文字はCSV(,)以外にも任意の文字を指定可能
例] split(“<r>”) ->レコード区切り
split(“<i>”) ->アイテム区切り
82

データベース検索結果の表示
（複数レコード、複数アイテム）
var recs = xhrObj.responseText.split("<r>");
for(i = 0; i < recs.length; i++ ){
var items = recs[i].split("<i>");
for(ｊ = 0; ｊ < items.length; ｊ++ ){
：
//xhtmlタグ作成
：
}
}
document.getElementById("area1”).innerHTML = out;
//outは作成されたxhtmlタグ構成

83

従来モデルとAjaxモデルでのMVC機能配置
従来モデルWebシステム model
Java-Beans
controller (class) DB
HTML-FORM Java-Servlet
(jsp) (class) view
Data-View
(jsp)

AjaxモデルWebシステム
view controller model
HTML Ajax Java-Servlet Java-Beans
DB
(html) (js) (class) (class)

84

GET/非同期（Java Servlet+Beans）
//<![CDATA[
function xhrFunc(){
xhrObj.open("get", "../sem1svlt?mode=rev&emp_no="+emp_no);
}
}
}
xhrObj.send(null);
}
//]]>
</script>

85

package seminar1;
import java.io.*;
sem1Svlt.java
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();
}
86

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) {} sem1Bean.java
return empName;
}
} 87

web.xml(デプロイメント・デスクリプタ)
<?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>

88

XHR(XMLHttpRequest）のメソッド/プロパティ
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 以降
89

openメソッド
書式] void open ( String メソッド , String サーバアドレス
[,boolean 同期/非同期 [, String ユーザ名 [,String パスワード]]] )
機能] 送信先アドレス、送信方式等を指定し、リクエストを初期化する。
引数]
通信メソッド : HTTPメソッド指定 - “POST” または “GET“
URL が HTTP URLでない場合は無視される。
サーバアドレス:リクエスト送信先のURLを指定.
同期/非同期：(オプション) 非同期：true, 同期：false (省略時は非同期)
ユーザ名：(オプション) ユーザ名を指定
パスワード：(オプション) パスワードを指定

※XMLHttpRequestがリクエストを送信できるのは同一ドメイン内に制限される。
※URLはopen実行スクリプトファイルのダウンロード元から相対アドレスで指定可。
※asyncで非同期指定の場合：sendメソッドは即座に処理を返し、その後は
onreadystatechangeイベントの中で読み込み状況を確認する。
同期指定の場合リソースを所得し終えるまで処理を返さない
(クライアント側はロックされる)。

例] xhrObj.open( “get” , “./foo/bar1.php” , true );
xhrObj.open( “post” , “./foo/bar2.php” , false );
90

(2) setRequestHeaderメソッド

書式] void setRequestHeader ( String ヘッダ , String 値 )
機能] HTTPリクエストに対する、HTTPリクエストヘッダ.
引数]
ヘッダ：送信するヘッダの名前
値：ヘッダのボディ

例]
//openでPOST指定の場合、sendでの送信実行前に指定。
xhrObj.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);

//キャッシュ回避で、sendでの送信実行前に指定。

91

(3) sendメソッド
書式] void send ( variant ボディ )
機能]リクエストを送信する。
リクエストが非同期の場合はリクエスト送信後直ちに、処理が戻る。
リクエストが同期の場合は、応答が帰ったあとに、処理が戻る。
引数]
body：DOMドキュメントのインスタンス、文字列、inputストリーム

※メソッドがPOSTでパラメータがDOMドキュメントで無い場合bodyはシリアライズ
される。
※inputストリームの場合、ContentType: および ContentLength: ヘッダ(header)
情報および、ストリームの最後に’CR/LF’の添付が必要。.

例] var sendVal = “data1=“ + aaaa + ”&data2=“ + bbbb;
xhrObj.send(sendVal);

92

（４）onreadyStatechangeプロパティ - 非同期通信時のみ使用

書式] ハンドラ onreadystatechange
機能] readyState変更時にコールバック関数を自動起動する

例１] 匿名関数形式
：
xhrObj.onreadystatechange = function() {
受信処理
}

例２] 関数指定形式
：
xhrObj.onreadystatechange = func1;
}
function func1() {
受信処理
}
93

(5) readyStateプロパティ - 非同期通信時のみ使用
書式] readonly int readyState
機能]リクエストの処理状態を表す。
値]
値表記状態
0 UNINITIALIZED オブジェクトは生成されているが、まだ初期化されていない
(openメソッドが呼ばれていない)
1 LOADING オブジェクトが生成されたが、まだsendメソッドが呼ばれていない
2 LOADED Sendメソッドは呼ばれ、statusとヘッダが有効になった。
3 INTERACTIVE クライアントは応答テキストを受信中(データの一部を保持)
4 COMPLETED 総ての操作が完了、データは総て受信完了

例] if (xhrObj.readyState == 4 ){
[httpステータス確認とデータ受信後の処理]
}

※クライアント（ブラウザ）側の処理は、受信完了(値=4)後に行うのが通常。
データ受信中(値=3)に受信データにアクセスした場合、ブラウザにより、
応答が異なる（Internet ExplorerおよびOpreraではエラーを返す。）
94

XMLHttpRequestオブジェクト – その他のプロパティ
(6) statusプロパティ - 非同期通信時のみ使用

書式] readonly int status
機能] HTTPrequest要求に対するステータスを値で返す。
値]
値ステータステキスト状態
200 OK リクエスト成功
401 Unauthorized 許可なし
403 Forbidden アクセス拒否
404 Not Found 存在不明
500 Internal Server Error サーバ内部エラー

例] if (xhrObj.readyState == 4) {
if (xhrObj.status == 200) {
[データ受信後の処理]
}
}

95

XMLHttpRequestオブジェクト – その他のプロパティ
(7) statusTextプロパティ - 非同期通信時のみ使用

書式] readonly String statusText
機能] HTTPrequest要求に対するステータスをテキストで返す。
値]
値ステータステキスト状態
200 OK リクエスト成功
401 Unauthorized 許可なし
403 Forbidden アクセス拒否
404 Not Found 存在不明
500 Internal Server Error サーバ内部エラー

例] if (xhrObj.readyState == 4 && xhrObj.statusText == “OK”){
//readyState と status の確認は上の書式でも可
[データ受信後の処理]
}

96

要素ノードの参照
（8）getElementById メソッド
書式] object.getElementById(“id属性値”)

機能] 指定したID名を持つ要素ノードオブジェクトを返す。
引数] id属性値。
返値] オブジェクト。
適用] document
対応] [IE5～][Firefox1～][Safari1～][Opera8～][Netscape6～]

※非常に頻繁に使用されるメソッドで、多くのAjaxライブラリでショートカット
関数が用意されている。

例] document.getElementById(“out1”);
↓
$(“out1”); // Prototype.js, DWR
id(“out”); // funcs.js
97

DOMオブジェクト
（9） innerHTMLプロパティ
書式] object.innerHTML [ = innerHTML]
機能] 開始・終了タグに挟まれた部分のHTMLを設定したり、読み出す。
設定] テキストとHTMLタグの組み合わせで使用する。
ただし、<html>、<head>、<title>タグは除く。

例] document.getElementById(“result”).innerHTML = resp;

※このプロパティの設定で、指定した文字列でエレメントの既存の内容
を完全に置き換える。
※このプロパティはドキュメントがロード中に設定することはできない。

98

DOMオブジェクト
（10） innerTextプロパティ
書式] object.innerText[ = innerText]
機能] 開始・終了タグに挟まれた部分のテキストを設定したり、
読み出す。
設定]
テキストとHTMLタグの組み合わせで使用する。ただし、<html>、
<head>、<title>タグは除く。

例] document.getElementById(“result”).innerText = resp;

※このプロパティの設定で、指定した文字列でエレメントの既存の内容を完全
に置き換える。
※このプロパティはドキュメントがロード中に設定することはできない。
※innerTextの場合、HTMLのタグは解釈されずそのまま画面に表示される。

99

IE,FireFoxでのブラウザ表示有効性

document.getElementById("out").innerHTML = data1;
document.getElementById("out").innerText = data1;
document.getElementById("out").value = data1;

表示フィールド入力フィールド

innerHTML IE ○ FF ○ IE ○ FF ×

innerText IE ○ FF × IE ？ FF ？

value IE × FF × IE ○ FF ○

100

XMLHttpRequestオブジェクト – その他のメソッド
（11） abortメソッド
書式] object.abort ( )
機能] XMLHttpRequestオブジェクトのHTTPリクエストを中止する
返り値] なし
適用] XMLHttpRequest

例] xhrObj.abort();

101

通信タイムアウトの処理
一定時間が経過してもサーバーから応答がない場合の処理。

1. タイムアウトしたとき、エラーメッセージを表示する。
2. setInterval()でタイマーを設定し、一定時間経過後に指定
した関数を呼び出す。
例]
//5000ミリ秒経過するとtimeout()を実行する
timerId = setInterval('timeout()', 5000);

//XMLHttpRequestの通信を中断するときは abort() を実行する。
//タイムアウトの処理
function timeout() {
//タイマーを終了する
clearInterval(timerId);
//通信を切断する
xhrObj.abort();
}
102

//<![CDATA[
通信タイムアウトの処理サンプルコード
function reqEmpName(){
var emp_no = document.getElementById("emp_no").value.toUpperCase();
xhrObj.open("get", "../../getempnamedb?emp_no="+emp_no);
var timerId = setInterval("timeout()", 1);
xhrObj.onreadystatechange = respEmpName;
xhrObj.send(null);
}
function respEmpName(){
}
}
}
function timeout(){
xhrObj.abort();
alert("通信が切断されました。");
}
var observer = document.getElementById("emp_no");
setListener(observer, "blur", reqEmpName);
}
//]]> 103

Ajax演習－２
従業員全データを一覧表示して下さい。
Ajax]
・複数レコード、複数アイテム
の受信処理を利用

PHP]
・文字列連結はドット（.）を使用

・PHPプログラムはgetUniq.php
をもとにファイル名getAllEmp.phpで作成してください。

104

(４)イベント処理
DOMを使用してイベントの相互作用と動的な画面表示を行う
dynamic display and interaction using the Document Object Model

105

(1) DOM(Document Object Model)
定義：Webページの内容(文章、画像、音声など)およびそれらの配置、
スタイルをツリー構造のオブジェクトとして扱い、プログラム言語から
動的にアクセスしたり更新することを可能にするAPI。
データ構造のセットではなく、インターフェイスを規定するオブジェクトモデル。

仕様策定] W3C

※DOMに従ってWebページを記述するための言語がDynamic HTMLになる。
※Dynamic HTMLはNetscape Navigator 4.xとInternet Explorer 4.x/5.xに
搭載されており、DOMの直近の祖先になるが、両者のDOMは部分的に
仕様が異なるため、現在W3Cによって標準化が進められている。

DOM Level1 :Core, HTML

DOM Level2 :Core, Views, Style, CSS, Events, Traversal, Range, HTML

DOM Level3 :Core, View and Formatting, Abstract Schemas,
Load and Save,Events, XPath

106

XHTMLとDOM
XML
XML文書パーサ DOMツリー DOM API

XHTML文書 DOMツリー DOM API
<html> html DOMツリー内での
<head> イベント検知
<title>XMLガイド</title>
</head>
<body> head body
<ol> サーバとの
<li>項目１</li>
title ol 非同期通信
<li>項目２</li>
<li>項目３</li>
</ol>
</body> li li li
</html> DOMツリー内での
項目1 項目2 項目3
文書操作(動的表示)
ノード
107

document
ＤＯＭイベントモデル
html
body ・ターゲットイベント発生
・オブザーバイベントキャッチ

・バブリングフェーズ
キャプチャフェーズ table イベントの上位伝播
・キャプチャフェーズ
イベントの下位伝播
tbody
オブザｰバ
バブリングフェース
イベントキャッチ
tr

td ターゲット
イベント発生

参考] W3C Document Object Model Events 108

DOMイベントモデルイベントの伝播方向
-マイクロソフトモデル内側のタグから外側のタグに伝播
-ネットスケープモデル外側のタグから内側のタグに伝播

window
document ネットスケープモデルマイクロソフトモデル
table
thead

tr td
：イベント
tbody ：
：

tfoot

109

DOMイベントモデルの機能と特徴

(1) イベントの伝播とイベントリスナでのキャッチ

addEventListener関数 (ie6では attachEvent関数)

(2) イベントの発生場所はid属性値で識別

(3) イベントハンドラは従来のものから
先頭のonを省いたものと同じ

(4) XHTMLとJavaScriptコードの分離

110

setListener関数 -イベントリスナの設定 funcs.js
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;
}
}

attachEvent ：Internet Explorer
addEventListener ：IE以外のブラウザ
111

Ajaxでのデータ参照・登録・更新・削除
(1) 検索・参照画面の作成
-GET/非同期通信

(2) 登録画面の作成
-POST/同期通信

(3) 参照・更新・削除画面の作成
-登録系・参照系の組合せ

112

Ajaxでの参照画面例
従業員マスタ参照

113

データ参照
revEmpMas.htm(1/3)
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<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>
//<![CDATA[
function revEmpMas(){
xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);
xhrObj.send(null);
xhrObj.onreadystatechange = respEmpData;
}

114

<body>
データ参照
<center>
<h2>従業員マスタ管理</h2>
revEmpMas.htm(2/3)
<table width="380" border="1">
<tbody>
<tr><th colspan="2">従業員マスタ参照</th></tr>
<tr>
<th width="120">従業員番号</th>
<td><input type="text" id="emp_no"></td>
</tr>
<tr><th>従業員氏名</th><td id="emp_name"> </td></tr>
<tr><th>所属部署</th><td id="section"> </td></tr>
<tr><th>登録日</th><td id="mod_date"> </td></tr>
<tr>
<th><input type="button" id="rev" value=" 参照 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html> 116

参照画面サーバコード revEmpMas.php
<?php
$server = "localhost";
$dbname = "ajax_ec";
$user = "mysql";
$sv = mysql_connect($server, $user, $passwd) or die("Connection error1");
mysql_select_db($dbname) or die("Connection error2");
$emp_no = $_POST["emp_no"];
$emp_name = $_POST["emp_name"];
$section = $_POST["section"];
$mod_date = date("Y-n-d");
$sql = "insert into emp_mas
values('$emp_no', '$emp_name', '$section', '$mod_date')";
if($rows = mysql_query($sql, $sv)){
echo "登録成功: "."従業員番号=".$emp_no;
}else{
echo "登録不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>
117

PHPでのMySQLデータベースアクセス手順
参照画面サーバコード revEmpMas.php

（１）データベースサーバへの接続
最初にmysql_connect でデータベースサーバ（ホスト）に接続する。

接続ID = mysql_connect(ホスト名,ユーザ名,パスワード)
$user = "mysql";
$sv = mysql_connect($server, $user, $passwd)
or die("Connection error1");

戻り値$svには、データベースへの接続IDが代入される。
この後、この接続IDを参照してデータベースへのアクセスを行う。

118

（２）データベースの選択
次に、接続したデータベースサーバの中から利用するデータベースを
mysql_select_dbで選択する。

$db = mysql_select_db(データベース名、接続ID)

$db = mysql_select_db($dbname) or die("Connection error2");

選択に成功すれば、戻り値はTRUE、失敗すればFALSEとなる。

119

（３）SQL文の実行
選択したデータベースに対するSQL文の実行を、mysql_query（）で行う。

結果ID = mysql_query（SQL文,接続ID）;

$sql = "select * from emp_mas where emp_no='$emp_no'";
$rows = mysql_query($sql, $sv) or die("mysql query Error");

戻り値（$rows）には、SQL文の処理結果が格納される。
処理結果は「結果ID」または「結果セット」と呼ばれる。

120

（４）レコードの読みとり
結果セット（$rows）には現在のレコードを示すポインタがあり、先頭は結
果セットの第１レコードを示している。現在のレコードデータを連想配列名
をキー値として読み出すには、 mysql_fetch_arrayの第一引数に結果セッ
トを、第二引数に MYSQL_ASSOC を指定する。
※同様の処理関数としてmysql_fetch_assocも使用可能。

$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>";
}

※PHPでの文字列連結はドット演算子（.）で行う
121

（５）データベースサーバへの接続をクローズ
データベースに対する処理がすべて終了後、データベースサーバへの接
続を切断する。

mysql_close（接続ID）

mysql_close($sv);

122

Ajax データ登録の特徴
1) POSTメソッド使用

2) 画面遷移の無い登録
=>迅速な連続登録

3) 登録項目の動的絞込み値設定・表示
例１] リスト項目での絞込み
部リスト選択
->対応課リスト表示・選択
->対応従業員リスト表示
例２] 検索項目入力での値設定
郵便番号入力
-> 対応住所の住所入力フィールド自動設定

4) 登録結果(成功・不成功・ステータス)の動的表示
123

Ajaxでの登録画面作成
従業員マスタ登録

124

<?xml version="1.0" encoding="utf-8" standalone="no"?>
データ登録
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> addEmpMas.htm
<head> (1/2)
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>クラス1登録</title>
//<![CDATA[
function addEmpMas(){
var emp_name = document.getElementById("emp_name").value;
var section = document.getElementById("section").value;
var req="emp_no="+emp_no+"&emp_name="+emp_name+"&section="+section;
xhrObj.open("post", "addEmpMas.php", false);
xhrObj.send(req);
document.getElementById('status').innerHTML = xhrObj.responseText;
}
var observer = document.getElementById("add");
setListener(observer, "click", addEmpMas);
}
//]]>
</script>
125

データ登録
</head> addEmpMas.htm
<body> (2/2)
<center>
<h2>従業員マスタ管理</h2>
<tbody>
<tr><th colspan="2">従業員マスタ登録</th></tr>
<tr>
<td><input type="text" size="8" id="emp_no"></td>
</tr>
<tr><th>従業員氏名</th><td><input type="text" id="emp_name"></td></tr>
<tr><th>所属部署</th><td><input type="text" id="section"></td></tr>
<tr>
<th><input type="button" id="add" value=" 登録 " /></th>
<td id="status"> </td>
</tr>
</tbody>
</table>
</center>
</body>
</html>

126

データ登録サーバコード(PHP）
addEmpMas.php
<?php
$user = "mysql";
$sql = "insert into emp_mas values('$emp_no', '$emp_name', '$section', '$mod_date')";
echo "登録成功: "."従業員番号=".$emp_no;
}else{
echo "登録不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>

127

Ajaxデータ検索・参照の特徴
(１）検索表示のハイスピード表示

(２) GETメソッド使用
=>検索待ち時間のタイムアウト処理

(３) 検索画面上での検索結果動的表示
=>迅速な連続検索

(４) 検索条件の絞込み・動的設定表示
例１] 下位項目表示での絞込み
例２] リスト項目での絞込み

(５) 検索結果(成功・不成功・ステータス)の動的表示

128

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

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

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

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

(３) 検索結果(成功・不成功・ステータス)の動的表示

※更新のクライアントロジックは登録と同じ、
サーバ側で受信データで登録処理を行うか更新処理
を行うかで異なる。

129

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

130

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
データ更新
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> updEmpMas.htm
<title>クラス1登録</title> (1/3)
//<![CDATA[
function revEmpMas(){
xhrObj.open("get", "revEmpMas.php?emp_no="+emp_no);
xhrObj.send(null);
var resp = xhrObj.responseText.split("<i>");
if(resp[0]=="OK"){
document.getElementById("emp_name").value = resp[1];
document.getElementById("section").value = resp[2];
document.getElementById("mod_date").innerHTML = resp[3];
}else{
}
}
}
}
} 131

function updEmpMas(){ データ更新
var emp_no = document.getElementById("emp_no").value; updEmpMas.htm
var emp_name = document.getElementById("emp_name").value;
var section = document.getElementById("section").value;
(2/3)
var req="emp_no="+emp_no+"&emp_name="+emp_name+"&section="+section;
xhrObj.open("post", "updEmpMas.php", false);
xhrObj.send(req);
}
function delEmpMas(){
xhrObj.open("post", "delEmpMas.php", false);
}
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);
}
//]]>
</script> 132

</head>
<body>
<center> データ更新
<h2>従業員マスタ管理</h2> updEmpMas.htm
<tbody> (3/3)
<tr>
<th colspan="2" id="mod">
従業員マスタ参照/更新/削除
<input type="button" id="rev" value=" 参照 " />
<input type="button" id="upd" value=" 更新 " />
<input type="button" id="del" value=" 削除 " />
</th>
</tr>
<tr>
<td width="260"><input type="text" id="emp_no" size="8"></td>
</tr>
<tr><th>従業員氏名</th><td><input type="text" id="emp_name"></td></tr>
<tr><th>所属部署</th><td><input type="text" id="section"></td></tr>
<tr><th>登録日</th><td id="mod_date"> </td></tr>
<tr><th>ステータス</th><td id="status"> </td></tr>
</tbody>
</table>
</center>
</body>
</html>
133

<?php
データ更新
$user = "mysql"; updEmpMas.php
$sql = "update emp_mas
set
emp_name = '$emp_name',
section = '$section',
mod_date = '$mod_date'
where
emp_no = '$emp_no'";
echo "更新成功: "."従業員番号=".$emp_no;
}else{
echo "更新不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?> 134

データ更新
delEmpMas.php
<?php
$user = "mysql";
$sql = "delete from emp_mas where emp_no='$emp_no'";
echo "削除成功: "."従業員番号=".$emp_no;
}else{
echo "削除不成功: "."従業員番号=".$emp_no;
}
mysql_close($sv);
?>

135

prototype.js http://www.prototypejs.org
・Ajaxフレームワーク
・コード記述のシンプル化
・クロスブラウザ対応

136

Ajaxian.com ２００７ Survey Results

137
出典： Ajaxian.com (http://ajaxian.com/)

Google Trendsでの prototype.js dojo jQuery検索トラフィック比較
http://www.google.co.jp/trends?q=prototype.js%2C+dojo%2C+jQuery

138

Ajax basic

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (9)

Andere mochten auch

Andere mochten auch (12)

Ähnlich wie Ajax basic

Ähnlich wie Ajax basic (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (12)

Ajax basic