XML読み込みとDOM操作で Ajaxに近づこう

Presentation on theme: "XML読み込みとDOM操作で Ajaxに近づこう"— Presentation transcript:

1 XML読み込みとDOM操作で Ajaxに近づこう
情報システム工学科 ラシキアゼミ　３年 H１０７０７２　田中直樹

2 目次 (簡単な)前回のおさらい Ajaxについて AjaxオブジェクトでXMLデータの読み込み DOM操作による動的HTML編集方法
Ajaxのために学ぶDOM AjaxオブジェクトでXMLデータの読み込み DOM操作による動的HTML編集方法 要素を生成し、階段構造の要素を作成する 階段構造の要素から、データを取り出す、HTML部にデータを組み込む

3 今回の目標 DOM操作の関数を用いて、XML・HTML要素の取り出しを行えるようになる 階層構造の要素を作成できるようになる
動的Webページの実現(ページの自由な書き換え)が出来るようになる

4 前回内容の軽い復習 ＸＭＬ・・・まずはタグ構造によるファイルを作成 JavaScript・・・
基本的な概念(変数、データ型、基本処理構造)、 DOM操作のために、オブジェクトに属性を付与 オブジェクトの属性を辿って、オブジェクトのデータを取得(DOM操作入門)

5 登場した操作 テキストボックスからデータを取得 var dom = document.myForm.text1.value ;
セレクトボックスからデータを取得 var dom = document.myForm.sel1.selectedIndex ; var str1 = document.myForm.sel1. options[dom].value;

6 今回は・・・ JavaScriptの技術の１つである、Ajax技術に関する技術を紹介する あと、DOM操作の階層構造を 理解するために…
HTTP非同期通信オブジェクト DHTML(動的にHTML要素を変化させる) あと、DOM操作の階層構造を 理解するために… HTML要素を作成し、HTML部に組み込む

7 Ajax Asynchronous JavaScript + XML の略
非同期通信とダイナミックHTMLを用いて、通信結果に応じて、動的にＨＴＭLを書き換える事を可能とする ・・・こういった強みをもった仕組みの総称である

8 Ajaxの強み 非同期通信である (非同期通信とは・・・)
ネットワークなどでつながれているコンピュータ間で、送信者のデータ送信タイミングと受信者のデータ受信タイミングを合わせずに通信を行う通信方式。 具体的に同期通信と比較してみる(次ページへ)

9 Ajaxの強み 同期通信 非同期通信 データ通信のリクエストを出してからレスポンスが来るまで他の処理を行わずにレスポンスを待ち続ける
レスポンスを待っている間に他の処理を行える。他の処理を行っている際に、レスポンスを受信すると受信処理を実行する。 リッチクライアント用語辞典「非同期通信」

10 クライアントは処理が出来ない(キー入力操作など)
Ａｊａｘの特徴：同期通信と非同期通信 同期通信の場合 サーバで処理が行われている間 サーバ クライアント クライアントは処理が出来ない(キー入力操作など) サーバへリクエストを送信

11 クライアントは処理が可能(キー入力操作など)
Ａｊａｘの特徴：同期通信と非同期通信 非同期通信の場合 サーバで処理が行われている間 サーバ クライアント クライアントは処理が可能(キー入力操作など) サーバへリクエストを送信

12 Ajaxの強み 非同期通信が何をもたらす？ サーバへリクエストを送る間も操作が可能 ↓ サーバとの通信とユーザの操作を切り離せる
サーバとのやり取りが終わるのをユーザが待つ必要がなくなり、サーバにアクセス＋○○の操作を行うという並行処理が可能になる

13 Ajaxの強み ダイナミックHTML(DHTML)での HTML書き換え (ダイナミックHTMLとは・・・)

14 Ajaxの強み 従来の静的HTMLとDHTMLの違い
そこで、JavaScriptやVBScriptなどでHTMLの要素を変化させる技術が加えられて、HTMLの拡張技術としてDHTMLが生まれた。 プラグインやアプレットで実現していたWebサイトに変化を与える事を、HTMLの要素自体を変化させるという手法で実現し、容量や処理が重い問題性を軽減した。

15 Ajaxの強み 従来の静的HTMLとDHTMLの違い (DHTML技術が生まれる前)
HTML自体は書かれたプログラムソースから変化しないため、プラグインやJavaアプレットなどを読み込む事によってWebサイトに動きを持たせた (※プラグイン･･･アプリケーションに追加機能を持たせるための小さなプログラム) 動画の再生やプログラムを動かしていたが、容量が大きい・処理が重いといった弊害を抱えた

16 Ajaxを生かしたWebサービス 「Google マップ」や「G-mail」

17 XMLファイルを読み込む ＸＭＬファイルを読み込む操作
ファイルを読み込む操作は非同期通信の第1歩！(とはいっても正確に非同期通信を味わいたい場合は、Prototype.jsというライブラリのサンプルを探してみてね) この操作は扱うブラウザ(エンジン)によって操作(呼び出すオブジェクト)が違うことが多い。 ライブラリを用いれば、それも解消できるが、いきなりライブラリを使っても仕組みが理解できないので、今回はFireFoxに対応した方法を用いる。

18 XMLファイルを読み込む XMLファイルからデータを読み込むには… http送信のリクエストを出し、ファイルを読み込む（sendメソッド）
通信方法を設定する(openメソッド) http送信のリクエストを出し、ファイルを読み込む（sendメソッド） ＸＭＬデータを取り出す (responseXMLプロパティ)

19 XMLファイルを読み込む XMLファイルからデータを読み込むには… ＸＭＬノード(要素)を取り出す
(getElementsByTagNameメソッド、格納した要素へのアクセス)

20 XMLファイル読み込み手順 読み込み用オブジェクトの生成 var xhttp = new XMLHttpRequest()
・・・Mozilla 系ブラウザで用いるオブジェクト。このオブジェクトの機能を使って、XMLファイルを読み込む。

21 XMLファイル読み込み手順 通信方法の設定 xhttp.open(“GET”,“1st_kadai1.xml”, false);
openメソッド 引数は、http通信でどの命令を行うか(POST or GET)、通信を行うファイル名、同期通信か非同期通信かの指定

22 XMLファイル読み込み手順 http送信のリクエストを出し、ファイルを読み込む xhttp.send(null) ; sendメソッド
サーバに HTTP リクエストを送信する。送信先の URL、送信方式（GET や POST など）は、open メソッドで指定したものになる。 データを送信しない時でも必要で、その場合、引数がnullになる。(今回はこれ)

23 XMLファイル読み込み手順 ＸＭＬデータを取り出す var xmldoc = xhttp.responseXML ;
通信が成功すれば、 通信を行ったオブジェクトのresponseXMLプロパティから、取得したXMLデータを受け取ることができる。

24 XMLファイル読み込み手順 ＸＭＬノード(要素)を取り出す var node =
xmldoc.getElementsByTagName(“タグ名") ; XMLファイルから取得したデータの変数xmldocに、getElementsByTagNameメソッドでアクセスし、取得したいデータが格納されたタグを指定して、データを取得する。

25 DOM操作 要素の取り出し方 var dom = objects.getElementsByTagName(node);
機能：対象のオブジェクト群の中から、引数で指定したタグ名で定義されたデータをすべて取得する。戻り値を格納した変数は自動的に配列になる。 基本的に、XMLのデータを格納する際に用いられる。つまり、親要素objectsはXMLのタグを格納した変数となる。

26 XMLファイル読み込み手順 ＸＭＬノード(要素)を取り出す
var memberNum = nodes[i].childNodes[0].nodeValue nodes[i]・・・getElementsByTagNameで取り出したデータ(配列) nodes[i]以下は、構造上このようにアクセスする。nodeValueは格納されたデータを指す。

27 DOM Document Object Model 文書オブジェクトモデルともいう。
Webページの内容(文章、画像、音声など)及びそれらの配置、スタイルをオブジェクトとして扱い、それらをスクリプト言語を使って制御するための取り決め。 また、その制御をおこなうためのAPI(Application programming Interface)。 タグ構造であるXMLにもこの概念は適用可能

28 DOM ボタンにアクセス テキストフォームにアクセス
参照：

29 DOMを用いる目的 HTMLやXMLは本格的な内容を作成すると、階層構造が複雑になる。JavaScriptのDOM操作はその構造に沿ってオブジェクトを扱う手法。 つまりそれを扱うには・・・ HTMLの要素自体が階層構造で生成される HTML要素は生成された後、階層構造のオブジェクトの中に入れ子で組み込まれる これらの事を意識しておくといい。そのために、その2つを実現するための手法について紹介する

30 ＤＯＭ操作 DOM操作には次のものがある 階層構造の要素を作成し、その要素にアクセスする
もともとあるHTML要素を階段状の構造と捉え、その要素にアクセスする

31 ＤＯＭ操作 関数(要素作成) 階層構造の要素を作成し、その要素にアクセスを行う
ＤＯＭ操作　関数(要素作成) 階層構造の要素を作成し、その要素にアクセスを行う ･･･実現するためには、階段状の要素を生成する関数を知る必要がある

32 ＤＯＭ操作 関数(要素作成) document.createElement(tagName) ; 引数：作成するタグ名
ＤＯＭ操作　関数(要素作成) document.createElement(tagName) ; 引数：作成するタグ名 (タグ名なので、tdタグなど、タグ名で作成 した 要素の役割が決まる) Ex : trタグ , tdタグ , imgタグ , ・・・ etc 機能：要素を新しく作成する。作成する要素の 種類は、引数のタグ名で設定する

33 ＤＯＭ操作 関数(要素作成) document.createTextNode(tagName) ; 引数：作成するテキスト名
ＤＯＭ操作　関数(要素作成) document.createTextNode(tagName) ; 引数：作成するテキスト名 (タグの中身のデータ) 機能：文字列要素を生成する。生成した要素を既存のタグ要素に追加すると、タグの中身の文字列になる <td>ラシキアゼミ<td>

34 ＤＯＭ操作 関数(要素作成) element.appendChild(element) ;
ＤＯＭ操作　関数(要素作成) element.appendChild(element) ; 引数：追加する要素(要素を格納した変数でもＯＫ) 親要素：子要素を追加する要素 機能：要素からアクセスして関数を呼び出す。対象の要素を 呼び出し元の要素の子要素として追加する。 JavaScriptで生成した要素をHTMLに書き込む手段として用いる事が出来る

35 ＤＯＭ操作 関数(要素作成) element.setAttribute("src", "xxx.gif"); 引数１：設定する属性名
ＤＯＭ操作　関数(要素作成) element.setAttribute("src", "xxx.gif"); 引数１：設定する属性名 引数２：設定する属性値 機能：対象の要素に属性と属性値を設定する。

36 DOM操作 要素の取り出し方 作成した要素に必要な属性を設定(setAttributeメソッド) 要素を作成し、変数に格納
要素を新しく作成する手順は以下のとおり。 この後の例では、<img>タグを作成して画像要素を作成します。 要素を作成し、変数に格納 (createElementメソッド) 作成した要素に必要な属性を設定(setAttributeメソッド)

37 DOM操作 要素の取り出し方 画像要素を作成(+変数に格納) img(画像)要素
var node = document.createElement(“img”) ; ↓　生成されたタグ img(画像)要素 <img>

38 DOM操作 要素の取り出し方 作成した要素に必要な属性を設定 img(画像）要素owata.jpg
node.setAttribute(“src”,”owata.jpg”) ; ↓　生成されたタグ <img src=“owata.jpg”> img(画像）要素owata.jpg

39 DOM操作 要素の取り出し方 var dom = objects.getElementById(node);
引数(node)：要素を取得したいオブジェクトのid属性値 機能：対象のオブジェクト群の中から、引数で指定したid を持つノード(要素)を取得する。親要素objects はファイルの種類によって変わる HTML：document XML：xmlのタグを格納した変数 これにより、階層構造の要素をたどらずに、オブ ジェクトの取得が可能になる

40 DOM操作 要素の取り出し方 var dom = objects.getElementsByTagName(node);
機能：対象のオブジェクト群の中から、引数で指定したタグ名で定義されたデータをすべて取得する。戻り値を格納した変数は自動的に配列になる。 HTMLは同じタグ名でも役割が違うタグが多いので、基本的には、XMLのデータを格納する際に用いられる。つまり、親要素objectsはXMLのタグを格納した変数となる。

41 innerHTML要素を用いての書き換え
node.innerHTML = data ; 引数 ： 挿入する要素(ノード) 親要素 node ： 内容を書き換える要素 機能：DOM操作で取得した要素nodeの中身を、引数の 要素に書き換える。簡単にいえば、１つのタグの 中身のデータをそのまま入れ替える関数である。

42 DOMを用いたHTMLの編集 <form id=“myForm” name=“myForm”>
例えば以下のように… <form id=“myForm” name=“myForm”> <input type=“text” id=“txt1” name=“txt1”> </input> </form> テキストフォームを生成

43 DOMを用いたHTMLの編集 データを取り出す var dom1 = document.myForm.txt1.value ;
var dom1 = document.getElementById(“txt1”).value ; ・・・関数を使用する。documentオブジェクト以下は、id名を指定すれば一括でデータを取得したい要素を指定できる

44 DOMを用いたHTMLの編集 ボタンにアクセス テキストフォームにアクセス このように、たどってアクセスしていたものを・・・ 44

45 DOMを用いたHTMLの編集 子オブジェクトに直接アクセスできるようになった。手間が省ける

46 動的書き換えに便利なタグ <div id=“node1” name=“node1”></div>
・・・divタグはタグ自体は効果を持たず、タグで囲んだ範囲のデータをひとまとまりの要素として扱うことが出来るタグ。例えば、データがない範囲をdivタグで囲み、属性をつけて・・・ <div id=“node1” name=“node1”></div> これをinnerHTML関数の親要素に指定するだけでJavaScriptで操作した要素の挿入先を作ることが出来る

47 ＤＯＭ操作 HTMLへの組み込み HTML部のタグを取得して作成した要素を組み込む操作は以下のとおり・・・ 要素を作成する
組み込み先のタグを作成する DOM操作で②のタグ(オブジェクト)を取得 ③で取得したタグに作成した要素を子要素として加える

48 ＤＯＭ操作 HTMLへの組み込み 要素を作成する img(画像）要素owata.jpg
方法は先程紹介した通り。ここでは、作成した画像要素を、変数nodeに格納したと仮定して、処理を行う。 変数 node (画像タグが格納されている) ↓　格納内容 <img src=“owata.jpg”> img(画像）要素owata.jpg

49 ＤＯＭ操作 HTMLへの組み込み 組み込み先のタグを作成する
idやname属性が設定できて、開始タグを終了タグが存在するタグならＯＫ。今回は例としてdivタグを生成する。 ↓　divタグを生成 <div id=“div_a” name=“div_a”></div>

50 ＤＯＭ操作 HTMLへの組み込み DOM操作で②で生成したのタグ (オブジェクト)を取得
var node2 = document.getElementById(“div_a”); 先程作成したdiv要素ををDOM操作で変数に格納

51 ＤＯＭ操作 HTMLへの組み込み ③で取得したタグに作成した要素を子要素として加える
// 画像タグをdivタグの子要素として追加node2.appendChild(node) ; このようにして、JavaScript内で生成した要素を、HTML内に組み込むことが出来る。

52 ＤＯＭ操作 HTMLへの組み込み ↓ 生成されたタグ <div id=“div_a” name=“div_a”>
↓　生成されたタグ <div id=“div_a” name=“div_a”> <img src=“owata.jpg”> </div> img(画像）要素owata.jpg

53 ＤＯＭ操作 HTMLへの組み込み(2) innerHTMLを用いて要素を格納する 組み込みたい文字列などが入った変数を用意
オブジェクト以外でも、文字列などを格納したい場合には、innerHTML関数を用いて、以下の手順でHTMLへの組み込みを行う事が出来る 組み込みたい文字列などが入った変数を用意 組み込み先のタグを作成する DOM操作で②のタグ(オブジェクト)を取得 ③で取得したタグに組み込みたい変数をinnerHTMLを用いて組み込む

54 ＤＯＭ操作 HTMLへの組み込み(2) 組み込みたい文字列などが入った変数を用意
今回は、body部で定義したtextbox1というid思ったテキストボックスオブジェクトのvalue属性を使用する var node_a = document.getElementById(“textbox1”).value ; ・・・テキストボックスの値を変数に格納

55 ＤＯＭ操作 HTMLへの組み込み(2) 組み込み先のタグを作成する
idやname属性が設定できて、開始タグを終了タグが存在するタグならＯＫ。今回は例としてdivタグを生成する。 ↓　divタグを生成 <div id=“div_a” name=“div_a”></div>

56 ＤＯＭ操作 HTMLへの組み込み(2) DOM操作で②で生成したのタグ (オブジェクト)を取得
var node_b = document.getElementById(“div_a”); 先程作成したdiv要素ををDOM操作で変数に格納

57 ＤＯＭ操作 HTMLへの組み込み(2) ③で取得したタグに組み込みたい変数をinnerHTMLを用いて組み込む
node_b.innerHTML = node_a node_b(divタグ)のタグ内データが、node_aの内容(テキストボックスの値)に書き換えられる。

58 課題１ 前回のレクチャーの課題１で作成したXMLファイルを読み込み、要素を出力する
※出力するのは格納したデータのみでＯＫ。 ただし、出力時に、どのゼミのデータか分かるように整理して出力すること。 (例えば、格納されたデータの間に文字列を追加するなど…)

59 課題１(補足) 例えば、XMLファイルから取得したデータを格納した変数tag1～tag3があるとする var outTag = “データ1：” + tag1 + “データ2：” + tag2 + “データ3：” + tag3 + “<br>” ; このように、取得したタグに文字列やHTMLのタグを結合した変数を作成することもできる

60 課題２ <tr>タグ、<td>タグ、を生成して、動的に表を追加するプログラムを作る サンプル

61 課題２(補足) あらかじめHTML部分に<table>タグのみを定義(idかname属性は設定するように)
作成手順 あらかじめHTML部分に<table>タグのみを定義(idかname属性は設定するように) <tr>タグを作成し、変数に格納 列数分の<td>タグを作成し、それぞれ変数に格納

62 課題２(補足) 列にデータを記載したい(文字列、オブジェク ト)場合、その要素を作成する
　列にデータを記載したい(文字列、オブジェク ト)場合、その要素を作成する 　④の要素を作成した場合、それを③で作った 要素(<td>タグ)の子要素として追加する 　⑤の要素も含め、すべてのtdタグを②で作っ た要素(<tr>タグ)の子要素として追加する

63 課題２(補足) <tr>タグをあらかじめ定義したtableタグの子要素に追加する

64 課題３ サンプル 動的なHTML要素の編集 文章キーワード変換プログラム
文章の色々なキーワードをユーザが入力したした単語に変化させるプログラム。 サンプル

65 課題３(補足) この課題では、あらかじめ変化させるキーワードが定義された文章と、テキストボックスが入ったファイルが作成してあるファイルを配布する。 テキストボックスに書いた内容を、文章中の変化させるキーワード部分に適応させるわけだから、あの手法が使えるよね…

66 課題４ これまでの技術(HTMLオブジェクトの取り出し＆編集、XML読み込み、DOM操作、)を用いて、動的なHTMLプログラムを作成しよう
評価ポイント HTMLオブジェクトの取り出し、DOM操作は最低限入れる XMLファイルを反映させたらさらに加点 機能性のあるプログラム、コメント