前回はHTTPリクエストをツールを使って送信し、FlashAirに搭載されているWebサーバーからのレスポンスを確認しました。今回は、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ディレクトリ配下に保存し、ブラウザからアクセスしてみてください。
ソースコード6~29行目はJavaScriptで記述されており、13行目でAPIであるCGIをGETメソッドで呼び出しています。
AJAXのXMLHttpRequest()関数でFlashAirのWebサーバーと非同期通信を行っています。HTMLファイルをFlashAirに保存する理由ですが、XMLHttpRequest()関数を使用する場合クロスドメイン制約(RFC6454)があり同じホストから呼び出さないとサーバーとの通信うまくいかない場合があるからです。
うまくいくと以下のようなボタンがブラウザに表示され、ボタン押下するとAPIが呼び出されて、ファームウェアのバージョンを取得し表示します。
次回はconfig.cgiを使ってFlashAirのコンフィグの設定にチャレンジしたいと思います。