jQueryでAjaxを扱う
前提
- Google Chromeでしか検証していません
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"); });
これがベストプラクティス、というわけではないようですが、今回はとりあえずこの記述法で 実装します。
サンプルコード
AjaxでCSV、JSON形式のデータを取得し、出力するというサンプルをつくってみたいと思います。 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
が出力されます。