Ajaxとは？HTTP通信の基本からAjaxの利用法まで解説！

Ajaxとは？

AjaxとはAsynchronous JavaScript and XMLの略で、プログラミング手法を指します。読み方はエイジャックスです。Ajaxの最初の文字Asynchronousは非同期を意味しており、Ajaxによってウェブブラウザで使うJavaScriptやXMLで非同期通信を行うことができます。

Ajaxを使うには、JavaScriptのXMLHttpRequestクラスやウェブアプリケーションフレームワークのjQuery等を用います。これによりウェブアプリケーションをインタラクティブに操作したり、操作を妨げずにデータを更新したりすることが可能です。

JavaScriptとは？

JavaScriptはオブジェクト指向のスクリプト言語で、クライアント側で処理されます。JavaScriptは通常のHTMLで処理できない動的コンテンツ処理や、キー入力レスポンス等に対応します。

JavaScriptは、最初にNetscape Navigatorで実装されました。JavaScriptの名称は、業務提携していた当時のサンマイクロシステムズ社（現オラクル社）の製品であるJavaの名称を使用し、名付けました。そのため、Javaとは実際の構造・用途とも異なるソフトウェアです。

JavaScriptの特徴とは？何ができるのか、メリット・デメリットも解説

XMLとは？

XMLとはExtensible Markup Languageの略で、マークアップ言語を汎用利用するために拡張したものです。具体的な用途としては、XMLはデータ交換のフォーマットとして利用されることが多いです。なおHTMLは文章構造を記述する言語で、XMLはデータ構造と値を記述する言語となります。

これにより大量の文書データをシステム間で交換したり、蓄積したりすることができます。

XMLとは？詳細や特徴、メリット・デメリットを徹底解説！

HTTPとは？

HTTPはHyper Text Transfer Protocolの略です。 HTTPとはHTMLやXMLのマークアップ言語で記述された文書（ハイパーテキスト）を、ウェブクライアントとウェブサーバ間で通信するためのプロトコル（通信規約）を指します。通信にはURL・URIを用い、リクエストとレスポンスのセットで通信を行います。

・HTTPリクエスト HTTPリクエストとは、ウェブクライアントからウェブサーバにリクエストを送信する際のメッセージです。HTTPリクエストのメソッドはいくつかありますが、GETメソッドとPOSTメソッドが大半のリクエストとなります。通信はTCPで接続し、HTTPあるいはHTTPSを用います。

リクエストデータは「メソッド」「リクエストターゲット」「HTTPバージョン」の要素で構成されています。データ例：　GET “要求するURI” HTTP/1.1

・HTTPレスポンス HTTPレスポンスとは、ウェブサーバから受信されるデータで「ステータス行」「HTTPヘッダフィールド」「空行」「レスポンスボディ」から構成されるメッセージです。

ステータス行は「HTTPバージョン」「ステータスコード」「ステータスメッセージ」から成ります。データ例：　HTTP/1.1 200 OK

ステータスコードの200番台は成功を表します。100番台は処理継続中の情報です。300番台は追加処理を必要とする場合に返送されます。400番台はリクエストエラーです。

HTTPヘッダーフィールドはさらにリクエスト時に使用する「リクエストヘッダ」、レスポンスで用いる「レスポンスヘッダ」、転送オブジェクトに関する「エンティティヘッダ」に細分されています。

同期通信と非同期通信の違い

同期通信は、時間的に接続コンピュータが相互に同期をとって通信する方式です。通信が確立するためには、両方のコンピュータが同期しタイミングを合わせて通信する必要があります。そのため本来は別の処理が可能であっても受信完了を待ったり、優先的に通信処理を行う必要がありますので非効率になります。

このことをウェブクライアントとウェブサーバに置き換えてみます。同期通信では処理が完了するまでブラウザがブロックされると、画面が固まったりブラウザ操作が反応しなかったりするような症状が発生します。

非同期通信は、送信と受信が同期する必要がありません。非同期通信時のブラウザは受信町でも通常通りの動作を行うことができます。そしてウェブサーバからデータ到着時のイベントを受けることで、表示コンテンツが更新されますので効率的に処理を行うことができます。

Ajaxフレームワークとは？

AjaxはHTTP通信を用いてデータを非同期に転送することで、ユーザ操作に影響を与えずにコンテンツの更新が可能です。これによりウェブページをインタラクティブに、かつ高速に表示することができます。

しかしながらAjaxのプログラムは簡単な記述ではないため、処理を簡素化するためのフレームワークが多数用意されています。以下にフレームワークの具体的例を挙げてみます。

GWT（Google Web Toolkit）はGoogle社の開発したオープンソースソフトウェアのAjaxフレームワークです。そしてjQueryは大多数の主要ウェブサイトで用いられているフレームワークです。主要ウェブアプリケーションフレームワークであるRuby on Railsでも、バージョン3.1からjQueryをデフォルトのフレームワークとしています。参考：W3 Techs Usage statistics of JavaScript libraries for websites

HTTPの通信概念

一般的なウェブコンテンツの通信動作は、以下のHTTPの同期通信の流れに従います。

（1）HTTPリクエストの送信（クライアント側）　ウェブブラウザからウェブサーバへ、HTTP（HTTPS）通信によりリクエストを送信します。（2）HTTPリクエストの受信（サーバ側）　ウェブブラウザの通信要求が、クライアント側からHTTPリクエストとしてサーバ側で受信します。（3）HTTPリクエストの処理（サーバ側）　サーバ側でHTTPリクエストに対応する処理やステータスリクエストを準備します。　必要に応じてPHP等のサーバサイドアプリケーションを起動したり、システム間連携でデータを処理します。（4）HTTPレスポンスの送信（サーバ側）　サーバの処理ステータスと結果をHTMLとCSSに加工し、送信します。（5）HTTPレスポンスの受信（クライアント側）　ウェブサーバからHTTP（HTTPS）通信によりHTTPレスポンスを受信し、ブラウザに表示します。

この（1）から（5）の間はクライアント側のブラウザはコンテンツが更新されず、サーバの応答を待ちます。

Ajaxの通信概念

HTTP通信の同期転送と異なり、Ajaxは非同期で処理を行いますので、クライアント側とサーバ側が同期することなく、並行して処理を行います。

・クライアント側 （A1）JavaScriptのリクエストコールの発行（クライアントのウェブブラウザ）　ウェブブラウザからJavaScriptAPIをコールし、HTTPリクエストをAjaxエンジンモジュールへ依頼します。　リクエスト発行後ウェブブラウザは、任意の処理を受け付けたりコンテンツ表示することができます。

・クライアントのAjaxエンジンモジュール （B1）HTTPリクエストの送信（クライアントのAjaxエンジンモジュール）　クライアントのAjaxエンジンモジュールからウェブサーバへHTTP（HTTPS）通信によりリクエストを送信します。　リクエスト先はウェブサーバまたはXMLサーバとなります。（B2）HTTPリクエストの受信（サーバ側）　ウェブブラウザの通信要求が、クライアント側からHTTPリクエストとしてサーバ側で受信します。（B3）HTTPリクエストの処理（サーバ側）　サーバ側でHTTPリクエストに対応する処理やステータスリクエストを準備します。　必要に応じてPHP等のサーバサイドアプリケーションを起動したり、システム間連携でデータを処理します。（B4）HTTPレスポンスの送信（サーバ側）　サーバの処理ステータスと結果をXMLやHTMLまたはJavaScriptのデータに加工し、送信します。（B5）HTTPレスポンスの受信（クライアントのAjaxエンジンモジュール）　ウェブサーバからHTTP（HTTPS）通信によりHTTPレスポンスを受信し、イベントハンドラに通知します。

・クライアント側 （A2）非同期通信の結果の処理（クライアント側）　Ajaxエンジンモジュールにより、非同期通信のイベントが通知され登録したイベントハンドラに処理が渡ります。　JavaScript APIを用いて実行結果の処理やエラー処理を行います。

処理はクライアント側のブラウザが、（A1）と（A2）の間はリクエストから開放され、別の処理を行うことができます。必要なリクエスト処理はAjaxエンジンモジュールが非同期で行い、（B1）から（B5）の流れでサーバとの通信や処理を行います。

Ajaxの書き方

Ajaxの書き方ですが、フレームワークの利用がおすすめです。先に説明したjQueryや大多数を占めるウェブアプリケーションフレームワークでAjaxを利用できます。参考：jQuery

jQueryでは、非同期通信するために$.ajax()メソッドが用意されています。 jQueryの使用例： $.ajax({ 　type: 'POST', 　url: "POSTするURI", 　data: { 　　name: ‘値’, 　　　: 　}, }).then (function(result) { 　成功時の処理（console.log等）; }).catch(function(request, status, error) { 　エラー時の処理（alert等）; }); その他にも、Ajaxリクエスト成功時のイベントハンドラを.ajaxSuccess()で設定したり、エラーハンドラを.ajaxError()で設定したりします。

ウェブアプリケーションフレームワークのjQueryを使わない場合は、JavaScriptのXMLHttpRequestを使います。実際には前後の手続きがありますので、簡単にというわけにはいきません。 XMLHttpRequestの使用例： 　var xhr = new XMLHttpRequest(); 　xhr.onload = function() { 　成功時の処理（console.log等）; 　} 　xhr.onerror = function() { 　エラー時の処理（alert等）; 　} 　method=”GET”; 　url=”GETするURl”; 　xhr.open(method, url); 　xhr.responseType = "document"; 　xhr.send();