プログラミングBlog

Node.jsでhttpメソッド② PUTとDELETE

前回の続きです。

HTMLのinputタグはPUTとDELETEをサポートしていないため、 XMLHttpRequest を使用します。 https://getbootstrap.jp/

XMLHttpRequestについて

developer.mozilla.org

今回は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