【Javascript】今更だけど、ajaxするにはfetchでいいよ話。$.ajaxは要らないしxhrは使わなくてok。getもpostもできるよ。

今更だけどJavascriptでAjaxするならfetchでいいよね話

未だに結構jQueryによる\$.ajaxを使った実装が公開されているのを見るけれど、fetchでokだよねという今更な内容です

既存プロジェクトにjQueryが入っている場合はもちろん$.ajaxで全然okok

また、モダンでないブラウザも対応する必要があるのであれば$.ajax又はaxiosなどを使った方が良い

fetchでget

getの場合、使い方は簡単！こうです。

fetch("./api/get-test.php")

fetch の第一引数にgetしたい, 叩きたいAPIなどのurlをセットしてあげればok

fetch先のurlが仮にjsonを返却してくる場合は、返却値をjsonにパースしてあげる必要があるので、実際は下記のような形が1セットになるかと思います

fetch("./api/get-test.php", ).then(res=> res.json())

response.json()してあげると、無事jsonがjavascriptのオブジェクトとして取り出すことができます

実際に値をとるならこんな感じ↓

const resFromGetTest = await fetch("./api/get-test.php", ).then(res=> res.json())

console.log(resFromGetTest)

then().then()でもいいけど、async/awaitでももちろんok

参考までに、今回作った検証用のテストapi(./api/get-test.php)は下記のよなめっちゃシンプルなjsonを返却するphpになってます

<?php
header("Content-Type: application/json; charset=utf-8");

$arr = array();

$arr["myresponse"] = "my-response-value";

echo json_encode($arr);

?>

こんな感じです

fetchでpost

もちろんpostもできて、下記のような感じになります

const res= 
  await fetch("http://tasokori.net/webapps/utils/create-thumb/doResizeApi.php", {
    method: "POST",
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
    },
    body: Object.keys(imgResizeBody).map((key)=>key+"="+encodeURIComponent(imgResizeBody[key])).join("&")
  })

fetchはオプション無しだとデフォルトでGETしてしまうので、methodでPOSTをセットしてあげます

他、headersで色々設定できます

body には送信する値をセットできます(もちろんbodyはjsonでも送信できます)

こんな感じです

参考