Node.jsでhttpメソッド② PUTとDELETE
前回の続きです。
HTMLのinputタグはPUTとDELETEをサポートしていないため、 XMLHttpRequest を使用します。 https://getbootstrap.jp/
XMLHttpRequestについて
今回はDELETEとPUTメソッドが実際にサーバー側に送信ができているかの
確認のみ行いたいと思います。Google Chromeの検証ツール、Networkを使用。
POSTとPUTとPUTCHの違い
POST
リソースの作成、送信を行う。
PUT
PUTは更新対象のリソースが無い場合は新しく作成する。
更新対象のリソースが存在する場合はすべて置換(更新)を行う。
何度リクエストを繰り返しても同じ結果となる特徴を持っている。
PUTCH
PUTCHは部分的な置換(更新)を行う。
どのような置換(更新)を行うかの選択ができる。
PUTとDELETEのハンズオン
index.js
const http = require('http'); const fs = require('fs'); const hostname = "127.0.0.1"; const port = 3000; const indexhtml = fs.readFileSync('./index.html', 'utf-8'); const sendjs = fs.readFileSync('./send.js', 'utf-8'); const server = http.createServer(function (request, response) { switch (request.url) { case "/": response.end(indexhtml); break; case "/?get=getValue": response.end(indexhtml); break; case "/user": response.end(indexhtml); break; case "/send.js": response.end(sendjs); break; case "/delete": response.end(indexhtml); break; case "/put": response.end(indexhtml); break; default: break; } }); server.listen(port, hostname, () => { console.log(`Server running at http://${hostname}:${port}/`); });
send.js
var sendDeleteMethod = document.getElementById('sendDeleteMethod'); sendDeleteMethod.addEventListener('click', function () { var request = new XMLHttpRequest(); request.open("DELETE", "/delete", true); request.send("delete"); }); var sendPutMethod = document.getElementById('sendPutMethod'); sendPutMethod.addEventListener('click', function () { var request = new XMLHttpRequest(); request.open("PUT", "/put", true); request.send("put"); });
new XMLHttpRequest()で生成。
openでメソッドとURLと真偽値で非同期か同期を選択。
sendでサーバー側に送信します。
Deleteボタン押下時はDELETEメソッドを生成後にサーバーへ送信。
Putボタン押下時はPUTメソッドを生成後にサーバーへ送信。
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form action="/" method="GET"> <input name="get" value="getValue"> <input type="submit" value="GET送信" /> </form> <form action="/user" method="POST"> <input name="post" value="postValue"> <input type="submit" value="POST送信" /> <input type="hidden" name="_method" value="put / delete"> </form> <button id="sendDeleteMethod">delete</button> <button id="sendPutMethod">put</button> <script type="text/javascript" src="./send.js"></script> </body> </html>
値の更新や、削除は次回行う予定。
参考サイト
XMLHttpRequest XMLHttpRequest についてのメモ - Qiita
POST、PUT、PUTCHの違い architecting.hateblo.jp