« ESP8266でAJAX | トップページ | ESP8266でAjax(SDWebServerで削除) »

2015年7月14日 (火)

ESP8266でAjax つづき

ESP8266でAjax つづき

昨日に続きAjaxネタ

機能はアナログ入力ピン TOUT の値を取得した。
今日はスライダーの値で LED を点灯する。

16行目追加、17行目修正、27行目追加し以下のようにする。
(追加後の行数を示す)

<html>
<head>

<script type="text/javascript">
function loadDoc() {
  if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
  } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("ajaxDiv").innerHTML=xmlhttp.responseText;
    }
  }
  var val = document.getElementById("rang").value;
  xmlhttp.open("GET","led?value=" + val,true);
  xmlhttp.send();
}
</script>

</head>
<body>

<p>
<div id="ajaxDiv"><h2>ここにajaxで取得したの内容が表示されます</h2></div>
<input type="range" name="example1" id="rang">
<button type="button" onclick="loadDoc()">ajaxでデータ取得</button>
</p>

</body>
</html>

次に、スケッチのsetup()に以下追加

  server.on("/led", HTTP_GET, sliderAjax);

スケッチの適当な所に以下の関数追加

void sliderAjax() {
  String s = server.arg("value");
  int n = atoi(s.c_str());
  analogWrite(statusLED, n);
  server.send(200, "text/text", "");
  server.sendContent("LEDを明るさ" + s + "で点灯しました。");
}

« ESP8266でAJAX | トップページ | ESP8266でAjax(SDWebServerで削除) »

Arduino」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/569662/61888512

この記事へのトラックバック一覧です: ESP8266でAjax つづき:

« ESP8266でAJAX | トップページ | ESP8266でAjax(SDWebServerで削除) »