jQuery.ajax()でリアルタイムにコンテンツを更新しよう!

jQuery.ajax()でリアルタイムにコンテンツを更新しよう!

jQuery.ajax()は非同期のHTTP通信(Ajax)を実行するメソッドです。

ページのコンテンツをリアルタイムで更新できます。

非同期通信とは?

通常の通信である同期通信は、サーバーにリクエストを送信した後、レスポンスを待ちます。

サーバーにデータを下さい!とお願いした後、何もしないで待っているわけです。

それに対して非同期通信は、レスポンスを待たずに他の処理を実行できます。

データをくれるときに声を掛けてくれるので、それまでは自由時間です。優しい。

Ajaxとは?

Ajaxは、データの送受信を非同期通信で行い、現在のページ操作を妨げずにコンテンツを更新します。

同期通信によるページの遷移とは異なり、コンテンツの更新を待っている間、ページのスクロール等ができるのが利点です。

jQuery.ajax()の使い方

$.ajax('ajax.html', {
    type: 'GET'
});

第1引数にURL、第2引数にオブジェクトで設定を渡します。

このコードではajax.htmlにリクエストを送信するだけなので、.done()やオプションで処理を追加する必要があります。

GETで取得するには?

デフォルトの取得方法がGETなので、設定は不要です。

$.ajax('ajax.php', {
    data: {key1: 'ajax', key2: 'example'}
});

パラメータを設定するには、dataオプションを使用します。

dataオプションは、パラメータ名と値をペアとしたオブジェクトを設定します。

サンプルでは、ajax.php?key1=ajax&key2=exampleのURLにリクエストするのと同様になります。

jQuery.get()で簡単に記述する

jQuery.ajax()の代わりにjQuery.get()を使用することもできます。

$.get('ajax.html', {key1: 'ajax', key2: 'example'}, function(data) {
        $('#ajax-content').html(data);
});

サンプルをjQuery.get()で書き直したコードです。

第1引数にURL、第2引数にパラメータのオブジェクト、第3引数にリクエストが成功したときに実行するコールバック関数を渡します。

各々dataオプション、.done()に対応しています。

$.get('ajax.html', function(data) {
        $('#ajax-content').html(data);
});

パラメータが不要であれば、URLとコールバック関数のみで記述することもできます。

POSTで取得するには?

$.ajax('ajax.php', {
    type: 'POST',
    data: {key1: 'ajax', key2: 'example'}
});

typeオプションに ‘POST’ を設定し、dataオプションでPOSTするデータを設定します。

dataオプションの仕様はGET取得のパラメータと同様です。

array(2) {
    ["key1"]=> string(13) "ajax"
    ["key2"]=> string(7) "example"
}

dataオプションで渡されたデータが、 ajax.phpに配列としてPOSTされます。

jQuery.post()で簡単に記述する

GET取得と同様、jQuery.post()を使用できます。

$.post('ajax.html', {key1: 'ajax', key2: 'example'}, function(data) {
        $('#ajax-content').html(data);
});

仕様、省略できる点はjQuery.get()と同様です。

.done()でコンテンツを更新する

$.ajax()の実行後、.done()に渡したコールバック関数でページ内のコンテンツを更新します。

// HTML
<div id="ajax-content"></div>
// ajax.html
Ajax Content
// jQuery
$.ajax('ajax.html').done(function(data) {
    $('#ajax-content').html(data);
});

「Ajax Content」を出力するajax.htmlの内容を#ajax-contentに挿入するサンプルです。

$.ajax()でajax.htmlにリクエストを送信し、メソッドチェーンでdone()を実行しています。

.done()内のコールバック関数は、サーバーへのリクエストが成功したときに実行されます。

コールバック関数の第1引数には、サーバーにリクエストしたデータが渡されます。

サンプルでは「Ajax Content」です。

<div id="ajax-content">Ajax Content</div>

.html()でデータを置き換えれば、#ajax-contentのコンテンツが更新されます。

処理の内容は複雑ですが、コードは短めなので「こういうもんだ」と流して頂いても構いません。

successオプションは.done()と同じ

successオプションを使って、.done()と同様の処理を行うことができます。

$.ajax('ajax.html', {
    success: function(data) {
        $('#ajax-content').html(data);
    }
});

.done()よりもネストが多くなってしまうので、jQuery 1.5以上では.done()を使用しましょう。

.success()はなくなりました

.done()と同じ動作をするメソッドとして、以前は.success()が存在しました。

非推奨メソッドとして残されていましたが、jQuery 3.0で削除されました。

Uncaught TypeError: $.ajax(...).success is not a function

使用すると、存在しない関数としてエラーが発生します。

.fail()でエラーを表示しよう!

何らかの原因でリクエストに失敗した場合、.done()で設定したコールバック関数は実行されません。

エラーが発生した場合の処理は、.fail()で設定します。

$.ajax('ajax.html')
    .done(function(data) {
        $('#ajax-content').html(data);
    })
    .fail(function() {
        alert('リクエストが失敗しました。');
});

リクエストに失敗した場合、alert()でアラートを表示します。

空のページや要素が表示されていると、ユーザーは不安を感じてしまいます。

エラーが発生したときは教えてあげると親切です。

errorオプションは.fail()と同じ

.fail()の代わりにerrorオプションを使用できます。

$.ajax('ajax.html', {
    error: function() {
        alert('リクエストが失敗しました。');
    }
});

successオプションと同様に、ネストが多くなるため、jQuery 1.5以上では.fail()が推奨されます。

.error()はなくなりました

.success()同様、jQuery 3.0で削除されました。

Uncaught TypeError: $.ajax(...).error is not a function

エラー表示についても同様です。

dataTypeオプションを設定しよう!

サンプルでは全て、サーバーからテキストを取得していましたが、実際にはJSONだったりXMLだったりします。

通常、jQueryが自動的にファイル形式を判別してくれますが、サーバーが適切なMIMEタイプを設定していない場合、文字列として処理されてしまいます。

そんな時に使用するのがdataTypeオプションです。

JSONを取得するサンプル

dataTypeオプションに’json’を設定します。

$.ajax('ajax.txt', {
    dataType: 'json'
}).done(function(data) {
    console.log(data);
});

拡張子は.txtですが、dataはJSONオブジェクトになります。

dataTypeを設定しない場合、dataは文字列として取得されます。

$.ajax('ajax.txt', {
    dataType: 'json'
}).done(function(data) {
    console.log(data);
}).fail(function() {
    console.log('不正なJSON形式です。');
});

JSONのパースに失敗した場合、.fail()で設定したコールバック関数が実行されます。

$.parseJSON()で文字列をパースするよりも、dataTypeを設定した方がスマートです。

‘json’の他には、’xml’, ‘html’, ‘script’, ‘jsonp’, ‘text’に対応しています。

サーバー環境の変更で不具合が発生しない様、適切なdataTypeオプションを設定しましょう。

リクエストヘッダーを設定する

headersオプションにオブジェクトを設定し、リクエストヘッダーを変更できます。

オブジェクトは、ヘッダー名と値のペアとして設定します。

$.ajax('ajax.html', {
    headers: {
        'HEADER-NAME': 'value'
    }
});

ヘッダーに「HEADER-NAME: value」が付与されます。

セキュリティ上の理由でCookie, Origin, Referer, User-Agentなどのヘッダーは設定できない点に注意しましょう。

Refused to set unsafe header "Cookie"

ヘッダー名にCookieを設定したとしても、安全でないヘッダーが設定されてるとして、リクエストが拒否されます。

まとめ

  • 非同期通信では、レスポンスを待っている間、他の処理を実行できます。
  • Ajaxは、非同期通信により、ページ内のコンテンツを更新します。
  • デフォルトの取得方法はGET、typeオプションでPOSTに変更できます。
  • jQuery.ajax()の代わりにjQuery.get(), jQuery.post()も使用できます。
  • リクエストが成功したときは.done(), 失敗したときは.fail()で設定したコールバック関数が実行されます。
  • successオプションは.done(), errorオプションは.fail()と同様の動作です。
  • .success(), .error()はjQuery 3.0で削除されました。
  • dataTypeオプションで取得するデータの形式を設定できます。
  • JSONを取得するときには、dataTypeオプションに’json’を設定すべきです。
  • headersオプションでリクエストヘッダーを設定できます。

メソッドカテゴリの最新記事