こんばんは。きわさです。
以前、FormデータをPOSTする、について書きましたが、
今回は非同期通信について備忘録です。
XMLHttpRequest
XMLHttpRequestはブラウザ上でサーバとHTTP通信を行うためのAPIです。
このように使用します。
1 2 3 4 5 6 7 8 9 | var xhr = new XMLHttpRequest();xhr.open('POST', 'test.php', true);xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.onreadystatechange = function() { if(xhr.readyState == 4) { alert(xhr.responseText); }}xhr.send("data=test"); |
open
open(method, url, async)でリクエストタイプやアクセス先を設定します。
methodではPOSTやGETなどのリクエストタイプを指定します。
urlは送信先のphpなどのファイルを指定します。
asyncは非同期通信の場合はtrueを指定します。
setRequestHeader
setRequestHeader(header, value)でリクエストヘッダを設定します。
headerではリクエストに追加したいヘッダの種類を文字列で指定します。
valueは値を文字列で指定します。
onreadystatechange
onreadystatechangeは通信状態(readyState)が変化したときに実行する関数を指定します。
readyStateが4で、通信が完了したことを表します。
responseText
responseTextには、受信したレスポンスの文字列が入っています。
send
send(data)で通信を開始します。
dataには送信するデータを設定します。
サーバ側処理
サーバ側は特に特別なことはないです。
前述の例で送信したデータを取得し、返す場合はこのようになります。
1 2 3 4 5 6 7 | <?php$data = "";if(!empty($_POST['data'])) { $data = $_POST['data'];}echo $data;?> |
data=testを送信したので、$_POST[‘data’]で’test’を取得し、echo $dataで返しています。
これにより、responseTextには’test’が格納されます。
と、ざっと書いてしまいましたが、こんな感じです。
formでPOSTするときと違い、ページの書き換えを行わずに通信できるので便利です。