Ajaxとは Asynchronous JavaScript + XML の略で、XMLHttpRequestオブジェクトを使用してサーバと通信を行う技術です。今回はこの非同期通信(ajax)について紹介します。
非同期通信(ajax)の基本
非同期通信(ajax)の基本
同期通信はリクエストを出してからレスポンスを受け取るまで、他の処理を行うことができません。
それに対して非同期通信は、リクエストを投げてもブラウザの操作が行うことができます。そしてサーバーからレスポンスを受け取ると、受信処理を実行します。
ページの一部だけ変更するのに同期通信をしていたら、その間操作できないのでユーザビリティが損なわれてしまいます。その際に非同期通信を使えば、ユーザビリティを損なうことなくページを更新することができます。
同期通信と非同期通信の違い
同期通信は、時間的に接続コンピュータが相互に同期をとって通信する方式です。通信が確立するためには、両方のコンピュータが同期しタイミングを合わせて通信する必要があります。そのため本来は別の処理が可能であっても受信完了を待ったり、優先的に通信処理を行う必要がありますので非効率になります。
このことをウェブクライアントとウェブサーバに置き換えてみます。同期通信では処理が完了するまでブラウザがブロックされると、画面が固まったりブラウザ操作が反応しなかったりするような症状が発生します。
非同期通信は、送信と受信が同期する必要がありません。非同期通信時のブラウザは受信町でも通常通りの動作を行うことができます。そしてウェブサーバからデータ到着時のイベントを受けることで、表示コンテンツが更新されますので効率的に処理を行うことができます。
非同期通信(ajax)の書き方
Ajaxの書き方ですが、フレームワークの利用がおすすめです。今回はjQueryというJavaScriptのフレームワークを用いた書き方を紹介します。jQueryでは、非同期通信するために$.ajax()メソッドが用意されています。
$.ajax({
type: 'POST',
url: 'POSTするURI',
data: {
name: ‘値’,
:
},
}).then (function(result) {
成功時の処理（console.log等）;
}).catch(function(request, status, error) {
エラー時の処理（alert等）;
});エンジニアからのアドバイス
Ajaxを使うことでウェブブラウザの動作を妨げずに、サーバからコンテンツを受信し更新することができます。ウェブサービスの代表例となっているマップ表示や検索処理など多くの操作性を向上させることができるのでマスターしましょう。