jQuery Academy · レッスン

AJAXリクエストの効果的な設定

.ajax()のデータ型、ヘッダー、キャッシュ、タイムアウトなどの包括的なオプションを学び、さまざまな状況に合わせて非同期リクエストを細かく調整します。

レッスン 1/311 ステップ

「AJAXリクエストの効果的な設定」はCoddyKit上の無料jQuery Academyレッスンです。これはレッスン1/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはjQuery Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 jQuery Academyコースには全3レッスンが含まれています。

.ajax()の力を引き出す

jQueryの$.ajax()メソッドは、HTTPリクエストを細かく制御して送信するための主要な手段です。$.get()や$.post()のようなシンプルなメソッドとは異なり、$.ajax()ではリクエストのあらゆる要素を細かく調整できます。

このレッスンでは、データ型の設定からキャッシュやタイムアウトの管理まで、包括的なオプションを学び、堅牢で効率的な非同期アプリケーションを構築します。

基本的な.ajax()の構造

$.ajax()は基本的に、設定オプションを表すキーと値のペアをまとめたオブジェクトを受け取ります。最も基本的なリクエストではurlだけが必要です。

APIからデータを取得する方法は次のとおりです。

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URLとメソッド（type）

urlオプションは、リクエスト先のエンドポイントを指定します。typeオプション（新しいjQueryバージョンではmethodも使用可能）は、GET、POST、PUT、DELETEなどのHTTPメソッドを定義します。

url：リクエスト先のURLです。
type：HTTPメソッドです（例：「GET」、「POST」）。

$.ajax({
  url: "/api/users",
  type: "POST"
});

`data`でデータを送信する

dataオプションを使うと、リクエストとともに情報を送信できます。GETリクエストでは、データはクエリパラメーターとしてURLに追加されます。POSTリクエストでは、リクエストボディに送信されます。

通常のオブジェクトを渡せば、jQueryがシリアライズしてくれます。

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

期待するレスポンス：`dataType`

dataTypeオプションは、サーバーから返されるデータの種類（例："json"、"xml"、"html"、"text"）をjQueryに伝えます。これにより、jQueryはレスポンスを正しく解析できます。

指定しない場合、jQueryはレスポンスのMIMEタイプからデータ型を推測します。

$.ajax({
  url: "/api/products",
  dataType: "json"
});

カスタムヘッダー：`headers`

headersオプションを使うと、リクエストにカスタムHTTPヘッダーを設定できます。認証（例：APIキーの送信）やコンテンツタイプの指定などに重要です。

キーにヘッダー名、値にその内容を指定したオブジェクトを渡します。

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

キャッシュを制御する：`cache`

ブラウザーは、次回以降の読み込みを高速化するためにGETリクエストをキャッシュすることがよくあります。便利な機能ですが、毎回最新のデータが必要になる場合もあります。

cache: falseを設定すると、ブラウザーによるレスポンスのキャッシュを防ぎ、常にサーバーから最新の情報を取得できます。

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

リクエストの制限：`timeout`

時間のかかるリクエストは、ユーザー体験を損なう可能性があります。timeoutオプションを使うと、リクエスト完了までの最大時間（ミリ秒）を指定できます。

この時間内にリクエストが完了しない場合は中止され、.fail()コールバックが実行されます。

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

実践：高度なAJAX設定

複数の$.ajax()オプションを組み合わせた包括的な例を見てみましょう。このリクエストでは、todo項目を取得し、期待するデータ形式としてJSONを指定し、カスタムヘッダーを追加し、キャッシュを無効にして、タイムアウトを設定します。

実行して、出力される段落がどのように更新されるか確認してみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

AJAX設定の確認

/api/commentsに新しいユーザーコメントを送信する機能を構築しているとします。POSTリクエストとして、commentTextとuserIdを含め、JSONオブジェクトを受け取る必要があります。また、コメントを常に最新の状態にするため、ブラウザーによるキャッシュを防ぎたいとします。

この状況で必須となる$.ajax()オプションは、次のうちどれでしょうか。

対話的なレッスンで答える

振り返り：AJAX設定を習得する

jQueryの$.ajax()メソッドを設定する方法を習得しました。

urlとHTTPのtypeを指定する方法を学びました。
dataオプションを使ってデータを送信する方法を学びました。
dataTypeで期待するレスポンス形式を定義する方法を学びました。
高度な用途に対応するカスタムHTTPheadersを追加する方法を学びました。
cacheでブラウザーのキャッシュを制御する方法を学びました。
timeoutで時間のかかるリクエストに制限を設定する方法を学びました。

これらの強力なオプションにより、Webアプリケーションで高度にカスタマイズされた、信頼性の高い非同期処理を構築できます。

無料で開始

AI チューターと学ぶ JavaScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 48

無料で学習を始めるコース全体を表示

よくある質問

「AJAXリクエストの効果的な設定」レッスンは無料ですか？

はい。「AJAXリクエストの効果的な設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、jQuery Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 jQuery Academyコースには全3レッスンが含まれています。

「AJAXリクエストの効果的な設定」で何を学びますか？

.ajax()のデータ型、ヘッダー、キャッシュ、タイムアウトなどの包括的なオプションを学び、さまざまな状況に合わせて非同期リクエストを細かく調整します。ブラウザで直接実行するハンズオンコードでjQuery Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

jQuery Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのjQuery Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/3です。

「AJAXリクエストの効果的な設定」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このjQuery Academyレッスンでコードを書いて実行できますか？

はい。すべてのjQuery Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← jQuery Academyに戻る