jQuery

[jQuery] Ajaxでデータを取得する

投稿日:2018年9月13日 更新日:

Ajaxでデータを取得するサンプルです。

サンプルソース

例)ボタンを押すとAjax通信を行い、結果をコンソールに出力する

(test.txt)
この文字列が返ります。
(結果)
この文字列が返ります。

ここでは固定のテキスト文字列をそのまま受け取っていますが、通常はphpやサーブレット等にAjax通信を行って処理結果を受け取ります。

$.ajaxのパラメータ

Ajax通信を行う時の振る舞いやデータを指定します。

【$.ajaxに渡すパラメータ】
urlリクエストの送信先URL
typeHTTP通信の種類を指定する
("POST" or "GET")※デフォルト値は"GET"です。
dataTypeサーバから返るデータ形式 省略時はMIMEタイプ等から自動判別される。
("text" "json" "jsonp" "xml" "html" "script")
dataサーバに送信する値
オブジェクトでも文字列でもOKです。
username認証が必要な時に使用するID
password認証が必要な時に使用するパスワード
contentTypeサーバ送信時のcontent-typeヘッダ。
未指定時は"application/x-www-form-urlencoded"。
通常は特に指定する必要はない。
async非同期通信とするかどうか
(true:非同期通信(デフォルト) false:同期通信)
cache通信結果をキャッシュするかどうか
(true:キャッシュする false:キャッシュしない)
timeoutタイムアウト時間を指定する(ミリ秒)

$.ajaxのコールバック関数

Ajaxから結果が戻ると、状況に合わせたコールバック関数が呼び出されます。

【コールバック関数】
beforeSendAjax通信が行われる直前に呼ばれる
※falseを返すとAjax通信がキャンセルされる
successAjax通信が成功した時に呼ばれる ※非推奨
(引数に渡される値)
 第1引数:サーバが返した値
 第2引数:通信内容文字列 "success", "error", "timeout", "notmodified", "abort", "parsererror"
 第3引数:jqXHRオブジェクト
errorAjax通信でエラーが発生した時に呼ばれる ※非推奨
(引数に渡される値)
 第1引数:XMLHttpRequestオブジェクト
 第2引数:エラー内容文字列 "error", "notmodified", "parsererror", "timeout"
 第3引数:補足的な例外オブジェクト
completeAjax通信が完了した時に呼ばれる(success/errorの後) ※非推奨
(引数に渡される値)
 第1引数:XMLHttpRequestオブジェクト
 第2引数:エラー内容文字列 "success", "error", "timeout", "notmodified", "abort", "parsererror"

success, error, completeは非推奨です。
代わりに上記サンプルのように.done .fail .alwaysを使用してください。

解説

  • コールバック関数に渡されるオブジェクトには多くの情報が入っています。中身を確認したい時は、console.logで出力すると簡単に確認できます。
  • 通信結果がエラーとなってしまう場合は、以下ページを参考にしてみてください。
    [JavaScript] Ajaxの戻りステータスがエラーとなる場合の原因

スポンサーリンク

スポンサーリンク

-jQuery
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[jQuery] チェックボックスのオンオフ状態を取得する

jQueryでチェックボックスのオンオフ状態を取得するサンプルです。 サンプルソース 例)チェックボックスのチェック状態 ...

[jQuery] オブジェクトをマージする($.extend)

オブジェクトをマージするには、$.extend()を使用します。 サンプルソース 例1)obj1にobj2の値をマージす ...

[jQuery] マウスボタン押し上げイベントを設定する(.mouseup)

jQueryでマウスボタン押し上げイベントを記述するには、.mouseup()を使用します。 ※ボタン押し上げとは、押し ...

[jQuery] オブジェクト(連想配列)かどうか判定する($.isPlainObject)

オブジェクト(連想配列)かどうか判定するには、$.isPlainObject()を使用します。 サンプルソース 例)変数 ...

[jQuery] 要素をソートする(.sort)

要素をソートするには、.sortを使用します。 サンプルソース 例)ボタンを押すと、リストの中身を昇順でソートする [c ...

スポンサーリンク