jQueryを知らない人のためのAjax解説

2017年末に書いた記事のアーカイブです。

・Ajaxとは～機能偏～

簡単に言えば「ページを更新することなくページの一部の状態を変化させる技術」です。Googleマップでマップを縮小すると周りが灰色になってしまうがすぐに地図が表示されるのも、郵便番号を入力すると住所欄がある程度自動で埋まるのも、このAjaxのおかげなのです。これがなければ、Googleマップで視点を移動するたびにページが更新されて非常に使いにくくなってしまいます。

・Ajaxとは～技術編～

Ajaxは複数の技術を合わせて実装されていますが、主に知っておくべきところは二つです。まず、AjaxのコードはjQueryで書くのがポピュラーです。jQueryとは、JavaScriptのよく使う機能をまとめて楽にJavaScriptをかけるようにしたもののことです。もう一つは、Ajaxの役割は、要求に対してデータを送受信することだということです。例えば、マップ縮小に対して周辺の地図情報を返すといった具合です。ここで重要なのは、この返すデータは別のファイルで用意する必要があるという点です。このファイルは何でも良いわけではなく、HTMLやXML、JSONなどで書かれている必要があります。

・Ajaxとは～コード偏～

では、実際にAjaxのコードを見てみましょう。

$.ajax({
url: 'json_data',
type:'GET',
dataType: 'json',
success:

function(data) {
alert("ok");
},

});

上から順に説明していきましょう。$.ajax({});ですが、いきなりJavaやC、さらにはJavaScriptとも異なった感じがします。実は、これが先ほど紹介したjQueryの書き方なのです。AjaxはjQueryの機能のうちの一つなのです。実際、$.ajaxはjQuery.ajaxと書いても同じように動作します。$.は「jQueryの」という意味なのです。次に中身を見ていきましょう。url:は用意したデータのurlを書くところです（例ではテキトーに書いています）。type:はデータを受け取るか、送るかを書きます。今回はGETなのでデータを受け取ります（逆はPOST）。dateType:はurl:で指定したデータの型を書いておきます（例ではjson）。success:は、データを正常に受信（または送信）できたときに実行する内容を記述します。今回はコードをなるべく簡単にするためにokと表示するだけにしていますが、実際には送受信したデータに関連した内容が記述されます。

まとめ

今回は非常に初歩的な部分にしか触れませんでした。しかし、これを把握するだけでも筆者は苦労しました（調べ方が悪かったのかもしれませんが）。いきなりAjaxと聞いて調べただけでは、正直なところ全く使いこなせないと思います。しかし、Ajaxは主にjQueryで書かれていて、他のデータを扱って何かをするための技術だとわかっているだけでもずっと学びやすくなると思います。最後に、学習の参考になるかもしれないサイトを紹介しておきます。もちろんこれだけではありませんが、少しでもスムーズな学習につながれば幸いです。

atmarkit @IT いまさら聞けない、"Ajax"とは何なのか？ : http://www.atmarkit.co.jp/ait/articles/0708/23/news134.html

jQuery 日本語リファレンス ajax : http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/