akiyoko blog

akiyoko の IT技術系ブログです

トップ > JavaScript > jQuery で Ajax を使ってみる

jQuery で Ajax を使ってみる

JavaScript

jQuery で Ajax を使う場合に、ネットでちょっと調べると書き方がいろいろあって、イケてる感じに書くには結局どうしたらいいんだ？といつもモヤモヤしていました。


そんなモヤモヤを払拭するために、モダンな jQuery.ajax() の書き方について、今回少しまとめてみたいと思います。

jQueryの基本書式

まず、原理原則の書き方はこうなります。

$(document).ready(function() {
  // Your code here.
});

本家の Learning Center にも、そのように書いてありますね。

次に、「document」は省略できるので、こう書くこともできます。

$().ready(function() {
  // Your code here.
});

さらに、「ready」も省略して、最終的にこう書くことができるわけです。

$(function() {
  // Your code here.
});

ここ に解説されていたので、気になる人は一読を。



なお、「jQueryの $関数」を使わず、無名関数を即時実行することで ↓ のようにも書けるわけですが、jQueryを使うのであれば、$関数の曖昧さを回避するためにも ↑ のように書くのがよいと思われます。

(function() {
  // Your code here.
})();

参考



というわけで、jQuery の CDN を使って、HTML5を ↓ のように書くことができます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>タイトル</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <script>
  $(function() {
    // Your code here.
    alert(1);
  });
  </script>
</body>
</html>

参考


なお、jQuery 1.x系と 2.x系の違いについては以下をチェックしてみてください。

1.X系2.X系の違い

1.x 系は IE8 以前をサポートするレガシーブラウザ向けのバージョン、
2.x 系は IE8 以前のサポートは捨てて、高速に安定して動作させることを目指したバージョン、という認識で良いのではないでしょうか。
制作環境に合ったバージョンをダウンロードして下さい。

「jQuery本体のダウンロードと1.X系2.X系の違いと1.9系以降の注意点など」より



ajax() の使い方

Ajax通信をする部分の書き方ですが、これはサンプルコードを見た方が早いですかね。

ただし、
「jQuery モダンAjaxな書き方を目指して　～Deferredを使ったAJAX～ - Hack Your Design!」で書かれているように、

$.ajax({
    url: "ajax.html",
    success: function(data) {
       alert('success!!');
    },
    error: function(data) {
       alert('error!!!');
    }
});

や

$.ajax({
    url: "ajax.html",
}).success(function(data){
    alert('success!!');
}).error(function(data){
    alert('error!!!');
});

といった書き方は、若干古いバージョンの jQuery に合わせた書き方だそうです（後方互換があるので動くことは動くのですが）。


そういうわけで、モダンな書き方は ↓ のようになります。

$.ajax({
    url: "ajax.html",
}).done(function(data){
    alert('success!!');
}).fail(function(data){
    alert('error!!!');
});


なお、
jQuery 1.5 以降であれば、headersプロパティでヘッダを指定することもできます。


参考




　

まとめのサンプル

最後にまとめとして、Parse.com のAPIにアクセスしてJSONデータを取得するような JavaScriptコードを書いてみたいと思います。


例えば、Parse.com のユーザ登録APIには、以下の curlでアクセスすることができるのですが、

$ APPLICATION_ID=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
$ REST_API_KEY=yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
$ curl -X POST \
    -H "X-Parse-Application-Id: $APPLICATION_ID" \
    -H "X-Parse-REST-API-Key: $REST_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{"username": "testuser", "password": "testpass"}' \
    https://api.parse.com/1/users
{"createdAt":"2014-07-20T18:10:47.065Z","objectId":"i2S9tep64y","sessionToken":"730526YgYeK7GsibIppXad1NS"}

これを、jQuery.ajax() で書き換えてみます。


コードはこのような感じになります。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>タイトル</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
  <script>
  $(function() {
    $.ajax({
      url: 'https://api.parse.com/1/users',
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      headers: {
        'X-Parse-Application-Id': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        'X-Parse-REST-API-Key': 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy',
      },
      data: '{"username": "testuser", "password": "testpass"}',
    }).done(function(data) {
      console.log(data);
      alert('success!');
    }).fail(function(data) {
      console.log(data.responseJSON);
      alert('error!');
    });
  });
  </script>
</body>
</html>


コンソールへの出力（成功時）

Object { createdAt: "2014-07-20T17:54:43.048Z", objectId: "EhkOBPlrkw", sessionToken: "luMew7sJfVIxxM3njUO1dcOSB" }

コンソールへの出力（失敗時）

Object { code: 202, error: "username testuser already taken" }




　

その他の参考

jQueryのセレクタ

and条件とor条件

フォームデータの serialize

JavaScriptデバッグ時の小ワザ



JavaScript の逆引きレシピ。第8章で Ajax 通信についてまとまっています。

JavaScript逆引きレシピ jQuery対応 (PROGRAMMER’S RECiPE)

JavaScript逆引きレシピ jQuery対応 (PROGRAMMER’S RECiPE)


こちらはお手頃価格。Kindle版のみ。

jQuery入門道場

jQuery入門道場