#脱jQuery
AngularJSやVue.jsでは、DOMの直接操作は推奨されません。
そうなると、jQueryはAJAXでしか使わなくなります。
であれば、AJAX専用のライブラリにまかせてしまって、jQuery依存を外したくなってきます。
というわけで、AJAXだけをやってくれるライブラリとして、SuperAgentを導入してみましょう。
#SuperAgent
HTTPリクエストに特化したライブラリです。
Node.jsとブラウザ両方で使うことができます。
作者はExpress, Stylusの開発などで有名なTJです。
#superagentの良さ
かわいい。
#ブラウザでの導入方法
まず、下記URLにアクセスし、ファイル名superagent.jsとして名前をつけて保存してください。
https://wzrd.in/standalone/superagent@latest
scriptタグでsuperagent.jsをHTMLにロードした後、以下のコードを挿入します。
var request = window.superagent;
#Node.jsでの導入方法
普通にrequireすればよいです。
var request = require('superagent');
#GET
一番拡張性の高い、メソッドチェーンで書きます。
##素直なGET
request
.get(url)
.end(function(err, res){
console.log(res.text);//レスポンス
//レスポンスがJSONの場合
console.log(res.body);//ここにparse済みのオブジェクトが入る
});
クエリパラメータ付きGET
request
.get(url)
.query({user: "Taro"})
.end(function(err, res){
console.log(res.body);
});
もし、チェーンするスタイルがお好みでなければ、下記のようにも書けます。
request
.get(url, function(err, res){
if (err) throw err;
console.log(res.text);
})
#POST
##単純なPOST
request
.post(url)
.send({name: name, text: text})
.end(function(err, res){
console.log(res.body);
});
##x-www-form-urlencoded
request
.post(url)
.type('form')
.send({name: name, text: text})
.end(function(err, res){
console.log(res.body);
});
#その他
PUT, DELETEももちろん出来ます。
##PUT
request
.put(url)
.end(function(err, res){
// ...
});
##DELETE
request
.del(url)
.end(function(err, res){
// ...
});
#サンプル
以上のコードの動作チェックは、下記リポジトリで行っております。不具合等ありましたら、プルリクエストをお願い致します。
https://github.com/hashrock-sandbox/superagent-example
#参考資料
#もう一つの選択肢「Fetch API」
SuperAgentは便利ですが、今後のWeb標準化（Extensible Web）の展開を考えると、
whatwgで議論されている「Fetch API」を使うといいかもしれません。
Fetch APIについては下記サイトが詳しいです。
Fetch API 解説、または Web において "Fetch する" とは何か？ - Block Rockin’ Codes
Fetch APIは策定中ですが、polyfillが提供されているため、
現在でもSuperAgentと同様に利用することが出来ます。
例えば、GETであれば下記のように利用します。
require("whatwg-fetch");
fetch(url)
.then(function(res){
return res.text();
}).then(function(text){
console.log(text);
});
追記：Fetch API利用時の注意点
Fetch APIを使う時には「cookieを自動で送信しない」という点に注意が必要です。詳しくは下記ドキュメントを参照してください。
追記：さらにその他の選択肢
Promiseベースのaxiosというライブラリが話題になることが増えてきました。詳しくは下記記事を参照してください。