WebEngine

だらだらと綴る技術系メモ

jQueryでAjaxを扱う

前提


Ajaxを使うメリット

非同期通信ができることです。 具体例を挙げると

  • ユーザのストレスを軽減できる
  • サーバへの負荷を軽減できる

というメリットがあります。もちろんデメリットもありますが、ほかのサイトでいろいろ考察されているので、 ここでは流します。


いろいろ書き方があるみたいだけど

ajaxで検索すると、結構いろんな書き方が紹介されています。

$.ajax({
    url: "test.html",
    success: function(data) {
       console.log("success");
    },
    error: function(data) {
       console.log("error");
    }
});
$.ajax({
    url: "test.html",
}).success(function(data) {
    console.log("success");
}).error(function(data) {
    console.log("error");
});

調べてみると上記2つの書き方は旧式の書き方のようです。
今回は下の書き方で統一します。

$.ajax({
    url: "test.html",
}).done(function(data) {
    console.log("success");
}).fail(function(data) {
    console.log("error");
});

これがベストプラクティス、というわけではないようですが、今回はとりあえずこの記述法で 実装します。


サンプルコード

AjaxCSVJSON形式のデータを取得し、出力するというサンプルをつくってみたいと思います。 HTMLファイルにjavascriptの関数が入っていたりするので、よかったらリファクタリングにも挑戦してみてくださいね。(人任せ)

1.index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ajax</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="script.js"></script>
  </head>
  <body>
    <input type="button" onClick="output(0)" value="output_data0">
    <input type="button" onClick="output(1)" value="output_data1">
    <input type="button" onClick="output_json()" value="output_data_json">
    <div id="output_zone"></div>
  </body>
</html>


2.script.js

function output(num) {
  clear();

  $.ajax({
    url: "data" + num + ".csv"
  }).done(function(result) {
    var tmp_ary = result.split("\n");
    // console.log(tmp_ary);
    for (var i = 0; i < tmp_ary.length; i++) {
      $("#output_zone").append(tmp_ary[i]).append("<br>");
    }
  }).fail(function(data) {
    console.log(data);
  });

}

function output_json() {
  clear();

  $.getJSON("data.json", function(json) {
    for (var i = 0; i < json.student.length; i++) {
      var student = json.student[i];
      $("#output_zone").append(student.name + " : " + student.age).append("<br>");
    }
  });

}

function clear() {
  $("#output_zone").empty();
}


3.data0.csv

Takeda,20
Sakurai,45
Hashimoto,36


4.data1.csv

Takeda Yuri, woman
Sakurai Kaoru, woman
Hashimoto Takuya, man


5.data.json

{"student" : [
  {
    "name" : "Takeda",
    "age" : 20
  },
  {
    "name" : "Sakurai",
    "age" : 45
  },
  {
    "name" : "Hashimoto",
    "age" : 36
  }
]}


HTMLファイルであるindex.htmlを、ブラウザにドラッグアンドドロップとかしても動きません。これはクロスドメイン制約があるためです。


ドキュメントルートに設置するか、PHPのビルトインサーバを立てるかして、http://localhost/hogehoge/~というような感じでアクセスしましょう。

左のボタンを押せばdata0.csvの情報が、中央のボタンを押せばdata1.csvの情報が出力されるはずです。
そして、右のボタンを押せばJSON形式であるdata.jsonが出力されます。