生活情報オンライン

ITエンジニアが役立つ情報を発信します。

ajaxのコードを書いて説明していくよ

以下の記事を書いてからしばらく経ちましたが、今はさらに簡単に書けるようになったようです。
おじさんが若い時はね$.ajax()のオプションでsuccessとかerrorとか指定していたんだよ(追憶) - Qiita

上記の記事でいうと、私はすっかりおじさんになってしまいましたね。若い方々には、私たちと同じ苦労をしないでほしいので、ぜひ新しい書き方で書くことをお勧めします。
過去の想いでとして、以下の記事は残しておきます。



以前から書こうと思っていた「ajaxソースコード」についての記事を書きます。今ではすっかり手に馴染んでスラスラかけるようになったajaxですが、その存在すらを忘れていた時期もありました。

somegoro.hatenablog.com
やらないと忘れてしまいますよね。当時は働いていなかったのでIT知識はすっからかんになっていました。完全に忘れたところから思い起こして書いたので、初心者にはぴったりかと思います。ajax初心者の方はまずこの記事を見てから本記事を見ると理解がスムーズに進むものと思われます。


さて、上記の記事でも記載されているとおり「ajax」は基本的に非同期通信のために使用します。同期通信として使用することも出来ますが非推奨となっています。非同期通信について理解がまだな方はこちらの記事を参照されたい。
somegoro.hatenablog.com


では、概要も概念も理解したところでソースコードの解説に入ります。次のソースコードでajax通信ができます。

$.ajax({
   type: "GET",
   url: "some.html",
   dataType : 'json',
   data: { name: "John", location: "Boston" },
   success: function(msg){
     alert( "メッセージ「" + msg + "の受信成功" );
   }
 });


もちろん非同期で通信します。コードをそれぞれ見ながら解説していきます。

type: "GET",

GETかPOSTかを記載するところ。省略可能で省略するとGETになる。


url: "some.html",

通信先を記載するところ。ここでサーバの指定もすることができる。


data: { name: "John", location: "Boston" },

送信するデータ。


dataType : 'json',

サーバーから期待するデータの形式。


success: function(msg){

通信が成功したら実行される関数。


jQueryのajax仕様はコロコロ変わるので、詳細についてはここを確認すると良いです。基本的な考え方は変わらないので、どこかのタイミングでしっかり覚えるとそのあと変更が入ったとしても簡単に覚えることが出来ます。ですので、すぐに仕様が変わるから意味がないなどと言わずに覚えてしまいましょう。
jQuery.ajax() | jQuery API Documentation

全部英語なので解読には骨が折れるでしょうが、確実にあなたの能力を伸ばすことでしょう。


日本語で見れるサイトはこちらだが、少々情報が古いような気もする。
jQuery.ajax(options) - jQuery 日本語リファレンス
$.ajax() | jQuery 1.9 日本語リファレンス | js STUDIO


こちらはIBMの記事。
こちらもかなり古い記事。なのですが、ajaxの確信をついている気がします。なので、これは結構お勧めで5回程度読めばajaxについての理解がかなり進むでしょう。
Ajax をマスターする: 第 1 回 Ajax の紹介


以上、ajaxコードの説明でした。jQueryを用いて学びましたが、簡単でしたね。

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

  • 作者:山田 祥寛
  • 出版社/メーカー: 技術評論社
  • 発売日: 2016/09/30
  • メディア: 大型本