XMLhttpRequest -> fetch

プログラミング

ひっさしぶりにAjaxのコードを書こうとあれこれみていて、また知らなかったことが出てきた。

fetch

新しいHttpリクエストをあげるJavascriptの命令。

イマドキらしくpromiseを継承しているから、コールバック関数じゃなくthenで待つ。

先日書いたように、非同期通信をjavascriptでやるにはpromiseの理解が必須となってます。

で、ここからが本論。

ネットでxmlhttprequestを話題にしている人の90%くらいはjqueryのAjaxを使って理解できたことにしている。

xmlhttprequestで書いて理解しているわけじゃない。

だからJQueryのAjaxの中身が実はfetchに代わっていても意味はわからないまま使い続けるだろう。

それが私みたいにwebアプリをいつも書いているわけじゃない人間ならいいけど、仕事で毎日のようにwebアプリを書いている人間だったらみっともないことになるよね、と思う。

さて使い方サンプル。hiddenパラメーターにメアドをセットしてある。ボタン押したらfetchでサーバーに飛ばして結果をテキストで受け取って、innnerHTMLで表示するだけ。エコーバックみたいなもの。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Async Test</title>
</head>
<body>
<p>Hello World</p>
<form name="fm">
<input type="hidden" name="mail" value="hogehoge@gmail.com">
<input type="button" name="submit" value="警告" onClick="asyncDo();" />
</form>
<div id="result"></div>
<script>
function asyncDo(mail){
	var mail = document.fm.mail.value;
	fetch('http://localhost/async.php?name='+mail)
		.then(response => {
			return response.text();
		})
		.then(mail => {
			document.getElementById("result").innerHTML = mail;
		});
};
</script>
</body>
</html>

サーバーのPHP側ももらったデータをprint文で返すだけ。

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST"){
	$name = isset($_POST["name"]) ? $_POST["name"] : "unknown";
}else{
	$name = isset($_GET["name"]) ? $_GET["name"] : "unknown" ;
}
print($name);

今回のサンプルはブラウザーからリクエストがあがったらサーバー側でお仕事してもらって結果のみを返すものだから、ワタシ的にはこれでプロトタイピング終了。

fetchってすごい便利じゃないですか?

コメント