【jQuery】ajaxメソッドを使った非同期通信

2014年9月8日 2019年11月26日

ユーザのお願いを解決しながら次のお願い解決を非同期通信を利用するとできるようになります。ユーザのお願いを1個解決しないと次のお願いを解決できないのが、同期通信になります。

非同期通信はjQueryのAjaxメソッドを利用することで制御できるので、非同期通信、同期通信の説明をしながら、実装例を書いて行きたいと思います。

INDEX

非同期通信と同期通信

ホストに対してリクエストを送り、ホストからレスポンスが返ってきて全てのデータを受信したら
次の処理に移れるのが同期通信です。

図にすると多分こんな感じです。

非同期通信というのは、レスポンスをまたずして
次のリクエストを送ることができます。

Webを作成する際のアプローチ方法です。
この方法はJesse James Garrett氏によって考えられたといわれています。
Ajaxは略語で、ほんとは「Asynchronous JavaScript and XML」と言います。

・XHTMLとCSSを使った情報手段でなければならない
・DOMを使ってユーザーリクエスト等に応じて動的に情報を変化させる
・XML等を利用して、データを扱いやすくする
・XMLHttpRequestを利用した非同期なデータの検索ができる
・JavaScriptでそれらを制御する

jQueryにはajaxというメソッドがあって、同期通信、非同期通信、どちらも使用することができます。

XMLHttpRequestオブジェクトでも行えますが、
今日はjQueryのajaxメソッドについて書きたいのでXMLHttpRequest使いたい人は
MDNのサンプル見た方が良いと思います。

よく使うやり方としてはこんな感じではないでしょうか？

	jQuery.ajax(
	"moge.json",{
	type : 'POST', //GET,POSTを指定してHTTPの通信タイプを決定
	dataType: 'json', //json,jsonp,html,text,script,xmlが指定できます。
	success: function(json){ //成功した場合に走る関数です。
	console.log(json);
	}
	}
	);

view raw gistfile1.js hosted with ❤ by GitHub

1つ目の引数には、データへのパスを書いてあげます。
2つ目の引数にはオブジェクトを定義します。
このオブジェクトの中に定義できるものはいろいろありますが、
ここではよく使うものだけ紹介する予定です。

XMLHttpRequest cannot loadが出る場合がありますが、
これはドメインが同一でないと発生するエラーです。
Webサーバー上で動作させるなり、絶対パスで指定してあげるとかやったら多分出なくなると思います。

dataの中に、名前と値をセットで入れると、
phpにデータが送られるよというサンプルです。

	jQuery.ajax(
	"moge.php",{
	type: "POST",
	dataType: 'text',
	data: {//nameとvalueをセットでオブジェクトのなかに定義する
	"age" : 18,
	"name" : "mogeri",
	},
	success: function(post){
	console.log(post);
	}
	}
	);

view raw gistfile1.js hosted with ❤ by GitHub

textをjsonとかに変えてphp側にjsonでデータを吐き出させると、jsonでも受け取れます。

オブジェクトに1個エラーを定義して関数を書きます。

	jQuery.ajax(
	"moge.php",{
	type: "POST",
	dataType: 'json',
	data: {
	"age" : 18,
	"name" : "mogeri",
	},
	success: function(post){
	console.log(post);
	},
	error : function() { //こんな感じです。
	console.log("era-desuyo");
	},
	complete: function() {//読み込み完了時にもプログラムが動かせます。
	console.log("読み込みＯＫ");
	}
	}
	);

view raw gistfile1.js hosted with ❤ by GitHub

言葉だと分かりづらいので、
理解できてる範囲で図にしてみました。

こういう扱い方は不可能ですけど、moge.comのAPIを扱う方法が無いわけではありません。

このように、間接的にmoge.comのAPIを利用することは可能になります。

ただ現実的に、そういう手法があるといっても、
中々利用しようと思えないのではないでしょうか。

この面倒くささを回避するので生まれたのがjsonpです。
JSONPとは、外部のJavaScriptをインポートして
別ドメインのファイルでも参照可能にするという手法です。

ためしにlocalhostからatndのデータを拾う場合はこうやります。


	jQuery.ajax(
	'http://api.atnd.org/events/?format=jsonp',
	{
	type: 'post',
	dataType: 'jsonp', //後はデータタイプの指定。
	data: "keyword=愛知県&keyword_or=wordpress&count=50",
	success:function(data)
	{
	console.log(data);
	},
	}
	);