【JavaScript】ajaxの使い方・非同期通信の方法【基本編】

ajaxとは「Asynchronous JavaScript and XML」の略で、非同期でデータのやり取りが可能になる通信方法のことです。

通常サーバー通信を行うには、あるWebページから別の画面へ遷移したりページを再読み込みする必要があります。

これを同期通信と呼びますが、非同期通信では画面遷移や更新をすることなくサーバー通信を行うことができます。

ajaxを使うと非同期通信が可能になるため、ページの一部の表示のみを更新したい場合などに活用できます。

ajaxの使い方

ajaxを実装する方法はいくつか存在しますが、最低限必要なパラメータは共通でurlのみで、リクエストヘッダやボディは必要に応じて設定を行います。

ここではライブラリを使わない場合とjQueryやaxiosを使った場合の基本的な実装例を紹介します。

ライブラリを使わない場合

まずXMLHttpRequestインスタンスを作成し、onreadystatechangeプロパティでサーバー応答時の処理を記述していきます。

JavaScript

// XMLHttpRequestインスタンスを作成
var client = new XMLHttpRequest();
// サーバー応答時の処理を定義
client.onreadystatechange = function() {}

続いてサーバー応答時の処理で通信成功時の処理を記述していきます。

readyStateプロパティは通信状態をあらわし、readyState == 4が通信完了となります。

statusプロパティはレスポンスステータスをあらわし、status == 200が通信成功となります。

レスポンスをjsonで受け取っている場合は通信成功時の処理でeval関数を使ってレスポンスデータをオブジェクト化します。

JavaScript

// XMLHttpRequestインスタンスを作成
var client = new XMLHttpRequest();
// サーバー応答時の処理を定義
client.onreadystatechange = function() {
  // 通信完了時
  if (client.readyState == 4) {
    　// 通信成功時
    if (client.status == 200) {
      // レスポンスデータをeval関数でフォーマット
      var data = eval('(' + client.responseText + ')');
      console.log('data', data);
    } else {
      // 通信失敗時
    }
  }
}

最後にリクエストを送信するためにopenメソッドで初期化し、sendメソッドでリクエストを送信します。

状況に応じてリクエストヘッダをsetRequestHeaderメソッドで設定します。

完成系のソースは以下のようになります。

ライブラリを使用しない手法は仕組みを理解するうえで知っておいた方がいいですが、記述が冗長だったりするので後述するjQueryやaxiosなどのライブラリを使用するのがおすすめです。

JavaScript

// XMLHttpRequestインスタンスを作成
var client = new XMLHttpRequest();
// サーバー応答時の処理を定義
client.onreadystatechange = function() {
  // 通信完了時
  if (client.readyState == 4) {
    　// 通信成功時
    if (client.status == 200) {
      // レスポンスデータをeval関数でフォーマット
      var data = eval('(' + client.responseText + ')');
      console.log('data', data);
    } else {
      // 通信失敗時
    }
  }
}
// リクエストを初期化
client.open('GET', 'url');
// HTTP リクエストヘッダの値を設定
client.setRequestHeader('Content-Type', 'application/json');
// リクエストを送信
client.send(null);

jQueryで実装する場合

まず、jQueryを導入するためにHTMLファイルに以下コードを記述します。

HTML

// jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

続いて、ajax処理を記述していきます。

最低限urlが必要で、リクエストメソッドやリクエストヘッダは状況に応じて設定します。

リクエスト成功時はdone句に、失敗時はfail句に分岐されます。

完成系は以下のようになり、ライブラリを使用しない場合に比べてシンプルな記述であることが分かると思います。

JavaScript

$.ajax({
  type: 'GET',
  url: 'url',
  // HTTP リクエストヘッダの値を設定
  headers: {'Content-Type': 'application/json'}
})
.done(function(data) {
  // 通信成功時
  console.log('data', data);
})
.fail(function() {
  // 通信失敗時
});

axiosで実装する場合

ajaxもjQuery同様に事前の導入が必要です。

CDNで導入する場合はHTMLファイルに以下コードを記述してください。

HTML

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

ajax処理の構文もjQueryと似たような内容です。

axios.get('url', { ... })のようにリクエストメソッドやurlを外出しすることもできます。

JavaScript

axios({
  method: 'get',
  url: 'url',
  // HTTP リクエストヘッダの値を設定
  headers: {'Content-Type': 'application/json'}
})
.then(function (response) {
  // 通信成功時
  console.log('data', response.data);
})
.catch(function (error) {
  // 通信失敗時
});

まとめ

ajaxの基本的な使い方について解説しました。

実際にAPIを利用してデータを取得する方法については以下の記事で解説していますので、合わせて参考にしてみてください。