HTTP通信ってどうやって実装するのか全然知らないのでちゃんとやってみようと思い、HTML&JavaScript（クライアント）と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"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>見た目はこんな感じです。
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();
}PHP
受信した文字列の前に「応答：」という文字列をくっつけて、応答を返します。
<?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();PHP
POSTの部分をGETに変更します。
$data['str'] = htmlspecialchars($_GET['str'],ENT_QUOTES);上記の変更で、GETメソッドでも送受信ができました！
今後やってみたいこと
今回は文字列の送受信でしたが、今後は複数のフォームから入力した値を送信して、それを基にデータベースからデータを取り出し、その応答を返して結果をブラウザに描画する、ということをやりたいです。
参考サイト
コメント