>> JavaScript入門トップに戻る

Ajaxによる通信

今回はAjaxの通信ついて説明します。
前回のコードを見てください。

function GetData(){
	
	var ajax=null;
	
	//XMLHttpRequestが使えるか
	if(XMLHttpRequest){
		
		ajax=new XMLHttpRequest();
		
	}else{
		
		ajax= new ActiveXObject('MSXML2.XMLHTTP.6.0');
		
		if(!ajax){
			
			ajax = ActiveXObject('MSXML2.XMLHTTP.3.0');
			
			if(!ajax){
				
				ajax = ActiveXObject('MSXML2.XMLHTTP');
				
				//ajax通信は行えないので処理終了
				if(!ajax){
					alert("ajaxは使えません");
					return;
				}
			}
		}
	}
	ajax.open('GET','/script/ajaxtest.txt',true);
	ajax.onreadystatechange = function Receive(){
		
			if(ajax.readyState==4 && ajax.status==200){
				
				alert(ajax.responseText);
				
				return;
				
				//200以外はエラー
			}else if(ajax.status!=200){
				
				alert("エラーが発生しました:"+ajax.status);
				return;
			}
		}
	//サーバ側で処理する場合は、以下のヘッダーの設定が必要。
	//.setRequestHeader('Content-Type',"application/x-www-form-urlencoded; charset=utf-8");
	ajax.send(null);
}



まず、openメソッドでどのurlとどういった通信を行うのかを設定します。
このメソッドの第一引数には、GETかPOSTを指定します。
GETを使った通信ではサーバとやり取りできるデータ量に制限があり、
URLの後ろにパラメータを付加する形でデータを送信する方法です。
POSTについては、やり取りするデータ量に宣言はなく、sendメソッドを使ってデータを送信します。
今回は、ただ単に、テキストファイルを読み込んで表示するだけですので、
GETメソッドを使います。
第二引数は、通信相手のURLを指定します。
ここにはcgiなどが動作しているcgiのURLを指定するのが普通です。
GETメソッドの場合は、ここでURLの後ろにパラメータを付加してデータを送信します。
ですが、今回はファイルを読みに行くだけですので、こちらから送るデータは特にありません。
なので、ファイル名だけ指定してます。
ajaxtest.txtなので、このwebページがある階層と同じ階層にあります。つまり相対パスも可能ということです。
第三引数は、非同期通信を行うか行わないかを真偽値で指定します。
同期通信とは、相手の応答が帰ってくるまで待ってから処理する通信方法ですが、
非同期通信は、相手の応答が帰ってこなくても別の処理に移ることが出来ます。
通信が帰ってきたときに好きな処理をさせることが出来ます。
今回はtrueを指定して非同期通信させています。

次に、onreadystatechangeメンバに関数を代入しています。
このメンバに関数を設定すると、サーバから何か応答があった場合に都度その関数を実行させることができます。
今回は、receive関数を代入しています。
つまりサーバから何か応答があった場合は、この関数が実行されます。
というのは、サーバも一度の通信でデータを全てやりとりできるわけではありません。
何回か通信を行うことで全てデータを受信することもあるわけです。
この関数の説明は後回しにします。

receive関数の下に、コメントアウトしてますが、setRequestHeader関数というのがあります。
これは、サーバにデータを送信するときに、送信するデータがどういう形式にものなのかを設定するためのものです。
第一引数にデータタイプ、第二引数に値を指定します。
通常はユーザにフォームデータを入力してもらって、それを送信すると思いますので、
第一引数は【Content-Type】、
第二引数は【application/x-www-form-urlencoded; charset=utf-8】
が一般的かと思います。
もちろん文字コードが違えば、charsetの部分を変えてください。
今回は、こちらからはデータは送信しないので、この関数は実行してません。

次にsend関数です。
送信するデータがある場合はこの関数にデータを文字列として渡して送信します。
つまりPOSTメソッドを使って送信するときに使われます。
今回は送信するものはないのでnullを指定しています。
送信するものがなくても、ただデータを取得したい場合は、このようにnullでも
このsend関数を実行する必要があります。

実際にGETメソッドやPOSTメソッドでパラメータを付加して送信する方法は
次の講座で説明します。

send関数を実行すると、サーバとの通信が行われて、何か反応があるたびに、
onreadystatechangeメンバに設定した関数が実行されます。
そのreceive関数を見てみましょう。

if(ajax.readyState==4 && ajax.status==200){
				
	alert(ajax.responseText);
	
	return;
	
	//200以外はエラー
}else if(ajax.status!=200){
	
	alert("エラーが発生しました:"+ajax.status);
	return;
}

まず、if文ですが、
Ajaxのオブジェクトのメンバで、通信状況の内容を見れる変数があります。
readyStateとstatusメンバです。大文字小文字に気をつけてください。
ここで、readyStateメンバが4で、statusメンバが200なら正常にデータを受信したことを表します。
受信できた場合は、alert関数で、responseTextメンバにアクセスして、
データを表示しています。
受け取ったデータはこのresponseTextメンバに入っています。
サーバと通信したらこのメンバにサーバからの受信データが入るので、
このデータを整形して画面に表示させたり色々なことをすることができます。

else if文で、statusが200以外の場合はエラーを出すようにしています。
403(forbidden)や404(not found)などのエラーがありますが、
200以外は全てエラーなので、そのエラーコードとともにメッセージを出すようにしています。

以上が、ajaxを使った簡単な通信です。
これで好きなファイルにアクセスして表示できるようにはなったと思います。
次回は、GETメソッドで、URLにパラメータを付加してopenする方法や、
sendメソッドにパラメータを指定して送信する方法をご紹介します。
>> 【パラメータを使ったajax通信】に進む
>> JavaScript入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)