JavaScript・AjaxにおけるDOM

XML読み込みとDOM操作で
Ajaxに近づこう
情報システム工学科
ラシキアゼミ３年
H１０７０７２田中直樹
目次




(簡単な)前回のおさらい
Ajaxについて
http通信オブジェクトでXMLデータの読み込み
DOM操作による動的HTML実現方法



要素を生成し、階段構造の要素を作成する
階段構造の要素から、データを取り出す
オブジェクト(データ)をHTML部に組み込む
今回の目標




XMLファイルの読み込み・データの取り出し
が出来るようになる
階層構造のHTML要素を作成できるようになる
DOM操作の関数を用いて、XML・HTML要素の
取り出しを行えるようになる
動的Webページの実現(ページの自由な書き
換え)が出来るようになる
前回内容の軽い復習

ＸＭＬ・・・まずはタグ構造によるファイルを作成

JavaScript・・・
• 基本的な概念(変数、データ型、基本処理構造)、
• DOM操作のために、オブジェクトに属性を付与
• オブジェクトの属性を辿って、オブジェクトのデータ
を取得(DOM操作入門)
登場した操作
テキストボックスからデータを取得
var dom = document.myForm.text1.value ;

セレクトボックスからデータを取得
var dom =
document.myForm.sel1.selectedIndex ;

var str1 = document.myForm.sel1.
options[dom].value;
Ajax



Asynchronous JavaScript + XML の略
XMLHttpRequest（HTTP通信を行うための
JavaScript組み込みクラス）による非同期通
信が可能
非同期通信とダイナミックHTMLを用いて、通
信結果に応じて、動的にＨＴＭLを書き換える
事を可能とする
・・・こういった強みをもった仕組みの総称である
Ajaxの強み
1. 非同期通信である
(非同期通信とは・・・)
ネットワークなどでつながれているコンピュータ間で、
送信者のデータ送信タイミングと受信者のデータ受
信タイミングを合わせずに通信を行う通信方式。
具体的に同期通信と比較してみる(次ページへ)
Ajaxの強み

同期通信
データ通信のリクエストを出してからレスポンスが来るまで
他の処理を行わずにレスポンスを待ち続ける

非同期通信
レスポンスを待っている間に他の処理を行える。他の処理
を行っている際に、レスポンスを受信すると受信処理を実
行する。
参照：@IT リッチクライアント用語辞典「非同期通信」
http://www.atmarkit.co.jp/aig/07wcr/hidouki.html
Ａｊａｘの特徴：同期通信と非同期通信

同期通信の場合
サーバで処理が行われている間
サーバ
クライアント
クライアントは処理が出来ない(キー入力操作など)
サーバへリクエストを送信
Ａｊａｘの特徴：同期通信と非同期通信

非同期通信の場合
サーバ
サーバで処理が行われている間
クライアント
クライアントは処理が可能(キー入力操作など)
サーバへリクエストを送信
Ajaxの強み

非同期通信が何をもたらす？
サーバへリクエストを送る間も操作が可能
↓
サーバとの通信とユーザの操作を切り離せる
↓
サーバとのやり取りが終わるのをユーザが待つ必要
がなくなり、サーバにアクセス＋○○の操作を行うとい
う並行処理が可能になる
Ajaxの強み
2. ダイナミックHTML(DHTML)での
HTML書き換え
(ダイナミックHTMLとは・・・)
ブラウザに読み込んだ後（ウェブサイトのサーバに頼
ることなく）自分自身で変化させることが出来るHTML
技術。
新しいHTMLの定義ではなく、HTMLタグによって識別
されるページ上の各要素を、表示したり隠したりする
機能を追加するものである。
Ajaxの強み
従来の静的HTMLとDHTMLの違い
(DHTML技術が生まれる前)
HTML自体は書かれたプログラムソースから変化しない
ため、プラグインやJavaアプレットなどを読み込む事によ
ってWebサイトに動きを持たせた
(※プラグイン･･･アプリケーションに追加機能を持たせる
ための小さなプログラム)
動画の再生やプログラムを動かしていたが、容量が大
きい・処理が重いといった弊害を抱えた
Ajaxの強み
従来の静的HTMLとDHTMLの違い
そこで、JavaScriptやVBScriptなどでHTMLの要素を変
化させる技術が加えられて、HTMLの拡張技術として
DHTMLが生まれた。
プラグインやアプレットで実現していたWebサイトに変化
を与える事を、HTMLの要素自体を変化させるという手
法で実現し、容量や処理が重い問題性を軽減した。
Ajaxを生かしたWebサービス

「Google マップ」や「G-mail」
・・・いずれも、サーバから情報を受け取る操作
(マップの移動、メールフォルダの変更)を行って
も、Webページの一部が部分的に変更されるだ
けで、ページの再読み込みは行わない。
XMLファイルを読み込む

ＸＭＬファイルを読み込む操作
ファイルを読み込む操作は非同期通信の第1歩！(と
はいっても正確に非同期通信を味わいたい場合は、
Prototype.jsというライブラリのサンプルを探してみ
てね)
この操作は扱うブラウザ(エンジン)によって操作(呼
び出すオブジェクト)が違うことが多い。
ライブラリを用いれば、それも解消できるが、いきなり
ライブラリを使っても仕組みが理解できないので、今
回はFireFoxに対応したオブジェクトを用いる。
XMLファイルを読み込む
XMLファイルからデータを読み込むには…
① 読み込み用オブジェクトの生成
(xmlHttpRequestオブジェクト)
② 通信方法を設定する(openメソッド)
③ http送信のリクエストを出し、ファイルを読み込む
（sendメソッド）
④ ＸＭＬデータを取り出す
(responseXMLプロパティ)
XMLファイルを読み込む
XMLファイルからデータを読み込むには…
⑤ ＸＭＬノード(要素)を取り出す
(getElementsByTagNameメソッド、格納した要素へ
のアクセス)
XMLファイル読み込み手順
① 読み込み用オブジェクトの生成
var xhttp = new XMLHttpRequest()
XMLHttpRequest()
・・・Mozilla 系ブラウザで用いるオブジェクト。このオブ
ジェクトの機能を使って、XMLファイルを読み込む。
XMLファイル読み込み手順
② 通信方法の設定
xhttp.open(“GET”,“1st_kadai1.xml”, false);
openメソッド
引数は、http通信でどの命令を行うか(POST or GET)、
サーバから取得するファイル名、同期通信か非同期通
信かの指定
XMLファイル読み込み手順
③ http送信のリクエストを出し、ファイルを読み込む
xhttp.send(null) ;
sendメソッド
サーバに HTTP リクエストを送信する。送信先の URL、
送信方式（GET や POST など）は、open メソッドで指定
したものになる。
データを送信しない時でも必要で、その場合、引数が
nullになる。(今回はこれ)
XMLファイル読み込み手順
④ ＸＭＬデータを取り出す
var xmldoc = xhttp.responseXML ;
通信が成功すれば、通信を行ったオブジェクトの
responseXMLプロパティから、取得したXMLデータを
受け取ることができる。
XMLファイル読み込み手順
⑤ ＸＭＬノード(要素)を取り出す
var node =
xmldoc.getElementsByTagName(“タグ名") ;
XMLファイルから取得したデータの変数xmldocに、
getElementsByTagNameメソッドでアクセスし、取得し
たいデータが格納されたタグを指定して、データを取
得する。
DOM操作要素の取り出し方
var dom =
objects.getElementsByTagName(node);
引数(node)：要素を取得したいオブジェクトのタグ名
機能：対象のオブジェクト群の中から、引数で指定したタグ
名で定義されたデータをすべて取得する。戻り値を格納
した変数は自動的に配列になる。
基本的に、XMLのデータを格納する際に用いられる。つ
まり、親要素objectsはXMLのタグを格納した変数とな
る。
XMLファイル読み込み手順
⑤ ＸＭＬノード(要素)を取り出す
var memberNum =
nodes[i].childNodes[0].nodeValue
nodes[i]・・・getElementsByTagNameで取り出した
データ(配列)
nodes[i]以下は、構造上このようにアクセスする。
nodeValueは格納されたデータを指す。
Ajaxに関連したDOM操作
DOM

Document Object Model
文書オブジェクトモデルともいう。
Webページの内容(文章、画像、音声など)及びそれら
の配置、スタイルをオブジェクトとして扱い、それらをス
クリプト言語を使って制御するための取り決め。
また、その制御をおこなうためのAPI(Application
programming Interface)。
タグ構造であるXMLにもこの概念は適用可能
DOM
ボタンにアクセス
テキストフォーム
にアクセス
参照：http://www.scollabo.com/banban/java/jvp_01.html
DOMを用いる目的
HTMLやXMLは本格的な内容を作成すると、階層構造
が複雑になる。JavaScriptのDOM操作はその構造に
沿ってオブジェクトを扱う手法。
つまりそれを扱うには・・・
HTMLの要素自体が階層構造で生成される
 HTML要素は生成された後、階層構造のオブジェクト
の中に入れ子で組み込まれる

これらの事を意識しておくといい。そのために、その2つ
を実現するための手法について紹介する
ＤＯＭ操作

DOM操作には次のものがある

階層構造の要素を作成し、その要素にアクセスする

もともとあるHTML要素を階層(入れ子)構造と捉え、
その要素にアクセスする
ＤＯＭ操作関数(要素作成)

階層構造の要素を作成し、その要素にアクセ
スを行う
･･･実現するためには、階段状の要素を生成す
る関数を知る必要がある
ＤＯＭ操作関数(要素作成)

document.createElement(tagName) ;
引数：作成するタグ名
(タグ名なので、tdタグなど、タグ名で作成した
要素の役割が決まる)
Ex : trタグ , tdタグ , imgタグ , ・・・ etc
機能：要素を新しく作成する。作成する要素の
種類は、引数のタグ名で設定する
ＤＯＭ操作関数(要素作成)

element.setAttribute("src", "xxx.gif");
引数１：設定する属性名
引数２：設定する属性値
機能：対象の要素に属性と属性値を設定する。
ＤＯＭ操作関数(要素作成)

document.createTextNode(“ラシキアゼミ”) ;
引数：作成するテキスト文字列
機能：文字列要素を生成する。生成した要素を
既存のタグ要素(オブジェクト)に追加すると、
タグの中身の文字列になる
<div>ラシキアゼミ</div>
ＤＯＭ操作関数(要素作成)

element.appendChild(element) ;
引数：追加する要素(要素を格納した変数でもＯＫ)
親要素：子要素を追加する要素
機能：要素からアクセスして関数を呼び出す。対象の要素を
呼び出し元の要素の子要素として追加する。
JavaScriptで生成した要素をHTMLに書き込
む手段として用いる事が出来る
DOM操作(要素の作り方)
要素を新しく作成する手順は以下のとおり。
この後の例では、<img>タグを作成して画像要素を
作成します。
① 要素を作成し、変数に格納
(createElementメソッド)
② 作成した要素に必要な属性を設定
(setAttributeメソッド)
DOM操作(要素の作り方)
①画像要素を作成(+変数に格納)
var node = document.createElement(“img”) ;
↓ 生成されたタグ
img(画像)要素
<img>
DOM操作(要素の作り方)
②作成した要素に必要な属性を設定
node.setAttribute(“src”,”sora.jpg”) ;
↓ 生成されたタグ
<img src=“owata.jpg”>
img(画像）要素
sora.jpg
画像は、http://vol01.eyes-art.com/0003.htmlのフリー素
材を使用しています
DOM操作(要素の取り出し方)
var dom = document.getElementById(node);
引数(node)：要素を取得したいオブジェクトのid属性値
機能：対象のオブジェクト群の中から、引数で指定したid
を持つノード(要素)を取得する。親要素objects
はファイルの種類によって変わる
HTML：document
XML：xmlのタグを格納した変数
これにより、階層構造の要素をたどらずに、オブ
ジェクトの取得が可能になる
DOM操作(要素の取り出し方)
var dom = objects.getElementsByTagName(node);
引数(node)：要素を取得したいオブジェクトのタグ名
機能：対象のオブジェクト群の中から、引数で指定したタグ
名で定義されたデータをすべて取得する。戻り値を格納
した変数は自動的に配列になる。
HTMLは同じタグ名でも役割が違うタグが多いので、基
本的には、XMLのデータを格納する際に用いられる。つ
まり、親要素objectsはXMLのタグを格納した変数となる。
innerHTML要素
node.innerHTML = data ;
引数：挿入する要素(ノード)
親要素 node ：内容を書き換える要素
機能：DOM操作で取得した要素nodeの中身を、引数の
要素に書き換える。簡単にいえば、１つのタグの
中身のデータをそのまま入れ替える関数である。
DOMを用いたHTMLの編集

例えば以下のように…
<form id=“myForm” name=“myForm”>
<input type=“text” id=“txt1” name=“txt1”>
</input>
</form>
テキストフォームを生成
DOMを用いたHTMLの編集

データを取り出す
var dom1 = document.myForm.txt1.value ;
・・・DOM構造のHTML部を辿ってデータを取得
var dom1 = document.getElementById(“txt1”).value ;
・・・関数を使用する。documentオブジェクト以下は、id名
を指定すれば一括でデータを取得したい要素を指定
できる
DOMを用いたHTMLの編集
ボタンにアクセス
テキストフォーム
にアクセス
このように、たどってアクセスしていたものを・・・
DOMを用いたHTMLの編集
子オブジェクトに直接アクセスできるようになった。手間が省ける
動的書き換えに便利なタグ

<div>タグ
・・・divタグはタグ自体は効果を持たず、タグで囲んだ
範囲のデータをひとまとまりの要素として扱うことが
出来るタグ。例えば、データがない範囲をdivタグで
囲み、属性をつけて・・・
<div id=“node1” name=“node1”></div>
これをinnerHTML関数の親要素に指定するだけで
JavaScriptで操作した要素の挿入先を作ることが出
来る
動的書き換えに便利なタグ

<span>タグ
・・・spanタグはdivと同様に、タグで囲んだ範囲のデー
タをひとまとまりの要素として扱うタグ。divはブロック
要素であり前後に改行を挟むが、spanはインライン
要素なので、改行は挟まない。
<span id=“node1” name=“node1”></span>
spanは文章中の文字の一部など、細かい部分に変
化を与えたい場合に用いると便利
ＤＯＭ操作 HTMLへの組み込み
HTML部のタグを取得して作成した要素を組
み込む操作は以下のとおり・・・
①
②
③
④
要素を作成する
組み込み先のタグを作成する
DOM操作で②のタグ(オブジェクト)を取得
③で取得したタグに作成した要素を子要素
として加える
ＤＯＭ操作 HTMLへの組み込み
① 要素を作成する
方法は先程紹介した通り。ここでは、作成した画像要
素を、変数nodeに格納したと仮定して、処理を行う。
変数 node (画像タグが格納されている)
↓ 格納内容
<img src=“sora.jpg”>
img(画像）要素
sora.jpg
ＤＯＭ操作 HTMLへの組み込み
② 組み込み先のタグを作成する
idやname属性が設定できて、開始タグを終了タグ
が存在するタグならＯＫ。今回は例としてdivタグを
生成する。
↓ divタグを生成
<div id=“div_a” name=“div_a”></div>
ＤＯＭ操作 HTMLへの組み込み
③ DOM操作で②で生成したのタグ
(オブジェクト)を取得
var node2 = document.getElementById(“div_a”);
先程作成したdiv要素ををDOM操作で変数に格納
ＤＯＭ操作 HTMLへの組み込み
④③で取得したタグに作成した要素を子要素とし
て加える
// 画像タグをdivタグの子要素として追加
node2.appendChild(node) ;
このようにして、JavaScript内で生成した要素を、
HTML内に組み込むことが出来る。
ＤＯＭ操作 HTMLへの組み込み
↓ 生成されたタグ
img(画像）要素
sora.jpg
<div id=“div_a”
name=“div_a”>
<img src=“sora.jpg”>
</div>
ＤＯＭ操作 HTMLへの組み込み(2)

innerHTMLを用いて要素を格納する
オブジェクト以外でも、文字列などを格納したい場合
には、innerHTML関数を用いて、以下の手順で
HTMLへの組み込みを行う事が出来る
①
②
③
④
組み込みたい文字列などが入った変数を用意
組み込み先のタグを作成する
DOM操作で②のタグ(オブジェクト)を取得
③で取得したタグに組み込みたい変数を
innerHTMLを用いて組み込む
ＤＯＭ操作 HTMLへの組み込み(2)
① 組み込みたい文字列などが入った変数を用意
今回は、body部で定義したtextbox1というid思ったテ
キストボックスオブジェクトのvalue属性を使用する
var node_a =
document.getElementById(“textbox1”).value ;
・・・テキストボックスの値を変数に格納
ＤＯＭ操作 HTMLへの組み込み(2)
② 組み込み先のタグを作成する
idやname属性が設定できて、開始タグを終了タグ
が存在するタグならＯＫ。今回は例としてdivタグを
生成する。
↓ divタグを生成
<div id=“div_a” name=“div_a”></div>
ＤＯＭ操作 HTMLへの組み込み(2)
③ DOM操作で②で生成したのタグ
(オブジェクト)を取得
var node_b = document.getElementById(“div_a”);
先程作成したdiv要素ををDOM操作で変数に格納
ＤＯＭ操作 HTMLへの組み込み(2)
④ ③で取得したタグに組み込みたい変数を
innerHTMLを用いて組み込む
node_b.innerHTML = node_a
node_b(divタグ)のタグ内データが、node_aの内容(
テキストボックスの値)に書き換えられる(置換)。
課題１

前回のレクチャーの課題１で作成したXML
ファイルを読み込み、要素を出力する
※出力するのは格納したデータのみでＯＫ。
ただし、出力時に、どのゼミのデータか分
かるように整理して出力すること。
(例えば、格納されたデータの間に文字列を
追加するなど…)
課題１(補足)

例えば、XMLファイルから取得したデータを格納
した変数tag1～tag3があるとする
var outTag = “データ1：” + tag1 + “データ2：”
+ tag2 + “データ3：” + tag3 + “<br>”
;
このように、取得したタグに文字列やHTMLのタ
グを結合した変数を作成することもできる
課題２

<tr>タグ、<td>タグ、を生成して、動的に表を
追加するプログラムを作る
※今回は表を加える機能のみでＯＫ
課題２(補足)

作成手順
①あらかじめHTML部分に<table>タグのみを定
義(idかname属性は設定するように)
②<tr>タグを作成し、変数に格納
③列数分の<td>タグを作成し、それぞれ変数に
格納
課題２(補足)
④ 列にデータを記載したい(文字列、オブジェク
ト)場合、その要素を作成する
⑤ ④の要素を作成した場合、それを③で作った
要素(<td>タグ)の子要素として追加する
⑥ ⑤の要素も含め、すべてのtdタグを②で作っ
た要素(<tr>タグ)の子要素として追加する
課題２(補足)
⑦<tr>タグをあらかじめ定義したtableタグの子
要素に追加する
課題３

動的なHTML要素の編集
文章キーワード変換プログラム
文章の色々なキーワードをユーザが入力した
単語に変化させるプログラム。
課題３(補足)
この課題では、あらかじめ変化させるキーワード
が定義された文章と、テキストボックスが入った
ファイルが作成してあるファイルを配布する。そ
こに、属性や処理など足りないものを加える。
テキストボックスに書いた内容を、文章中の変化
させるキーワード部分に適応させるわけだから、
あの手法が使えるよね…
課題４

これまでの技術(HTMLオブジェクトの取り出し
＆編集、XML読み込み、DOM操作、)を用い
て、動的なHTMLプログラムを作成しよう
評価ポイント



DOM操作によるHTMLオブジェクトの取り出しは
最低限入れる
XMLファイルを反映させたらさらに加点
機能性のあるプログラム、コメント

Download Report