Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)

2015年12月3日

$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:非同期通信で取得したコンテンツをページに反映させるには?」のように、サーバー側から取得したコンテンツをそのまま反映させるならば、loadメソッドを利用するのが簡便です。しかし、その簡便さゆえにloadメソッドは応用が利きません(最低限、特定の要素だけを取り出すことが可能です)。

 もしも取得したデータを手元で加工し、表示すべきコンテンツを組み立てたいという場合には、$.get$.postのようなメソッドを利用します。

 まずは、具体的なサンプルをみてみましょう。以下は、「Yahoo!知恵袋 質問検索」APIを利用して、Yahoo!知恵袋から、指定されたキーワードに合致する質問を検索する例です。

指定されたキーワードに合致する質問を列挙(詳細ページにリンク)

サーバーサイドの準備

 Ajax(XMLHttpRequest)では、セキュリティ上の理由から、デフォルトではドメインをまたがるサービスへのアクセスは禁止されています*1。このような制約のことをクロスドメイン制約と呼びます。

  • *1 XMLHttpRequest Level 2からは、クロスドメイン通信が可能です。ただし、サーバー側でAccess-Control-Allow-Originヘッダーを明示的に発行しなければならないので、無条件に利用できるわけではありません。

 クロスドメイン制約を回避する方法にはいくつかありますが、最も原始的なのがサーバーアプリを介する方法です。外部サービスへのアクセスはサーバーアプリに委ね、クライアントサイドのJavaScriptコードからはその結果を利用させてもらうわけです。

 以下は、その具体的なコードです。

PHP
<?php
header('Content-Type: text/xml;charset=UTF-8');
print(file_get_contents('http://chiebukuro.yahooapis.jp/Chiebukuro/V1/questionSearch?appid=wings-project&query='.$_GET['query']));
「Yahoo!知恵袋 質問検索」APIにアクセスするためのコード(get.php)

 コードそのものはごくシンプル。「Yahoo!知恵袋 質問検索」APIにアクセスし、その結果をそのまま出力しているだけです。ここではPHPを前提にしていますが、もちろん、Java、Ruby、.NETなどなど、利用する技術は自由に選択可能です。

 以下のようなアドレスで、正しく動作しているかどうかも確認しておきます。太字の部分は検索キーワードなので、自由に差し替えて構いません。

http://localhost/jq/get.php?query=jQuery

図1 「Yahoo!知恵袋 質問検索」APIによる検索結果をXML文書で表示

 「Yahoo!知恵袋 質問検索」APIのリクエスト/レスポンス仕様は、本家サイトを参照してください。

クライアントサイドの実装

 準備した.phpファイルにアクセスしているのが、以下のコードです。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<form>
  <div>
    <label for="keyword">キーワード:</label>
    <input id="keyword" type="text" size="20" />
    <input id="search" type="button" value="検索" />
  </div>
  <ul id="result" class="ajax"></ul>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  // [検索]ボタンクリックで検索開始
  $('#search').click(function() {
    // 1.phpファイルへのアクセス
    $.get('get.php',
      {
        query: $('#keyword').val()
      }
    )
    // 2検索成功時にはページに結果を反映
    .done(function(data) {
      // 結果リストをクリア
      $('#result').empty();
      // <Question>要素(個々の質問情報)を順番に処理
      $('Question', data).each(function() {
        // <Url>(詳細ページ)、<Content>(質問本文)をもとにリンクリストを生成
        $('#result').append(
          $('<li></li>').append(
            $('<a></a>')
              .attr({
                href: $('Url', this).text(),
                target: '_blank'
              })
              .text($('Content', this).text().substring(0, 255) + '...')
          )
        );
      });
    })
    // 3検索失敗時には、その旨をダイアログ表示
    .fail(function() {
      window.alert('正しい結果を得られませんでした。');
    });
  });
});
</script>
</body>
</html>
get.php経由で「Yahoo!知恵袋 質問検索」APIにアクセスするコード(get.html)

 注目すべきポイントは、以下の3点です。

1リクエストを送信するのは$.getメソッド

 サーバー側にHTTP GETメソッドでアクセスするのは、$.getメソッドの役割です(1)。HTTP POSTを利用する場合には、代わりに$.postメソッドを利用してください。$.postメソッドの構文も、ほぼ$.getメソッドのそれに準じます。

[構文]$.getメソッド

$.get(url, params)
  • url: アクセス先のURL
  • params: クエリ情報(「キー名: 値,...」のハッシュ形式)

 この例であれば、「get.phpに対して、クエリ情報queryとして、テキストボックスの入力値を渡しなさい」という意味になります。具体的には、「get.php?query=(入力値)」のようなリクエストが送信されます。

2取得した結果を処理するのはdoneメソッド

 $.getメソッドによる通信の結果を処理するのは、doneメソッドの役割です。doneメソッドに指定するコールバック関数は、引数として、

  • 受信した応答本文(data
  • 応答ステータス(status
  • jqXHRオブジェクト(jqXHR

を受け取り、(一般的には)応答データをページに反映させます。ここでは「Yahoo!知恵袋 質問検索」APIから得たXMLデータから必要な情報を抜き出しています(詳細は後述)。

 jqXHRオブジェクトは、AjaxのコアでもあるXMLHttpRequestオブジェクトに、jQuery固有の機能を追加したものです。非同期通信の詳細な挙動を制御する場合などに利用します。

3エラー処理を表すのがfailメソッド

 成功時の処理を表すdoneメソッドに対して、通信失敗時に実行すべき処理を表すのがfailメソッドです。failメソッドに指定するコールバック関数は、引数として、

  • jqXHRオブジェクト(jqXHR
  • 応答ステータス(status
  • エラー情報(error

を受け取り、この例のように、エラーを通知したり、デフォルトの処理を実行したりします。失敗時の挙動が不要であれば、省略しても構いません。

補足:結果データを処理する

 doneメソッド配下のコールバック関数――検索結果をページに反映させているコードについても、Ajaxそのものには関係ありませんが、最後に補足しておきます。

 先ほども触れたようにdoneメソッドのコールバック関数は、引数dataで応答本文を受け取ります。この例であれば、先ほどの図1で見たような、「Yahoo!知恵袋 質問検索」APIから取得したXMLデータです。

 このようなXMLデータには、$(セレクター, data)の形式でアクセスできます。ここでは、<Question>要素(個々の質問情報群)を取得し、その配下の<Url>要素(詳細ページのURL)、<Content>要素(質問本文)をもとにリンクリストを生成しています。

 配列を順に処理する$.eachメソッドについては、別稿「TIPS:配列の内容を順番に処理するには?」を参照してください。要素を動的に組み立てるappendメソッドについては、後日「TIPS:ページに新たな要素を挿入するには?」で解説の予定です。

 ここでは、最終的に生成されるリンクリストのコード(例)のみ示しておきます。

HTML
<ul id="result">
  <li>
    <a href="http://detail.chiebukuro.yahoo.co.jp/..." target="_blank">
      rubyでmysqlにアクセスしてデータベースをCSV出力する...
    </a>
  </li>
  ……中略……
</ul>
成功コールバック関数によって生成されるHTMLコード(例)
処理対象:基本 カテゴリ:Ajax
処理対象:簡略表記メソッド カテゴリ:Ajax
API:jQuery.get()/jQuery.post() カテゴリ:Ajax > Shorthand Methods(簡略表記メソッド)

※以下では、本稿の前後を合わせて5回分(第31回~第35回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
31. jQueryプラグインを自作するには?($.fn)

何度も利用する似たコードは、ライブラリではなくプラグインにまとめよう。プラグイン作成の基本を解説。

jQuery逆引きリファレンス
32. 自作のjQueryプラグインに引数を設定するには?($.extend)

プラグイン作成の基本を理解したら、パラメーターを受け取れるようにしよう。その実装方法を解説。

jQuery逆引きリファレンス
33. 【現在、表示中】≫ HTTP GET/POSTで非同期通信を実施するには?($.get/$.post)

$.get/$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。

jQuery逆引きリファレンス
34. JSON形式のWeb APIにアクセスするには?($.getJSON)

クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。

jQuery逆引きリファレンス
35. 非同期通信の開始/終了/成功/失敗のタイミングで処理を実行するには?(ajaxXxxxx)

jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。

サイトからのお知らせ

Twitterでつぶやこう!