はじめに
Javascriptで、動的に外部コンテンツをロードする際、ajaxしますよね。
ネットで「Javascript ajax」なんて調べると、大体jQueryでajaxする方法が出てきます。
が、最近はjQuery無しでクールにajaxするfetchというAPIがあるようなので、その話題です。
(もちろん、jQuery無しでもXMLHttpRequestをJavascriptで書けばいいんですけど、長くなりがちなので私は好きではありません)
jQueryを使用したajax
このajaxですが、広く普及している方法としては、jQueryを用いて下記のようにajaxコールすることが多いと思います。
[javascript] $.ajax({type: "GET",
url: href,
data: jQuery.param({
type: type,
msg: msg,
msg2: msg2,
msg3: msg3
}),
dataType: "json",
success: function(data){
console.log("Send error info Success!!");
console.log(data);
},
error: function(data){
console.log("Send error info Failure… Because:");
console.log(data);
}
});
[/javascript]
よく見るパターンですよね。
jQuery.ajaxメソッドで、各種パラメータを引数に渡して…
もちろん、jQueryをプロジェクトで採用している場合はこれで良いと思います。
しかし、jQueryを使用していないプロジェクトの場合は、どうしようか…と悩むことしばしば。
そんなあなたにfetch
jQueryは使ってないし、XMLHttpRequest使うのもなぁ…
とそんなあなたに、fetchです。
fetchの基本的な使い方
下記の様に使用します。
[javascript] fetch("fetchjson.php", {…}).then(function(res){ … }), // ajax成功時
.then(function(err){ … }) // ajax失敗時
[/javascript]
第1引数に、GET先のURLをセットします。
第2引数は省略可能で、詳細なパラメータを指定できます。
fetchは、thenable(promiseオブジェクト)なので、メソッドチェーンしてGETが成功した場合の処理を書いていけます。
まあ簡単！
取得データの扱い方
「fetchが簡単そう、というのは分かったけど、JSONとか画像とか、どうやって捌けば良いのかしら…」
はい。それ用のメソッドを使って変換します。
JSONとして値を取得する
fetch後のthenした時に受け取るオブジェクトが、jsonに変換するためのメソッドを持っているので、それを使用します。
[javascript] fetch("fetchjson.php").then(res=> res.json())
.then(obj=> console.log(obj))
[/javascript]
jsonメソッドはthenableなので、続けてthenして後は煮るなり焼くなりできます。
バイナリファイル(画像など)として値を取得する
JSONの場合と似たような感じで、今度はblobメソッドを使用します。
[javascript] fetch("img.png").then(res=> res.blob())
.then(obj=> console.log(obj))
[/javascript]
テキストとして値を取得する
textメソッドを使用します。
[javascript] fetch("meibo.txt").then(res=> res.text())
.then(obj=> console.log(obj))
[/javascript]
パラメータをつけてfetchする
jQueryでは、dataというパラメータに値をセットしていましたが、fetchでは下記のようにパラメータを渡します。
GETの場合
URLにパラメータをくっ付けて渡します。
[javascript] fetch("fetchjson.php?myparam=hogehoge&myparam2=fugafuga").then(res=> res.json())
[/javascript]
POSTの場合
fetchの第2引数にmethod, body, headersを与えて、bodyプロパティにパラメータをセットします。
[javascript] fetch("fetchjson.php", {method: "POST",
headers : new Headers({"Content-type": "application/json"}),
body: JSON.stringify({myparam: "hogehoge", myparam2: "fugafuga"})
})
.then(res=> res.json())
[/javascript]
実際に試してみた
index.html (メイン側のhtml(javascript含む))
[javascript] <html><head>
<title>fetch test</title>
<script>
var doFetch = function(){
fetch("img.png")
.then(res=> res.ok ? res.blob() : null)
.then(obj=> {
if(obj){
document.getElementById("test-img").src = URL.createObjectURL(obj);
}
});
}
var doFetchJson = function(){
fetch("fetchjson.php")
.then(res=> res.ok ? res.json() : {} )
.then(obj=>{
console.log(obj);
document.getElementById("json-response").innerHTML = obj.msg;
});
}
</script>
</head>
<body>
<div>
<button onclick="doFetch()">PUSH</button>
<img id="test-img" />
</div>
<div>
<button onclick="doFetchJson()">PUSH JSON</button>
</div>
</body>
</html>
[/javascript]
fetchjson.php(ただJSONを返却するだけのphp)
[php] <?php $if_return = array("return_cd"=> 0, "msg"=> "this is message!!");header("Content-Type: application/json; charset=utf-8");
echo json_encode($if_return);
?>
[/php]
ファイル構成は、
- /
- index.html
- img.png
- fetchjson.php
こんな感じです。
で、index.htmlをローカル環境(apache立ち上げて)で叩いてみました。
それぞれのボタン押下で、画像ファイル取得&表示, JSON取得&表示が特に問題無くできました。
おわりに
その他細かい点は、本家のMDNを見てください。
ちなみに！
fetchのサポート状況は、2017/06/21現在
- Chrome 42以上
- Firefox 39以上
- IE 未サポート
- Safari 未サポート
- モバイル系 全未サポート
となっています。
ので…うん。代わりにとか言ってしまいましたが…jQueryの完全代替になるにはもうしばらく時間がかかりそうです。
c
