クライアント側のhtmlファイル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style></style>
</head>
<body>
<input type="text" id="input_message">
<button onclick="PostString()">WebAPI実行</button>
<div id="result">ここにWebAPIの結果が入ります</div>
</body>
</html>
<script>
function PostString()
{
const xhr = new XMLHttpRequest();
//http://XXXXXXX.jp/test.php が今回呼び出すWebAPIを記述したphpファイル
xhr.open('POST', 'http://XXXXXXX.jp/test.php');
//文字列を引数にしてWebAPIを実行する(日本語も可能です)
const msg = document.getElementById("input_message").value;
xhr.send(msg);
xhr.onreadystatechange = function()
{
if(xhr.readyState === 4 && xhr.status === 200)
{
document.getElementById( "result" ).innerHTML = xhr.responseText;
};
}
}
</script>
XMLHttpRequestオブジェクトの
sendメソッドでデータをpostして
結果があれば
responseTextプロパティで取得します
サーバー側のphpファイル
test.php
<?php
echo date("Y/m/d H:i:s") . "</br>";
echo "送られた文字列は" . "</br>";
echo file_get_contents("php://input") . "</br>";
echo "です" . "</br>";
?>
file_get_contents("php://input")でpostされたメタデータが取得できるようです。
注意事項
htmlファイルをWEB上にホスティングせず、PCのローカルディスク上でブラウザで開いて実行しても、うまく動かないようです。
2021/1/23 追記
エラー原因はCORSエラーというものでphpの先頭に
header("Access-Control-Allow-Origin: *");
を追加することで回避できるようです。詳しくはセキュリティに関するものなのでご自身で調査ください。
ただし、別の問題もあることがわかりました。
https:// のサイト(GitHub Pagesなど)から http:// のサイトへのAPIはブロックされてしまいます。
当方は http:// のレンタルサーバー上のphpへWebApiをCallしようとしていたので困ってしまいました。( ﾉД`)ｼｸｼｸ…