前回はHTTPリクエストをツールを使って送信し、FlashAirに搭載されているＷｅｂサーバーからのレスポンスを確認しました。今回は、FlashAirがAPIとして用意しているCGIをHTML上から呼び出して、FlashAirの情報を取得してみたいと思います。では早速FlashAirのAPIを使用してFlashAirのファームウェアバージョン情報を取得してみましょう！
HTMLソースは以下になります。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>FlashAir内蔵のウェブサーバ機能を試す その2</title>
<script>
function getFWVer(event){
var xhr = new XMLHttpRequest();
var pNode = document.getElementById("ver_text");
pNode.innerHTML = "";
xhr.open("GET", "http://myflashair/command.cgi?op=108");
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200){
pNode.innerHTML = xhr.responseText;
}
};
xhr.send(null);
}
// window の読み込み完了イベント監視
window.addEventListener("load", function(event) {
var button = document.getElementById("btn");
// クリックイベントを監視
button.addEventListener("click", getFWVer, false);
}, false);
</script>
</head>
<body>
<div id=box>
<button id="btn">ファームウェアバージョン取得</button>
<p id="ver_text"></p>
</div>
</body>
</html>
上記のソースコードを任意のファイル名でFlashAirのSD_WLANディレクトリ配下に保存し、ブラウザからアクセスしてみてください。
ソースコード６～２９行目はJavaScriptで記述されており、13行目でAPIであるCGIをGETメソッドで呼び出しています。
AJAXのXMLHttpRequest()関数でFlashAirのWebサーバーと非同期通信を行っています。HTMLファイルをFlashAirに保存する理由ですが、XMLHttpRequest()関数を使用する場合クロスドメイン制約(RFC6454)があり同じホストから呼び出さないとサーバーとの通信うまくいかない場合があるからです。
うまくいくと以下のようなボタンがブラウザに表示され、ボタン押下するとAPIが呼び出されて、ファームウェアのバージョンを取得し表示します。
次回はconfig.cgiを使ってFlashAirのコンフィグの設定にチャレンジしたいと思います。