在許多物聯(lián)網(wǎng)應(yīng)用中，存在傳感器數(shù)據(jù)需要持續(xù)監(jiān)控的情況，最簡(jiǎn)單的方法是啟用 為 HTML 網(wǎng)頁(yè)提供服務(wù)的ESP8266 網(wǎng)絡(luò)服務(wù)器；但是這種方法的問(wèn)題是需要在特定的時(shí)間間隔刷新網(wǎng)絡(luò)瀏覽器才能獲取更新的傳感器數(shù)據(jù)。這不僅效率低下，而且需要很多時(shí)鐘周期才能執(zhí)行其他任務(wù)。這個(gè)問(wèn)題的解決方案被稱為“異步 JavaScript 和 XML”或簡(jiǎn)稱 AJAX。使用AJAX，我們可以在不刷新整個(gè)網(wǎng)頁(yè)的情況下監(jiān)控實(shí)時(shí)數(shù)據(jù)，這不僅節(jié)省了時(shí)間，還節(jié)省了寶貴的時(shí)鐘周期。在本文中，您將學(xué)習(xí)如何在 ESP8266 上實(shí)現(xiàn)基于 AJAX 的網(wǎng)絡(luò)服務(wù)器。

　　什么是 AJAX？

　　正如我們之前所討論的， AJAX代表“異步 JavaScript 和 XML”，它可以用于更新網(wǎng)頁(yè)的一部分，而無(wú)需重新加載需要的頁(yè)面。它通過(guò)自發(fā)地從服務(wù)器請(qǐng)求和接收數(shù)據(jù)來(lái)做到這一點(diǎn)。AJAX 的功能是異步更新網(wǎng)頁(yè)內(nèi)容。這意味著當(dāng)只需要更新頁(yè)面上的一部分內(nèi)容時(shí)，用戶的 Web 瀏覽器不需要刷新整個(gè)網(wǎng)頁(yè)。

　　AJAX 的一個(gè)日常示例將是 Google 的建議功能，當(dāng)我們?cè)?Google 搜索欄中鍵入時(shí)，Google 開(kāi)始建議相關(guān)的搜索字符串。在此過(guò)程中，網(wǎng)頁(yè)不會(huì)重新加載，而是使用 AJAX 在后臺(tái)更新需要更改的信息。

　　AJAX 是如何工作的？

　　AJAX 只是使用以下組合 -

　　XML（可擴(kuò)展標(biāo)記語(yǔ)言）

　　JavaScript 和 HTML

　　XML（可擴(kuò)展標(biāo)記語(yǔ)言）：

　　XML 是一種標(biāo)記語(yǔ)言。XML 主要用于接收具有特定格式的服務(wù)器數(shù)據(jù)。雖然它可以接收純文本形式的數(shù)據(jù)。當(dāng)用戶訪問(wèn)網(wǎng)頁(yè)并發(fā)生事件時(shí)，在我們的例子中，它是一個(gè)“按鈕按下”，JavaScript 創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，然后在 Web 瀏覽器和 Web 服務(wù)器之間以 XML 格式傳輸信息。XMLHttpRequest 對(duì)象向 Web 服務(wù)器發(fā)送更新頁(yè)面數(shù)據(jù)的請(qǐng)求，服務(wù)器處理請(qǐng)求，在服務(wù)器端創(chuàng)建響應(yīng)并發(fā)送回瀏覽器，然后使用 JavaScript 處理響應(yīng)并將其顯示在網(wǎng)頁(yè)上。

　　JavaScript 和 HTML：

　　JavaScript 在 AJAX 中執(zhí)行更新過(guò)程。更新內(nèi)容的請(qǐng)求采用 XML 格式以使其易于理解，并且 JavaScript 為查看更新頁(yè)面的用戶刷新內(nèi)容。

　　AJAX 工作：

　　如上圖所示，對(duì)于 AJAX 請(qǐng)求，瀏覽器使用 javascript 向服務(wù)器發(fā)送XMLHttpRequest 。該對(duì)象包括告訴服務(wù)器正在請(qǐng)求什么的數(shù)據(jù)。服務(wù)器僅響應(yīng)客戶端請(qǐng)求的數(shù)據(jù)。然后瀏覽器接收數(shù)據(jù)，只更新頁(yè)面中需要更新的部分，而不是重新加載整個(gè)網(wǎng)頁(yè)。

　　構(gòu)建基于 AJAX 和 ESP8266 的 Web 服務(wù)器所需的組件

　　由于我們正在構(gòu)建項(xiàng)目以展示 esp8266 處理 AJAX 的能力，因此組件需求非常小，您可以在當(dāng)?shù)氐膼?ài)好商店中找到大部分組件。

　　節(jié)點(diǎn)單片機(jī) X 1

　　LM35 溫度傳感器 X 1

　　LED X 1

　　面包板 X 1

　　跳線 X 4

　　編程電纜 X 1

　　Ajax 和 ESP8266 Web 服務(wù)器 - 電路圖

　　基于 AJAX 的網(wǎng)絡(luò)服務(wù)器的電路圖如下所示。

　　由于電路非常簡(jiǎn)單，所以沒(méi)有什么好解釋的。我們已經(jīng)將一個(gè)帶 150 歐姆限流電阻的 LED 連接到 ESP8266 的引腳 D0，如您所見(jiàn)，我們可以使用網(wǎng)絡(luò)服務(wù)器對(duì)其進(jìn)行切換。接下來(lái)，我們有我們的 LM35 溫度傳感器，我們將通過(guò)它讀取溫度值并將其更新到網(wǎng)頁(yè)。溫度傳感器由 3.3V 電源軌供電，由于 LM35 是模擬傳感器，我們使用 ESP8266 板的 A0 引腳來(lái)測(cè)量數(shù)據(jù)。如果您是第一次接觸 LM35 溫度傳感器，或者您想了解更多關(guān)于這個(gè)非?？岬男鞲衅鞯男畔ⅲ梢圆榭次覀冎瓣P(guān)于使用 NodeMCU 和 LM35 的數(shù)字溫度計(jì)的帖子，其中我們討論了該傳感器的工作原理細(xì)節(jié)。

　　ESP8266 的基于 AJAX 的 Web 服務(wù)器代碼

　　在我們繼續(xù)之前，讓我們直接進(jìn)入程序以了解我們的 NodeMCU Web 服務(wù)器將如何工作。但在此之前，請(qǐng)確保您有 ESP8266 的 Arduino IDE 設(shè)置，如果您沒(méi)有設(shè)置，您可以按照下一部分進(jìn)行操作，否則您可以跳過(guò)這一部分。如果您有興趣了解有關(guān)webserver和基于IoT的項(xiàng)目的更多信息，您可以查看我們之前的帖子，我們?cè)谄渲杏懻摿烁嚓P(guān)于該主題的內(nèi)容。

　　設(shè)置 NodeMCU 以上傳代碼：

　　如果您是第一次將代碼上傳到 nodeMCU，那么您必須先包含板，使用以下步驟。

　　要將代碼上傳到 NodeMCU，請(qǐng)按照以下步驟操作：

　　1.打開(kāi) Arduino IDE，然后轉(zhuǎn)到File–》Preferences–》Settings。

　　2.在 “Additional Board Manager URL ”字段中輸入https://arduino.esp8266.com/stable/package_esp8266com_index.json并單擊“Ok”。

　　3.現(xiàn)在在 Boards Manager 窗口中轉(zhuǎn)到Tools 》 Board 》 Boards Manager 。在搜索框中輸入ESP 8266，選擇最新版本的開(kāi)發(fā)板，然后點(diǎn)擊安裝。

　　4.安裝完成后，進(jìn)入Tools -》 Board -》 選擇NodeMCU 1.0（ESP-12E Module）。現(xiàn)在您可以使用 Arduino IDE 對(duì) NodeMCU 進(jìn)行編程。

　　完成上述 NodeMCU 編程設(shè)置后，需要將完整代碼上傳到 NodeMCU。首先，所有必需的庫(kù)文件都將包含在代碼中。

　　為 HTML 頁(yè)面創(chuàng)建頭文件：

　　首先，需要將用于顯示傳感器值和 LED 控制按鈕的 HTML 頁(yè)面轉(zhuǎn)換為頭文件（.h 文件），我們將在主代碼中包含該文件。這純粹是為了方便。整個(gè)網(wǎng)頁(yè)的 HTML 代碼如下所示：

　const char pages[] PROGMEM = R"=====(?

?

 
 
 
 
 
 
基于 AJAX 的 ESP8266 WEBSERVER
 
  LED ON 
  LED 關(guān)閉
 
 

 

  溫度（C）：0

 
  LED 狀態(tài)：NA 
 
 
 
 
 
 
)=====";

?

　　首先，使用記事本創(chuàng)建一個(gè)新文件并將其保存為.h 擴(kuò)展名，這是 C 頭文件的表示形式。將頭文件命名為“index.h”并將上述代碼復(fù)制并粘貼到創(chuàng)建的頭文件中。

　　上述代碼部分負(fù)責(zé)設(shè)置網(wǎng)頁(yè)的所有視覺(jué)和美學(xué)部分。

　　注意：不要忘記將上面的頭文件放在NodeMCU代碼的同一文件夾中，因?yàn)檫@需要在以后的編程中包含。

　　將代碼上傳到 NodeMCU 模塊：

我們首先包含所有必需的頭文件，聽(tīng)說(shuō)我們已經(jīng)包含了“ESP8266WiFi.h”、“WiFiClient.h”和“ESP8266WebServer.h”頭文件。

?

#include  
#include  
#include 

?

然后，我們包含我們之前編寫(xiě)的頭文件。不要忘記將文件保存在 ESP8266 代碼文件夾中。它被定義為，

?

#include "index.h"

?

現(xiàn)在，聲明網(wǎng)絡(luò)憑據(jù) - 即 SSID 和密碼。需要將 NodeMCU 連接到互聯(lián)網(wǎng)。

?

const char* ssid = "管理員"; 
const char* 密碼 = "12345678";

?

然后我們使用名稱服務(wù)器和默認(rèn)端口號(hào) 80 定義 ESP8266WebServer 對(duì)象。

?

ESP8266WebServer 服務(wù)器（80）；

?

定義函數(shù)handleRoot處理HTML 網(wǎng)頁(yè)，并在請(qǐng)求時(shí)將整個(gè)網(wǎng)頁(yè)發(fā)送到客戶端。

?

void handleRoot() 
{ 
String s = 網(wǎng)頁(yè)；
server.send(200, "text/html", s); 
}

?

函數(shù)sensor_data被定義為讀取溫度傳感器數(shù)據(jù)并在必要的轉(zhuǎn)換后將其發(fā)送到網(wǎng)頁(yè)。

?

void sensor_data() 
{ 
int a = analogRead(A0); 
國(guó)際溫度=一/4.35；
字符串傳感器值 = 字符串（溫度）；
server.send(200, "文本/平面", sensor_value); 
}

?

在?led_control函數(shù)內(nèi)部，接收來(lái)自網(wǎng)頁(yè)的信息并進(jìn)行比較以控制 LED 狀態(tài)，如下所示。

?

無(wú)效 led_control() 
{
字符串狀態(tài) = "OFF"; 
String act_state = server.arg("state"); 
if(act_state == "1") 
{ 
  digitalWrite(LED,HIGH); //LED 開(kāi)啟
  狀態(tài) = "ON"; 
}
其他
{
  數(shù)字寫(xiě)入（LED，LOW）；//LED關(guān)閉
  狀態(tài)=“關(guān)閉”；
} 
server.send（200，“文本/平面”，狀態(tài)）；
}

?

然后，為了將 NodeMCU 連接到互聯(lián)網(wǎng)，我們調(diào)用WiFi.begin() 函數(shù)并傳遞網(wǎng)絡(luò) SSID 和密碼作為其參數(shù)。使用WiFi.status()檢查網(wǎng)絡(luò)連接是否成功，連接成功后，在串行監(jiān)視器上打印一條消息，其中包含所連接設(shè)備的 IP 地址。

?

WiFi.begin(ssid, 密碼); 
而（WiFi.status（）！= WL_CONNECTED）
  { 
    Serial.print（“正在連接......”）; 
  } 
  Serial.println(""); 
  Serial.print("連接到"); 
  序列號(hào).println(ssid); 
  Serial.print("IP地址："); 
  Serial.println(WiFi.localIP());

?

然后，為了在客戶端請(qǐng)求索引為“/”、“/led_set”和“/adcread”的URL時(shí)調(diào)用定義的函數(shù)，如“handleRoot”、“l(fā)ed_control”和“sensor_data”，定義了以下代碼塊。

?

  server.on("/", handleRoot); 
  server.on("/led_set", led_control); 
  server.on("/adcread", sensor_data); 
  server.begin();

?

　　基于 AJAX 和 ESP8266 的 Web 服務(wù)器測(cè)試

　　上傳代碼后，就可以測(cè)試項(xiàng)目了。首先，確保您的熱點(diǎn)已打開(kāi)。然后在打開(kāi)電路之前檢查連接。然后，打開(kāi)電路的電源。在我們的例子中，我們使用 USB 為項(xiàng)目供電，但也可以為 NodeMCU 提供外部 5v 直流電源。

　　打開(kāi)電源后，就可以獲取nodeMCU的IP地址了。這可以使用 Arduino IDE 的串行監(jiān)視器找到。打開(kāi)串口監(jiān)視器，按一下 NodeMCU 的 Reset 按鈕，串口監(jiān)視器上應(yīng)該會(huì)打印 NodeMCU 的 IP 地址。記下 IP 地址并將其粘貼到任何 Web 瀏覽器的 URL 欄上。

　　請(qǐng)注意，您的設(shè)備必須連接到與 Nodemcu 連接的同一網(wǎng)絡(luò)。在地址欄中輸入 IP 后，您應(yīng)該會(huì)在瀏覽器中獲取項(xiàng)目的網(wǎng)頁(yè)。如果你得到它，那么現(xiàn)在你可以在這里監(jiān)控傳感器值，你還可以從瀏覽器控制 LED 的狀態(tài)。

/*ESP8266 AJAX 網(wǎng)絡(luò)服務(wù)器的 Arduino 代碼


www.circuitdigest.com ;


*/


#include

#include

#include

#include "index.h"

#define LED D0

const char* ssid = "admin";

const char* 密碼 = "12345678";

ESP8266WebServer 服務(wù)器（80）；


void handleRoot()

{

String s = 網(wǎng)頁(yè)；

server.send(200, "text/html", s);

}


void sensor_data()

{

int a = analogRead(A0);

國(guó)際溫度=一/4.35；

字符串傳感器值 = 字符串（溫度）；

server.send(200, "文本/平面", sensor_value);

}


無(wú)效 led_control()

{

字符串狀態(tài) = "OFF";

String act_state = server.arg("state");

if(act_state == "1")

{

digitalWrite(LED,HIGH); //LED 開(kāi)啟

狀態(tài) = "ON";

}

其他

{

數(shù)字寫(xiě)入（LED，LOW）；//LED關(guān)閉

狀態(tài)=“關(guān)閉”；

}



server.send（200，“文本/平面”，狀態(tài)）；

}


無(wú)效設(shè)置（無(wú)效）

{

Serial.begin（115200）；

WiFi.begin(ssid, 密碼);

序列號(hào).println("");

pinMode（LED，輸出）；



而（WiFi.status（）！= WL_CONNECTED）

{

Serial.print（“正在連接......”）;

}

Serial.println("");

Serial.print("連接到");

序列號(hào).println(ssid);

Serial.print("IP地址：");

Serial.println(WiFi.localIP());



server.on("/", handleRoot);

server.on("/led_set", led_control);

server.on("/adcread", sensor_data);

server.begin();

}


無(wú)效循環(huán)（無(wú)效）

{

server.handleClient();

}
?