５）Ajax版チャットを作る。
Ajaxとは、HTML、Javascript（JQery）、PHP、MySQLを利用して、通信を行う方式である。HTMLのリンクは、リンクをクリックすることで
通信が開始され、それに対する返事（レスポンス）が返され、ホームページを更新する。それに対してAjaxは、ブラウザ上で発生する、
各種イベント（マウスイベント等）が発生した時点でサーバにそのデータを送信してサーバで処理してその返事（レスポンス）を現在、
表示しているホームページに埋め込むようにしてホームページを更新します。
当然、ブラウザ上のイベントは、Javascript（JQuery）で拾うことになります。
Ajaxの通信方式には、同期通信と非同期通信があります。
同期通信は、一定間隔でサーバと通信を行う方式ですが、ブラウザ上でイベントが発生しなくても通信を行う方式なので、無駄な通信が
発生します。
これに対して、非同期通信は、ブラウザ上にイベントが発生した時点で通信を開始するので無駄な通信はありませんがレスポンスが
少し悪くなります。しかし、通信のトラフィックをよくするために、ほとんどが非同期通信を使います。
ここでは、非同期通信について説明します。
①Ajaxの処理の流れ
ア．Ajaxオブジェクトの生成
ブラウザでAjax処理ができるようにAjaxオブジェクトを生成します。
xmlhttp = new XMLHttpRequest();
イ．Ajaxでサーバに対して処理要求をする。
Ajaxでデータが送信できるように設定します。
xmlhttp.open("GET", aryText[no], true);
オブジェクト名.open("method", "URL"[, asyncFlag[, "userName"[, "password"]]])
指定したメソッド method （ GET｜POST｜PUT｜PROPFIND ）で指定URL URL にリクエストする。
リクエストの成功・失敗に関わらず次の処理を実行する場合があれば、asynFlag を False に。
それ以外は Ture にする。省略すると True で実行。
userName、password は認証が必要な場合にのみ指定。
POST送信の場合は、以下のようなフォーマットになります。
xmlhttp.open("POST","../php/sendReturn.php");
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //決め打ち
xmlhttp.send("id=" + id); //URLエンコード形式で引数を書く。
ウ．レスポンス時に処理するイベントハンドラの定義
ここでは、Ajaxによるレスポンスがあったときに、実行するイベントハンドラを定義します。
xmlhttp.onload = showText;
オブジェクト名.onload = 関数名
function 関数名(引数) { 処理 }
エ．クライアントデータの送信
ブラウザでイベントが発生した時、そのイベントのデータを「GET」または、「POST」で送信します。
xmlhttp.send("");
オブジェクト名.send();
sendメソッドでサーバーにリクエストを送信します。 戻り値はありません。
第1引数データには、POSTの文字列、DOM、InputStreamを指定できます。
POST送信の場合に、PHPなどサーバーサイドスクリプトで受け取ったデータを処理させるのに使用します。
GET送信の場合はURLにパラメータを指定するので、第1引数データには、空文字列（""）
またはNULLを指定しておきましょう。
POST送信の場合は、引数に送信するデータをURLエンコード形式で書きます。
オ．レスポンスデータの処理
レスポンスデータをホームページに埋め込むなどの処理をする。
xmlhttp.readyState == 4
リクエストの処理状態 = オブジェクト名.readyState
readyStateプロパティは、openメソッドの第3引数にtrueを指定し、
非同期通信でサーバーにリクエストを送っている場合に、 サーバーのリクエストの処理状態を取得するのに使用します。
戻り値として、0～4の数値が返ります。
≪readyStateプロパティの戻り値≫
戻り値 説明
0 オブジェクト生成・未初期化状態（まだopenメソッドが呼ばれていません）
1 リクエスト準備中（まだsendメソッドは呼ばれていません）
2 リクエスト送信中（まだstatusとレスポンスヘッダがありません）
3 データ受信中（レスポンスヘッダ取得）
4 データ受信完了
xmlhttp.responseText
XMLデータ = オブジェクト名.responseXML
テキストデータ = オブジェクト名.responseText
sendメソッドでサーバーにリクエストしたファイルのダウンロードが完了すると、
リクエストの返り値（レスポンスデータ）を取得することができます。
レスポンスデータをXML形式で取得する場合はresponseXMLプロパティ、
テキスト形式で取得する場合はresponseTextプロパティを使用します。
②サーバにあるテキストファイルをAjaxで読み込んでみる。
HTMLのプログラムのファイル名：textLoad.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ajaxによるテキストデータの受信</title>
<!-- 外部CSSファイルの読み込み -->
<link rel="stylesheet" type="text/css" href="textLoad.css">
<!-- 外部JavaScriptファイルの読み込み -->
<script type="text/JavaScript" src="textLoad.js"></script>
</head>
<body>
<table border="0">
<td align="center">
<input type="button" value="てきすと１" id="text1" data-para="0">
<input type="button" value="てきすと２" id="text2" data-para="1">
<input type="button" value="てきすと３" id="text3" data-para="2">
</td>
</tr>
<tr>
<td>
<div id="honbun">リンクをクリックするとテキストが表示されます</div>
</td>
</tr>
</table>
</body>
</html>
CSSのプログラムのファイル名：textLoad.css
/* 本文をインラインで表示するための<div>タグに対するCSS */
div#honbun {
border : 1px solid #ff0000;
font-size : 10pt;
margin : 5px;
padding : 5px;
height : 400px;
width : 500px;
overflow : auto;
}
/*
overflowのパラメータ
visible
ボックスからはみ出して表示されます。これが初期値です。
尚、Internet Explorerでは、内容がはみ出すのではなく、ボックスの方が内容に合わせて拡張されます。
scroll
入りきらない内容はスクロールして見られるようになります。
hidden
はみ出た部分は表示されません。
auto
ブラウザに依存します（一般的にはスクロールして見られるようになります）。
*/
javascriptのプログラムのファイル名：textLoad.js
window.onload=function(){
// サーバー上のテキストファイルのURLを格納するための配列
//読み込むテキストファイルを配列に入れておく。
aryText = [
"textLoad1.txt",
"textLoad2.txt",
"textLoad3.txt"
];
//てきすと１のエレメントの「click」イベントの登録
document.getElementById("text1").onclick=function(e){
loadText(e.target.dataset.para);
};
//てきすと２のエレメントの「click」イベントの登録
document.getElementById("text2").onclick=function(e){
loadText(e.target.dataset.para);
};
//てきすと３のエレメントの「click」イベントの登録
document.getElementById("text3").onclick=function(e){
loadText(e.target.dataset.para);
};
// XMLHTTPオブジェクトを利用するための変数
xmlhttp = null;
}
// サーバー上のテキストファイルを読み込むための関数
function loadText(no) {
// XMLHTTPオブジェクトを作成する
xmlhttp = new XMLHttpRequest();
// サーバーに対しテキストファイルの読み込みを要求する
xmlhttp.open("GET", aryText[no], true);
// テキストファイルの読み込み中に発生するイベントハンドラに
//「読み込んだテキストファイルの内容を表示するための関数」を指定する
xmlhttp.onload = showText;
// サーバーに対しリクエストパラメータを送信する（今回はリクエストパラメータなし）
xmlhttp.send("");
}
// 読み込んだテキストファイルの内容を表示するための関数
function showText() {
// 読み込んだテキストファイルの内容を表示するための<div>タグを参照するための変数
var honbun = null;
// テキストファイルの読み込みが完了した場合
if (xmlhttp.readyState == 4) {
// 読み込んだテキストファイルの内容を表示するための<div>タグを参照する
honbun = document.getElementById("honbun");
// <div>タグのスクロール位置を左上にする
honbun.scrollLeft = 0;
honbun.scrollTop = 0;
// 読み込んだテキストファイルの内容を整形済みテキストとして表示する
honbun.innerHTML = "<pre>" + xmlhttp.responseText + "</pre>";
}
}
テキストファイルのファイル名（textLoad1.txt textload2.txt textload3.txt）←すべてUTF-8で保存する。
各テキストファイルが改行を含んで、４０～５０行になるようにしてください。
③XMLファイルを読み込んでみる
④POSTで送信したデータをPHPで処理して戻す。