Blog

jQueryのよく使いそうなAjax関係のAPIをまとめてみました

2015.04.14Cat:jQuery デザイナー

ページの更新性を高めたり、

ページの読み込みを早くしたり、ページ操作のストレスを軽減したりする目的で、

Ajaxが使われる機会はとても増えてきています。

jQueryはこのAjaxの機能を、とても使いやすくしてくれます。

ただ、その記述方法は目的によっていくつかあり、

その記述方法は昔のjQueryのバージョンとは変化してます。

 

そこで、今のjQuery(1.8以降)でのAjaxの基本的な使い方をまとめてみました。

 

「$.ajax()」: Ajax全般を扱う

通信を行うファイルの形式を選ばない、汎用的な方法です。

jQueryの古いバージョンから使うことの出来る方法ですが、

その記述ルールが、バージョンを経るごとに変化しています。

以前はsuccess, error, completeというオプションで処理を行っていたものが、

現在はsuccess→.done()、error→.fail()、complete→.always()というjQuery.Deferredの記述形式を用いたものに変化しています。

.done()、.fail()の代わりに、.then(function(){}, function(){})という記述の仕方も可能で、

昔の$.ajax()の記述方法と比べると、若干シンプルになっています。

オプションも基本はURLだけを指定していればよく、ファイル形式などは自動で判別してくれます。

 

「$.get()」:$.ajax()の簡略型

エラーの情報などを重視しない場合は、こちらの書き方で十分です。

プロパティが少ないこと以外は、$.ajax()と同じです。

 

「$(セレクタ).load()」:要素に外部のHTML(PHP)の要素を読み込む

特定の要素内に、外部ファイルの特定要素を読み込みたいときなどは、こちらの書き方がシンプルで使いやすいです。

セレクタで指定した要素内に、.load()の第1引数として指定したURLとそのHTML内のセレクタで指定された要素を読み込みます。

$.ajax()や$.get()だと少し複雑な処理が必要となる、

外部ファイルからの特定要素の抽出を自動でしてくれるので、

とても便利です。

 

「$.getJSON()」:JSONを読み込む

JSONファイルの読み込みならこちらの方法が断然シンプルで扱いやすいです。

 

「$.getScript()」:JavaScriptを読み込む

JavaScriptファイルを動的に読み込むときはこちらが便利です。

 

 

こうやってまとめてみると、jQueryの昔のバージョンと比べると、

かなり記述に必要な項目が簡略化されて、

Ajaxが扱いやすくなっていることがわかりました。

 

用途による使い分けもわかりやすくなっていますので、

是非参考になさってください。

 

参考サイト

jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜 – Hack Your Design!

jQuery.ajax() | jQuery API Documentation

$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO

jQuery.get( url, data, callback ) – jQuery 日本語リファレンス

jQuery.getJSON( url, data, callback ) – jQuery 日本語リファレンス

jQuery.getScript( url, callback ) – jQuery 日本語リファレンス

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ