生活情報オンライン

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

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

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

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


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


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

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


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

type: "GET",

GETかPOSTかを記載するところ。


url: "some.html",

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


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

送信するデータ。


success: function(msg){

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


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

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


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


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


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