IT

一般的なAjax通信のやり方

非同期通信の動作をより細かく制御したい場面で使える$.ajaxメソッドの構文と利用可能なパラメーター群の概要を紹介します。

 

jQueryでAjax通信の基本的な機能をあつかうのは、「$.ajax」メソッドです。

またload$.get$.post$.getJSONといったメソッドは、「$.ajaxメソッドの簡易構文」になります。

一般的には、それでまかなえるなら簡易構文を利用でOKです。

しかし、非同期通信の動作をより細かく制御したいという状況では、$.ajaxメソッドを使うことになります。

 

$.ajaxメソッドの構文

$.ajax(url [,settings])

  • url: アクセス先のパス
  • settings: 通信時の設定パラメーター(「パラメーター名: 値」のハッシュ)

 

 

※サンプルコード

<html>
<head>
<meta charset="UTF-8" />
<title>一般的なAjax通信のやり方</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="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
// [検索]ボタンクリックで検索開始
$('#search').click(function() {
// .phpファイルへのアクセス
$.ajax('get.php',
{
type: 'get',
data: { query: $('#keyword').val() },
dataType: 'xml'
}
)
// 検索成功時にはページに結果を反映
.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) + '...')
)
);
});
})
// 検索失敗時には、その旨をダイアログ表示
.fail(function() {
window.alert('正しい結果を得られませんでした。');
});
});
});
</script>
</body>
</html>

お問い合わせフォーム

気になる方はコチラからお問い合わせ!
必須お名前
必須メールアドレス
必須郵便番号
必須ご住所
必須電話番号
ご相談内容
必須メッセージ本文

コメントを残す

*