XMLHttpRequestによる非同期通信

こんばんは。きわさです。

以前、FormデータをPOSTする、について書きましたが、
今回は非同期通信について備忘録です。

XMLHttpRequest

XMLHttpRequestはブラウザ上でサーバとHTTP通信を行うためのAPIです。
このように使用します。

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には送信するデータを設定します。

サーバ側処理

サーバ側は特に特別なことはないです。
前述の例で送信したデータを取得し、返す場合はこのようになります。

<?php
$data = "";
if(!empty($_POST['data'])) {
    $data = $_POST['data'];
}
echo $data;
?>

data=testを送信したので、$_POST[‘data’]で’test’を取得し、echo $dataで返しています。
これにより、responseTextには’test’が格納されます。

と、ざっと書いてしまいましたが、こんな感じです。
formでPOSTするときと違い、ページの書き換えを行わずに通信できるので便利です。