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のバージョンを取得する($.fn.jquery)

jQueryのバージョンを取得するには、$.fn.jqueryを使用します。 構文 (jQueryのバージョンを取得する ...

[jQuery] 指定した要素の次の要素を取得する(.next)

指定した要素の次の要素を取得するには、.next()を使用します。 サンプルソース 例)要素(#ts li)の3番目の要 ...

[jQuery] 画像読込み失敗時に代替画像を表示する

画像読込み失敗時に代替画像を表示するサンプルです。 サンプルソース 例)画像aa.png読込みエラー時には、bb.png ...

[jQuery] 子要素を取得する(.find)

指定した要素の子要素(孫要素以下も含む)を取得するには、.find()を使用します。 サンプルソース 例)定義リストの子 ...

[jQuery] 使用しているブラウザのサポート状況を取得する($.support)

ブラウザのサポート状況を取得するには、$.supportを使用します。 サンプルソース 例)ボタンを押すと、$.supp ...

スポンサーリンク