libro
www.tuyano.com
初心者のためのJavaScriptプログラミング入門

Ajaxによる非同期サーバー通信 (4/4)

作成:2010-04-03 11:41
更新:2010-05-11 19:13

■Ajax通信の実際

では、基本がわかったところで、実際にAjaxを利用するサンプルを作ってみましょう。Ajax通信は、サーバーとの通信ですから、このサンプルは実際にサーバーにアップロードして動かさないと使えません。ファイルをそのままブラウザで開いてもだめですよ。

まず、サンプルデータを用意しておきましょう。テキストファイルに、UTF-8のエンコードで適当にテキストを書いて、HTMLファイルと同じ場所にアップロードしてください。そしてサンプルのWebページにアクセスし、入力フィールドにファイル名を書いてボタンを押すと、サーバーからそのファイルの内容を取得し表示します。

今回のサンプルは、AjaxObjectというオブジェクトとしてAjax通信の機能を用意しました。doActionから、このAjaxObjectを作成すると、Ajax通信を開始します。AjaxObjectでは、今までのオブジェクト指向の知識を総動員して作ってますので、それぞれで働きを考えてみましょう。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<html>
	<head>
		<meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
		<script type="text/javascript">
		<!--
		var ajax = null;;

		function doAction(){
			var txt = document.getElementById("url");
			var callback = function(){
				var target = document.getElementById("message");
				target.innerHTML = ajax.getResponse();
			}
			ajax = new AjaxObject(txt.value,callback);
		}

		function AjaxObject(url,callback){
			var response = null;
			var callback = callback;
			
			ajaxStart(url);

			this.getResponse = function(){
				return response;
			}
			
			function ajaxStart(url){
				var req =  createRequest();
				if (req == null){
					alert("実行できません！");
					return;
				}
				req.open("GET",url);
				req.setRequestHeader("User-Agent","XMLHttpRequest");
				req.onreadystatechange = function(){
					if (this.readyState == 4 && this.status == 200){
						precallback(this);
					}
				}
				req.send();
			}
			
			function createRequest(){
				var httplist = [
					function(){ return new XMLHttpRequest(); },
					function(){ return new ActiveXObjct("Msxml2.XMLHTTP"); },
					function(){ return new ActiveXObject("Microsoft.XMLHTTP"); }
				];
				for(var i = 0;i < httplist.length;i++){
					try {
						var http = httplist[i]();
						if (http != null) return http;
					} catch(e){
						continue;
					}
				}
				return null;
			}
			
			function precallback(request){
				response = request.responseText;
				callback();
			}
		}
		//-->
		</script>
	</head>
	<body>
		<H1>TEST.</H1>
		<div id="message">URLを入力：</div>
		<input type="text" id="url">
		<input type="button" onclick="doAction();" value="Ajax">
	</body>
</html>
※関連コンテンツ

「初心者のためのJavaScriptプログラミング入門」に戻る