一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

非同期通信について

今回はJavaScriptを使った非同期通信について書いてみたいと思います。

ほんとはjQueryajaxメソッドを使ったほうが楽だとはおもうのですが今回は勉強のため、あえて純粋なJavaScriptで挑みました!!


一般にJavascriptで非同期通信を行うには、XMLHttpRequest(XHR)というAPIを使った方法が挙げられると思います。
今回もこのXHRを使って非同期通信を行なってみました。

流れはこんな感じ。


1,XHRインスタンスを生成する。
          ↓
2,XHRのonreadystatechangeプロパティ
(XHRの状態が変化した際に呼び出されるイベントハンドラ)に非同期通信が完了した時に行う処理を登録しておく。)
          ↓
3,XHRのopenメソッドで初期設定(GET or POST?, URLは?, 同期 or 非同期?)
          ↓
4,XHRのsendメソッドでサーバーと通信開始。
          ↓サーバーへ
5,XHRのreadyStateが0〜4に変換していく。
(4でサーバからレスポンスを受信し終えたことを表す。)
          ↓クライアントへ
6,レスポンスの内容(responseTextまたはresponseXML)をサーバーから取得。


というわけで今回は

「ボタンをクリック→非同期通信でレスポンス内容をHTML上に表示する」というサンプルを書いてみました。

ちなみにここではJavaScriptのオンラインエディタであるjsFiddleのエコー機能を利用して、jsonデータをサーバーから受信するようにしています。


では早速、書いたコードを。これ!!

//HTML
<form>
	<input type="button" value="データ取得" id="btn"/>
</form>
//JavaScript
var btn = document.getElementById("btn");
btn.addEventListener("click",function(e){
	var data = document.createElement("ul");
	do_ajax(function(json){
		var conts="";
		for(var i=0; i<json.personal_data.length; i++){
                    conts+="<li>"+json.personal_data[i].id+".(名前)"+json.personal_data[i].name+",(性格)"+json.personal_data[i].character+"</li>";
		}
		data.innerHTML=conts;
		
        });
	document.body.appendChild(data);
},false);
	
	
function do_ajax(callback){
        //XHRインスタンスを生成する
	var xhr = new XMLHttpRequest;

	//callbackの処理を登録する
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4 && xhr.status == 200){
			var json = JSON.parse(xhr.responseText);
			callback.call(this,json);
		}
	};
        //jsFiddleのエコー機能を使用してXHRレスポンスを実現
	xhr.open("POST","/echo/json/");
      var obj={personal_data:[
           {id: 1, name : "田中",character:"真面目"},
           {id: 2, name : "山田",character:"明るい"},
           {id: 3, name : "山本",character:"ど変態"}
           ]};
        xhr.send("json="+JSON.stringify(obj));
}

実際に動かしたのがこれです。
http://jsfiddle.net/d_animal141/4ZhWn/4/embedded/result/


HTMLはただボタン置いてるだけです。とくに言うことはありません。笑

では、JavaScriptのほうを見て行きたいと思います。

まず先ほど書いたXHRの処理の件はdo_ajaxにすべてぶちこんであります。
この関数の中では、

XHRインスタンスを生成。
         ↓
callback処理を登録。
xhrのreadyStateが4になると通信完了の印、またstatus200というのはサーバーの要求が正常に行われたことを表すコード。
コールバックの処理としては、「受け取ったJSONのデータをparseで元のオブジェクトに戻し、それをcallback関数の引数として渡す」という処理になります。
         ↓
jsFiddleでは「echoパスにデータをPOSTすることで、それがレスポンスとして返る」というエコー機能があるのでそれを使用。
3人の人のid,name,characterのデータを表すオブジェクトを作り、それをJSON化してサーバーに送信。
         ↓
サーバーとの通信が完了したら、先ほど登録しておいたコールバック処理が発動。


以上がdo_ajaxで行う処理です。

では次に実際に非同期通信で取得したデータを表示する部分を見ていきたいと思います。
ざっとこんな感じ。

getElementByIdでボタンのDOMを取得。それに対してaddEventListenerでクリックイベントに処理を登録。
その処理の内容は、、
         ↓
まずulタグを生成。次にdo_ajaxを呼び出して、3人分のid,name,characterのデータを順にliタグの中身として入れていく。
         ↓
出来上がったliを先ほど生成しておいたulの中に入れる。
そしてそのulをさらにbodyの中に追加する。 


ボタンを押したら、非同期通信で無事3人のデータが表示されるようになりました!!
ただちょっと処理が遅い気がする…改良の必要があるのかもしれません。。

でも非同期通信って今までjQueryのloadとかajaxとかでしか見たことなかったので、今回、純粋なJavaScriptでやってみてより理解が深まりました!

ただこれはまだ序の口、基本中の基本だと思うので、もっといろんなことができるようにもっと勉強しなければ!!

ちなみに今回はこの本にお世話になりました。

プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)

プロになるためのJavaScript入門 ~node.js、Backbone.js、HTML5、jQuery-Mobile (Software Design plus)

小さなことからコツコツと。