◇hello worldの世界(web)：各種インストールから動作まで
WEBのページをダイナミックに表示する方法は沢山のものが 考え出されました。HTTPという貧弱なプロトコルの上に 良くこれだけ多彩なものを構築できたものだと感心します。 貧弱なプロトコルであったからこそ誰でも色んなことが トライできたとも言えるでしょう。
ダイナミックページのhello world説明インデックス
色々な機構に関して、そのインストール法から、
単純サンプルを実際に作成し動かす具体例までを
示します。
具体例はhello worldをほんの少しだけ発展たもので
ボタンを押すたびに「Hello World」「This is ...」
という２つのメッセージを交互に出します。
次の表の名前の欄がリンクになっている項目をクリック すると説明ページにジャンプします。
| 名前 | クライアント | サーバ | 補足 |
| 基本 | ApacheやIISなどのHTTPサーバとWEBブラウザによって なりたっている | ||
| CGI(Perl) | 動的（ページ） | HTML文字列を出力する動作を書く。 Apacheから呼び出すことができる | |
| CGI(PHP) | 動的（ページ） | HTML記述の中に動作を書く。 Apacheから呼び出すことができる | |
| CGI(C) | 動的（ページ） | HTML文字列を出力する動作を書く。 予めコンパイルする必要がある。 Apacheから呼び出すことができる | |
| PHP(サーバ組み込み) | 動的（ページ） | HTML記述の中に動作を書く。 Apacheから呼び出すことができる | |
| サーブレット | 動的（ページ） | HTML文字列を出力する動作を書く。 Tomcatが呼び出す。 | |
| JSP | 動的（ページ成 | HTML記述の中に動作を埋め込む。 サーブレットの変形版といえるもので Tomcatが呼び出す。 | |
| JavaScript | 動的 | クライアント側で動的生成を行う。 HTMLに記述を埋め込む他、別ファイル に置くこともできる | |
| Flash | 動的(部品) | HTMLとは別に作成され、<object> などで参照される。 部品として画面に組み込まれ クライアント側で動作する | |
| Flex | 動的(部品) | Flashであるが、アプリケーション 開発手法が異なる | |
| Silverlight | 動的(部品) | HTMLとは別に作成され、<object> などで参照される。(Flashもどき） | |
| Ajax/Perl | 動的 | 動的（データ） | サーバ側からはHTMLではなく データを送りそれをクライアント側で 画面に反映させる。クライアント側 はJavaScript |
| Ajax/PHP | 動的 | 動的（データ） | サーバ側からはHTMLではなく データを送りそれをクライアント側で 画面に反映させる。クライアント側 はJavaScript |
| Ajax/サーブレット | 動的 | 動的（データ） | サーバ側からはHTMLではなく データを送りそれをクライアント側で 画面に反映させる。クライアント側 はJavaScript |
| Ajax/JSP | 動的 | 動的（データ） | サーバ側からはHTMLではなく データを送りそれをクライアント側で 画面に反映させる。クライアント側 はJavaScript |
hello world改サンプルの説明
静的な画面ではなく画面（の一部）が切り替わるサンプルになっています。
見た目では画面の一部が変わるだけですが、多くの例では、実際には 画面全体を置き換えています。
|
|
|
|
クライアントからサーバへのデータの引渡しにはGETを用いています。
一部を除き、データは"URL?C=数値"という形で渡ります。
POSTに関しては別記事で説明します。
JavaScript,Flash,
Silverlight
などクライアント側だけで動くサンプルは
実際に動かすことのできる例を載せています。
サーバ側で動くものに関しては動いた結果の画面のキャプチャを載せています。
これは本記事のブログシステムが対応していないからです。
サンプルを置いたフォルダ構成例
実際に試験で作ったサーバ用フォルダ構成を示します。
C:\Program Files\
Apache Software Foundation\
Apache2.2\
conf\
httpd.conf 設定ファイル
extra\
httpd-userdir.conf UserDir設定ファイル(実際には使わなかった）
..
cgi-bin\ CGIを置く PerlもPHPもここに置きました
test.cgi
...
htdocs
test\ Apacheで動かすHTMLを置く
test.htm
...
Tomcat 6.0\
webapps\
test\
jsp\ jspを置く（webappsの下ならどこでもよい）
test.jsp
...
WEB-INF\
classes\
test.class
...
web-xml 設定ファイル（URI-classマッピングなど）
servlet_src\ サーブレットのソースを置く（どこでもよい）
test.java
...
Silverlightなどクライアントだけのものは特に構成されたフォルダに
置いてはいません。（このブログ記事のものはブログ記事の管理用フォルダ
に置きました）
HTTPプロトコルトレース
HTTPレベルでのクライアントとサーバのやり取りを載せます。
クライアントからサーバに対するアクセスを載せます。
GETによるアクセスであり、URLの?の後ろにパラメタが付加されています。
------------- クライアント=>サーバ ----------------- GET /cgi-bin/hello_perl_XML.cgi?C=7 HTTP/1.1 Accept: */* Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) Host: localhost:10080 Connection: Keep-Alive ----------------------------------------------------
CGIによる応答を示します。
データ部に１ページ分のHTML記述が乗っています。なお、データ部にある
215,7,0の数値はchunked応答での分断文字列のサイズです。０は終了を示します。
------------- サーバ=>クライアント ----------------- HTTP/1.1 200 OK Date: Wed, 23 Sep 2009 11:50:55 GMT Server: Apache/2.2.11 (Win32) Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/html; charset=ISO-8859-1 215 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <form method='GET' action='http://localhost/cgi-bin/hello_perl.cgi'><input type='hidden' name='C' value='7'><input type='submit' value='Click Me'></form><P>This is CGI/Perl-test-1. (6)</P> </body> 7 </html> 0 ----------------------------------------------------
Ajaxでの応答を示します。データ部にはXMLによるデータが あるだけでページデータはありません。
------------- サーバ=>クライアント ----------------- HTTP/1.1 200 OK Date: Wed, 23 Sep 2009 11:26:19 GMT Server: Apache/2.2.11 (Win32) Keep-Alive: timeout=5, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: text/xml; charset=utf-8 57 <?xml version="1.0" encoding="UTF-8" ?><root><message>Hello Morld. (7)</message></root> 0 ----------------------------------------------------
| 固定リンク