catch-img

JavaScriptでAjaxを使う方法。使用例や利用方法を解説

よりユーザビリティの高いWebアプリやサイトを作るには、非同期通信を用いる必要があります。そのためのツールの一つが「Ajax」です。Ajaxの使い方や使用例を紹介しますので、Ajaxを使ったサイトやアプリを作れるようになりましょう。

目次[非表示]

  1. 1.Ajaxについて学ぼう
    1. 1.1.Ajaxは非同期通信のための技術
      1. 1.1.1.非同期通信とは?
      2. 1.1.2.同期通信についても知っておこう
    2. 1.2.Ajaxを使ったサービスの特徴
  2. 2.Ajaxの書き方
    1. 2.1.基本的な書き方
    2. 2.2.POST・GETを使って書く
    3. 2.3.GET通信とPOST通信の違い
  3. 3.AjaxをJavaScriptに実装する方法
    1. 3.1.「XMLHttpRequest()」による通信
    2. 3.2.「readyState」を使った条件分岐
    3. 3.3.エラーメッセージを取得
  4. 4.jQueryを利用する
    1. 4.1.jQueryの概要
    2. 4.2.jQueryを利用するメリット
    3. 4.3.jQueryの書き方
  5. 5.Ajaxを使って機能性の高いWebサイトを構築

Ajaxについて学ぼう

Ajaxは、普段から利用しているWebサイトやアプリにもよく利用されています。Ajaxは、アプリやサイト開発をJavaScriptで開発するためには覚えておきたい機能の一つです。

JavaScript初心者の方には、Ajaxとは何かが分からない方もいるでしょう。まずは、Ajaxとはどのようなものかを解説します。

Ajaxは非同期通信のための技術

「Asynchronous JavaScript XML」の略です。「Asynchronous」は「非同時性の、非同期の」という意味で、Ajaxを訳すと「JavaScriptとXMLを使ったサーバーとの通信」となります。

JavaScriptを利用してサーバーとの非同期通信を行い、受信をDocument Object Model(DOM)を経由してページに反映させるための技術のことを言います。

Ajaxのこの技術は、GoogleマップやGmail、Facebookなど、メジャーなWebサイトやツールではよく見かけるものです。

この技術がどういったものかについて理解するためには、「非同期通信」について理解を深める必要があります。

非同期通信とは?

通常、Webページで何かの操作をするときは、パソコンからリクエストをインターネットを通じてサーバーへと送り、サーバーからデータが返ってきて、リクエストを反映するという仕組みをとっています。

非同期通信とは、リクエストを出してからデータが返って来る前の処理を、ブラウザ上で行い、更新した部分だけをリクエストして処理を行う、という通信を行います。

非同期通信にはさまざまなメリットがあります。例えば、通常の通信ではリクエストを送ってからレスポンスが返ってくるまで操作が一切できなくなってしまいますが、非同期通信の場合は、レスポンスを待つことなく次の操作に移れます。

また、1回の通信量も少ないので、ブラウザ上の処理が早くなるという特徴もあるのです。

同期通信についても知っておこう

同期通信とは、サーバーにリクエストを送り、返って来る情報とブラウザ上のデータを完全に同期しながら、操作を行うという仕組みのことです。

同期通信では、サーバーからの返信を待っている間、操作ができません。更新をかけた際に、画面が真っ白になって何もできなくなるWebサイトを訪問したことはないでしょうか。あの処理が、同期通信を行っている場合の処理となります。

同期通信の場合、操作を要求するとページが再読込される、一つの処理が終わるまで次の処理ができないといった不便な部分があり、動的なサイトでは非同期通信がよく使われています。

Ajaxを使ったサービスの特徴

Ajaxは色々なサービスで利用されています。例えば、Web上で地図を表示した際に、カーソルに合わせて地図がスライドするようなシーンを見かけたことはあるでしょう。ページが真っ白にならず、地図を操作できる処理はAjaxの非同期通信によるものです。

他にも、Googleで検索した際にサジェストキーワードが表示されたり、Twitterのタイムラインなども、Ajaxが使われています。

■関連記事

  JavaScript開発におすすめエディタ6選。OS別や機能解説 | Java・フロントエンド研修のジョブサポート プログラム開発において、開発環境を整えることは重要です。その中でも今回は、JavaScript開発に適したエディタを、その理由と共に紹介します。エディタの特性や機能を把握し、開発に最適なエディタを選びましょう。 Java・フロントエンド研修のジョブサポート

オンライン・リモート講座(入門5日・基礎10日)ー株式会社ジョブサポート

Ajaxの書き方

AjaxはJavaScript上で使われますが、どのようにコードに記載すれば良いのでしょうか。Ajaxを利用するためのコードの書き方について学びましょう。

基本的な書き方

まずは、基本的な書き方について押さえておきましょう。

$.ajax({
 url: ‘××××’ //URLまたはディレクトリを記載
 })
 .done(function(data){ // 通信が成功したときの処理 
 })
 .fail(function(data){ // 通信が失敗したときの処理
 })
 .always(function(data){ //通信の成否にかかわらず実行する処理 
});

通信に成功したときの処理、失敗したときの処理、成否にかかわらず実行する処理、という三つのパターンを用意します。

POST・GETを使って書く

Ajaxの書き方は、jQuery2までとjQuery3以降では異なる点に注意が必要です。今回は、jQuery3以降の書き方について紹介します。

$.ajax({
 url: '××××', //アクセスするURLかディレクトリ
 type: 'postかget',
 cache: false, //cacheを使うかどうか
 dataType:'json', //data type scriptなどデータタイプの指定
 data:data, //アクセスするときに必要なデータを 記載
 })
 .done(function(response) { //通信が成功したときのコールバックの処理を書く
 })
 .fail(function(xhr) { //通信が失敗したときのコールバックの処理を書く
 })
 .always(function(xhr, msg) { //通信結果にかかわらず実行する処理を書く
});

基本的な書き方と比較して、タイプの選択など書くことは増えていますが、基本的な流れについては同じです。

GET通信とPOST通信の違い

GETとPOSTにどのような違いがあるのかについても把握しておきましょう。大きな違いは用途です。GETの場合、レスポンスがキャッシュされますが、POSTの場合はキャッシュされません。

GET通信の場合、その結果はキャッシュされ、次回以降に通信を行った場合はそのキャッシュを利用されます。そのため、GETから何度通信をしても、同じ結果が帰ってきます。

一方、POSTの場合は、サーバーにデータを送ることで、状態を変化させることが可能です。そのため、メッセージの書き込みやデータの更新など、内容を書き換える場合はPOSTを使います。

ブログで新しい記事を投稿したり、新しいデータを登録する場合はPOSTを、Googleの検索やWordPressで下書きを保存する際にはGETが使われます。

■関連記事

  JavaScriptの最適な学習方法とは?おすすめ学習サイトや書籍紹介 | Java・フロントエンド研修のジョブサポート JavaScriptは身近なところで使われていて、エンジニアにとっても利用頻度が高く、習得価値の高い言語です。この記事ではJavaScriptを学習するための方法や、おすすめの学習サイト、書籍を紹介します。 Java・フロントエンド研修のジョブサポート

短期Java講座(入門5日・基礎10日)ー株式会社ジョブサポート

AjaxをJavaScriptに実装する方法

Ajaxを実際にJavaScriptに実装するために、どのような方法があるのかを解説します。エラーが出た場合のメッセージを取得する方法などと合わせて見ていきましょう。

「XMLHttpRequest()」による通信

JavaScriptでは、非同期通信を行うためのAPI「XMLHttpRequest()」が提供されているので、これを使います。

まずは、「XMLHttpRequest」のインスタンスを生成します。書き方は以下の通りです。

var xhr = new XMLHttpRequest();

次に、生成したxhrというインスタンスを使って、「どのサーバーに対して」「どんな方法で」「いつ」データを取得するのかを決定します。

var xhr = new XMLHttpRequest();
xhr.open(【どんな方法でデータを取得するか】, 【どのサーバーに対して】);
xhr.send();
xhr.onreadystatechange = function() {
 if(【いつデータを取得するか】) {  //データ取得後の処理内容 
 }
}

「readyState」を使った条件分岐

先述した「XMLHttpRequest」を使った方法ですが、そもそも通信が完了していなければデータを取得して良いタイミングが分かりません。

そこで、「XMLHttpRequest」のオブジェクトは、「readyState」もしくは「status」のプロバティで、通信の応答や状態を確認することができますので、これを使いましょう。

上記のコードの「if~」を、以下の文章に置き換えます。

if ( xhr.readyState === 4 ) {

これは、「readyState」が4の値であればデータを取得する処理を行う、という内容に書き換えるものです。

「readyState」の値は、次のようにサーバーと通信状態を表しています。

状態
詳細
0
準備
通信をしていない状態
1
準備完了
通信の準備が完了した状態
2
通信の開始
通信が開始された状態
3
通信を受信
サーバーから通信を受信している状態
4
通信完了
通信が完了した状態

4の値になれば通信が完了している、というステータスになるので、処理を実行します。

エラーメッセージを取得

サーバーとの通信でエラーが起こった状態についても記述をしておきましょう。

これは、サンプルコードのif文の「readyState」と並行する形で、「status」を以下のように記述することができます。

 if (xhr.readyState === 4 && xhr.status === 200) {

「readyState」の値が4、「status」の値が200のとき、データ取得後の処理を実行する、という文章になります。

「status」の値と状態には、以下のようなものがあります。

状態
詳細
200
成功
通信が成功した状態
401
エラー
認証が必要なため通信ができない
403
エラー
アクセス禁止
404
エラー
情報が存在しない
500
エラー
サーバーの不具合
503
エラー
サーバーに負荷がかかっている状態

消えているホームページなどで「404 not found」などと表示されるのは、ステータスが「404」の状態だからです。

200(通信成功)の状態のときだけ処理を実行する、それ以外はエラーメッセージを取得する、という処理にしておきましょう。

■関連記事

  基礎から学ぶJavaScript研修。プランやカリキュラム解説 | Java・フロントエンド研修のジョブサポート JavaScriptに関して知識があまりなく、どのような研修を行えばエンジニアやエンジニアを目指す従業員に効果的か分からない人事の方もいるでしょう。この記事では、研修の具体的なプランやカリキュラムについて解説していきます。 Java・フロントエンド研修のジョブサポート

通年開講プロエンジニアコース(Java研修1~3ヶ月)ー株式会社ジョブサポート

jQueryを利用する

JavaScriptを利用する上では、jQueryというライブラリを利用するととても便利です。jQueryを利用して、Ajaxの処理を行うことが可能です。

jQueryの概要や、jQueryの書き方についても学びましょう。

jQueryの概要

jQueryは、2006年にリリースされたJavaScriptのライブラリです。ライブラリは、プログラムがまとめられたファイルのことです。ライブラリを使うことで、プログラムを一から記載せず、よく使う機能などを簡単に追加することができます。

jQueryは扱い方も非常に簡単で、初心者から上級プログラマーまで重宝できるライブラリです。

jQueryを利用するメリット

jQueryを使うことでさまざまなメリットがあります。第一に、HTMLやCSSの操作を簡単に行えるという点です。

例えば、ボタンにマウスカーソルが乗ったときにボタンが変化したり、画面をスクロールするとデザインが変わっていくようなWebサイトを見たことがあるでしょう。このような機能を一から作ると、膨大なコードを記述しなければなりません。

jQueryを使うことで、非常に短いコードでこれらの機能を実装できます。

次に、Ajaxが簡単に扱えるという点です。jQueryを使うと、Ajaxの記述を簡易化することができます。

jQueryの書き方

jQueryでAjaxを実行するには、以下のように記載します。

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
$( function() {
 $.ajax( { //実行する処理内容
 } );
} );

scriptのタグ内に記述することができるので、そこまで難しくはありません。

■関連サイト

  フロントエンド(HTML5・CSS・JavaScript)入門5日講座-ジョブサポート フロントエンド(HTML5・CSS・JavaScript)入門5日講座は通学で基礎力強化します。スキルチェンジ、基礎から学びたい方向けの講座です。貴社の希望開始日、オンライン受講の選択も可能です。Java・フロントエンド研修はジョブサポートにお任せください。 Java・フロントエンド研修のジョブサポート


Ajaxを使って機能性の高いWebサイトを構築

Ajaxを使うことで、カーソルを動かしただけでそれに追従する形でスライドする地図や、新規登録フォーム、タイムラインなど多様的なWebサイトを構築することができます。

非同期通信は使うメリットも非常に大きく、JavaScriptを使っていくのであれば、Ajaxの使い方についても学んでおきたいところです。その際はPOST通信、GET通信の違いについての違いについても把握しておきましょう。

jQueryを利用すれば、Ajaxの記述が簡単になります。jQueryもJavaScriptを使う上ではよく利用されるライブラリなので、合わせて使い方を覚えておきたいところです。

法人研修の実績2500名以上!若手、新人エンジニア採用後

Java研修はジョブサポートお任せ下さい


ジョブサポートでは通年開講で貴社の希望開始日に合わせたJava研修(通学、オンライン・リモート講座)を行っています。助成金を活用すれば費用負担を軽減して研修受講ができるのため若手、新人エンジニア採用計画と合わせてご検討下さい。

新人・若手エンジニアの基礎知識、ビジネススキルを強化

プロエンジニア育成コース(Java研修1~3ヶ月)


メールマガジンの購読設定

ジョブサポートの最新情報をお届けするほか、

人事、採用教育担当者、若手エンジニア向けに

役立つ情報をお届けします。

アップロードしています。少々お待ちください。