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

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”)に以下を追加しました。
変更後は再起動を忘れずに。

POSTメソッドで通信

HTML

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

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

JavaScript

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

PHP

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

実際に動作させた結果が以下です。
「テスト」という文字を入力して送信し、応答として「応答:テスト」という文字列を受け取って画面に表示できました!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メソッドの動作の違いを考えるとなるほどな!と感動しました。実装的にはこういう違いになるんですね。

PHP

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

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

今後やってみたいこと

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

参考サイト

XMLHttpRequestオブジェクトを使った非同期通信を行う
Ajax とは Asynchronous JavaScript + XML の略で、 Web サーバーとブラウザとの間で非同期通信を行う方法です。 Ajax の方法を利用することで、ページを切り替えることなくページの内容を書き換えることがで...
XMLHttpRequest (XHR)とPHPでFORMからデータを送ってみた – Hello World !
XMLHttpRequest 動作例(POSTまたはGET)について
目次 1. XMLHttpRequest 動作例(POST)について2. XMLHttpRequest 動作例(GET)について XMLHttpRequest 動作例(POST)について XMLHttpRequestについて、実際に動作サン

コメント

タイトルとURLをコピーしました