XMLHttpRequestを使って、JavaScriptとPHP間でHTTP通信をする

HTTP通信ってどうやって実装するのか全然知らないのでちゃんとやってみようと思い、HTML&JavaScript（クライアント）とPHP（サーバ）間で文字列を送受信するコードを書いてみました！

構成について
POSTメソッドで通信
GETメソッドで通信
1. JavaScript
2. PHP
今後やってみたいこと
参考サイト

構成について

PC内のローカル環境で通信を行います。

MAMPを使用して、PC内にローカルサーバを立てます（MAMPの導入手順および使用方法は割愛、インストールパスはC:\MAMPとします）。
自分の環境では、Apache Portに8080を指定しているため、PCからサーバ内のファイルにはhttp://localhost:8080/ファイル名でアクセスできます。

今回は以下の画像のように各ファイルを配置しました。

PC内の任意のフォルダに.htmlファイルと.jsファイルを置き、.phpファイルはWebサーバが公開するフォルダ（今回は”C:\MAMP\htdocs\”）に置きます。
JavaScriptからは、http://localhost:8080/xmlHttpRequest.phpでPHPファイルにアクセスできます。

なお、PHPへのアクセス時にCORS policyエラーが発生したため、httpd.conf（”C:\MAMP\conf\apache\httpd.conf”）に以下を追加しました。
変更後は再起動を忘れずに。

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

1 2	Header set Access-Control-Allow-Origin "*" Header set Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept"

POSTメソッドで通信

HTML

ほんとに最小限のコード。
送信用の文字列を入力するためのテキストボックスと、送信を実行するボタン、応答を表示するエリアです。

<html>
<head>
    <script src="xmlHttpRequest.js"></script>
</head>

<body>
    <label>文字を入力してください</label>
    <input id="inputTextBox" type="text" name="str">
    <button id="postButton" type="button">送信</button>
    <div id="response"></div>
</body>
</html>

<html>

<head>

</head>

<body>

<label>文字を入力してください</label>

</body>

</html>

見た目はこんな感じです。

JavaScript

先ほどのHTMLで、送信ボタンを押すとテキストボックスに入力された値をPHPに送信するコードです。
受け取った結果は画面上に表示します。

window.addEventListener('load', () => {
    // 送信ボタン押下
    document.getElementById("postButton").addEventListener('click', ()=>{
        let str = document.getElementById("inputTextBox").value;
        httpRequest(str);
    });
});

/**
 * HTTP通信
 * @param {String} str 入力文字列
 */
function httpRequest(str){
    let postData = new FormData();
    postData.append("str", str);
    let request = new XMLHttpRequest();
    
    // サーバから応答受信部
    request.onreadystatechange = function(){
        // レスポンスの受信完了
        if(request.readyState == 4){
            console.log(request.status);
            let data = request.responseText;
            // 受け取った文字列を画面に表示
            document.getElementById("response").innerText = data;
        }
    }

    // POSTメソッドで送受信
    request.open('POST', 'http://localhost:8080/xmlHttpRequest.php', true);
    request.send();
}

window.addEventListener('load', () => {

// 送信ボタン押下

document.getElementById("postButton").addEventListener('click', ()=>{

let str = document.getElementById("inputTextBox").value;

httpRequest(str);

});

/**

* HTTP通信

* @param {String} str 入力文字列

function httpRequest(str){

let postData = new FormData();

postData.append("str", str);

let request = new XMLHttpRequest();

// サーバから応答受信部

request.onreadystatechange = function(){

// レスポンスの受信完了

if(request.readyState == 4){

console.log(request.status);

let data = request.responseText;

// 受け取った文字列を画面に表示

document.getElementById("response").innerText = data;

}

// POSTメソッドで送受信

request.open('POST', 'http://localhost:8080/xmlHttpRequest.php', true);

request.send();

}

PHP

受信した文字列の前に「応答：」という文字列をくっつけて、応答を返します。

<?php 
    // リクエストを受信する
    $data = array();
    $data['str'] = htmlspecialchars($_POST['str'],ENT_QUOTES);

    $reply = "応答：".$data['str'];
    // 応答を送信する
    echo $reply;
?>

<?php

// リクエストを受信する

$data = array();

$data['str'] = htmlspecialchars($_POST['str'],ENT_QUOTES);

$reply = "応答：".$data['str'];

// 応答を送信する

echo $reply;

実際に動作させた結果が以下です。
「テスト」という文字を入力して送信し、応答として「応答：テスト」という文字列を受け取って画面に表示できました！Consoleの方にはレスポンスステータスコード（request.status）を出力しているのですが、ちゃんと「200 OK」が出力されています。

GETメソッドで通信

JavaScript

先ほどのコードで、XMLHttpRequestのopen()とsend()の部分を変更します。
GETメソッドでは、送信する値をURLの末尾にくっつけ、openでそのくっつけたURLを指定します。sendでは何も指定しません。

・POSTの場合
URL ⇒ http://localhost:8080/xmlHttpRequest.php

・GETの場合
URL ⇒ http://localhost:8080/xmlHttpRequest.php?キー=送信する値

POSTの時のコードで、POSTの部分をGETに書き換えれば行けるだろうと考えたのですがうまくいかず大変悩みました。送信する値がURLに入っているGETメソッドと、URLに入らないPOSTメソッドの動作の違いを考えるとなるほどな！と感動しました。実装的にはこういう違いになるんですね。

// GETメソッドで送受信
request.open('GET', `http://localhost:8080/xmlHttpRequest.php?str=${str}`, true);
request.send();

// GETメソッドで送受信

request.open('GET', `http://localhost:8080/xmlHttpRequest.php?str=${str}`, true);

request.send();

PHP

POSTの部分をGETに変更します。

$data['str'] = htmlspecialchars($_GET['str'],ENT_QUOTES);

1	$data['str'] = htmlspecialchars($_GET['str'],ENT_QUOTES);

上記の変更で、GETメソッドでも送受信ができました！

今後やってみたいこと

今回は文字列の送受信でしたが、今後は複数のフォームから入力した値を送信して、それを基にデータベースからデータを取り出し、その応答を返して結果をブラウザに描画する、ということをやりたいです。

参考サイト

XMLHttpRequestオブジェクトを使った非同期通信を行う

Ajax とは Asynchronous JavaScript + XML の略で、 Web サーバーとブラウザとの間で非同期通信を行う方法です。 Ajax の方法を利用することで、ページを切り替えることなくページの内容を書き換えることがで...

XMLHttpRequest (XHR)とPHPでFORMからデータを送ってみた – Hello World !

XMLHttpRequest 動作例(POSTまたはGET)について – propansystem プロパンシステム