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

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

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

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

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

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

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

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

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

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

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

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

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

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

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の書き方*ですが、**フレームワークの利用**がおすすめです。先に説明した*jQuery*や大多数を占める*ウェブアプリケーションフレームワーク*でAjaxを利用できます。
参考：[jQuery](https://jquery.com/)

*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();

## Ajaxを活用してウェブコンテンツの操作性を向上しましょう

Ajaxを使うことでウェブブラウザの動作を妨げずに、サーバからコンテンツを受信し更新することができます。これにより、ウェブサービスの代表例となっている*マップ表示や検索処理*の操作性が格段に向上しました。Ajaxを理解したら**動的コンテンツに活用**し、スキルアップを図りましょう。

Ajaxは非同期通信を用いてHTTP通信によりコンテンツを表示します。これによりウェブアプリケーションをインタラクティブに操作したり、操作を妨げずにデータを更新することが可能です。ここではHTTP通信の基本からAjaxの利用法まで解説していきます。

Ajaxとは、非同期通信を用いてHTTP通信によりコンテンツを表示するプログラミング手法を指します

Ajaxを使うには、JavaScriptのXMLHttpRequestクラスやフレームワークのjQuery等を用います

Ajaxを利用することで動的コンテンツをインタラクティブに操作することが可能です

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

Ajaxの記事（1ページ目）