jQuery逆引きリファレンス
HTTP GET／POSTで非同期通信を実施するには？（$.get／$.post）
$.get／$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。
別稿「TIPS：非同期通信で取得したコンテンツをページに反映させるには？」のように、サーバー側から取得したコンテンツをそのまま反映させるならば、loadメソッドを利用するのが簡便です。しかし、その簡便さゆえにloadメソッドは応用が利きません（最低限、特定の要素だけを取り出すことが可能です）。
もしも取得したデータを手元で加工し、表示すべきコンテンツを組み立てたいという場合には、$.get／$.postのようなメソッドを利用します。
まずは、具体的なサンプルをみてみましょう。以下は、「Yahoo!知恵袋 質問検索」APIを利用して、Yahoo！知恵袋から、指定されたキーワードに合致する質問を検索する例です。
サーバーサイドの準備
Ajax（XMLHttpRequest）では、セキュリティ上の理由から、デフォルトではドメインをまたがるサービスへのアクセスは禁止されています*1。このような制約のことをクロスドメイン制約と呼びます。
- *1 XMLHttpRequest Level 2からは、クロスドメイン通信が可能です。ただし、サーバー側で
Access-Control-Allow-Originヘッダーを明示的に発行しなければならないので、無条件に利用できるわけではありません。
クロスドメイン制約を回避する方法にはいくつかありますが、最も原始的なのがサーバーアプリを介する方法です。外部サービスへのアクセスはサーバーアプリに委ね、クライアントサイドのJavaScriptコードからはその結果を利用させてもらうわけです。
以下は、その具体的なコードです。
|
<?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にアクセスし、その結果をそのまま出力しているだけです。ここではPHPを前提にしていますが、もちろん、Java、Ruby、.NETなどなど、利用する技術は自由に選択可能です。
以下のようなアドレスで、正しく動作しているかどうかも確認しておきます。太字の部分は検索キーワードなので、自由に差し替えて構いません。
http://localhost/jq/get.php?query=jQuery
「Yahoo!知恵袋 質問検索」APIのリクエスト／レスポンス仕様は、本家サイトを参照してください。
クライアントサイドの実装
準備した.phpファイルにアクセスしているのが、以下のコードです。
|
<!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>
|
注目すべきポイントは、以下の3点です。
1リクエストを送信するのは$.getメソッド
サーバー側にHTTP GETメソッドでアクセスするのは、$.getメソッドの役割です（1）。HTTP POSTを利用する場合には、代わりに$.postメソッドを利用してください。$.postメソッドの構文も、ほぼ$.getメソッドのそれに準じます。
［構文］$.getメソッド
- 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：ページに新たな要素を挿入するには？」で解説の予定です。
ここでは、最終的に生成されるリンクリストのコード（例）のみ示しておきます。
|
<ul id="result">
<li>
<a href="http://detail.chiebukuro.yahoo.co.jp/..." target="_blank">
rubyでmysqlにアクセスしてデータベースをCSV出力する...
</a>
</li>
……中略……
</ul>
|
処理対象：簡略表記メソッド カテゴリ：Ajax
API：jQuery.get()／jQuery.post() カテゴリ：Ajax > Shorthand Methods（簡略表記メソッド）
※以下では、本稿の前後を合わせて5回分（第31回～第35回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
33. 【現在、表示中】≫ HTTP GET／POSTで非同期通信を実施するには？（$.get／$.post）
$.get／$.postメソッドを使って取得したデータを加工して表示コンテンツを組み立てる方法を解説する。
34. JSON形式のWeb APIにアクセスするには？（$.getJSON）
クロスドメイン制約を回避するためのJSONPをjQueryで利用しよう。$.getJSONメソッドの基本的な使い方を解説する。
35. 非同期通信の開始／終了／成功／失敗のタイミングで処理を実行するには？（ajaxXxxxx）
jQueryによるAjax通信時に発生する各種グローバルイベントを処理する基本的な方法を、具体的なサンプルを通して説明する。
