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

　　什么是 AJAX？

　　正如我們之前所討論的， AJAX代表“異步 JavaScript 和 XML”，它可以用于更新網頁的一部分，而無需重新加載需要的頁面。它通過自發地從服務器請求和接收數據來做到這一點。AJAX 的功能是異步更新網頁內容。這意味著當只需要更新頁面上的一部分內容時，用戶的 Web 瀏覽器不需要刷新整個網頁。

　　AJAX 的一個日常示例將是 Google 的建議功能，當我們在 Google 搜索欄中鍵入時，Google 開始建議相關的搜索字符串。在此過程中，網頁不會重新加載，而是使用 AJAX 在后臺更新需要更改的信息。

　　AJAX 是如何工作的？

　　AJAX 只是使用以下組合 -

　　XML（可擴展標記語言）

　　JavaScript 和 HTML

　　XML（可擴展標記語言）：

　　XML 是一種標記語言。XML 主要用于接收具有特定格式的服務器數據。雖然它可以接收純文本形式的數據。當用戶訪問網頁并發生事件時，在我們的例子中，它是一個“按鈕按下”，JavaScript 創建一個XMLHttpRequest對象，然后在 Web 瀏覽器和 Web 服務器之間以 XML 格式傳輸信息。XMLHttpRequest 對象向 Web 服務器發送更新頁面數據的請求，服務器處理請求，在服務器端創建響應并發送回瀏覽器，然后使用 JavaScript 處理響應并將其顯示在網頁上。

　　JavaScript 和 HTML：

　　JavaScript 在 AJAX 中執行更新過程。更新內容的請求采用 XML 格式以使其易于理解，并且 JavaScript 為查看更新頁面的用戶刷新內容。

　　AJAX 工作：

　　如上圖所示，對于 AJAX 請求，瀏覽器使用 javascript 向服務器發送XMLHttpRequest 。該對象包括告訴服務器正在請求什么的數據。服務器僅響應客戶端請求的數據。然后瀏覽器接收數據，只更新頁面中需要更新的部分，而不是重新加載整個網頁。

　　構建基于 AJAX 和 ESP8266 的 Web 服務器所需的組件

　　由于我們正在構建項目以展示 esp8266 處理 AJAX 的能力，因此組件需求非常小，您可以在當地的愛好商店中找到大部分組件。

　　節點單片機 X 1

　　LM35 溫度傳感器 X 1

　　LED X 1

　　面包板 X 1

　　跳線 X 4

　　編程電纜 X 1

　　Ajax 和 ESP8266 Web 服務器 - 電路圖

　　基于 AJAX 的網絡服務器的電路圖如下所示。

　　由于電路非常簡單，所以沒有什么好解釋的。我們已經將一個帶 150 歐姆限流電阻的 LED 連接到 ESP8266 的引腳 D0，如您所見，我們可以使用網絡服務器對其進行切換。接下來，我們有我們的 LM35 溫度傳感器，我們將通過它讀取溫度值并將其更新到網頁。溫度傳感器由 3.3V 電源軌供電，由于 LM35 是模擬傳感器，我們使用 ESP8266 板的 A0 引腳來測量數據。如果您是第一次接觸 LM35 溫度傳感器，或者您想了解更多關于這個非常酷的小傳感器的信息，您可以查看我們之前關于使用 NodeMCU 和 LM35 的數字溫度計的帖子，其中我們討論了該傳感器的工作原理細節。

　　ESP8266 的基于 AJAX 的 Web 服務器代碼

　　在我們繼續之前，讓我們直接進入程序以了解我們的 NodeMCU Web 服務器將如何工作。但在此之前，請確保您有 ESP8266 的 Arduino IDE 設置，如果您沒有設置，您可以按照下一部分進行操作，否則您可以跳過這一部分。如果您有興趣了解有關webserver和基于IoT的項目的更多信息，您可以查看我們之前的帖子，我們在其中討論了更多關于該主題的內容。

　　設置 NodeMCU 以上傳代碼：

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

　　要將代碼上傳到 NodeMCU，請按照以下步驟操作：

　　1.打開 Arduino IDE，然后轉到File–》Preferences–》Settings。

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

　　3.現在在 Boards Manager 窗口中轉到Tools 》 Board 》 Boards Manager 。在搜索框中輸入ESP 8266，選擇最新版本的開發板，然后點擊安裝。

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

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

　　為 HTML 頁面創建頭文件：

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

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

?

 
 
 
 
 
 
基于 AJAX 的 ESP8266 WEBSERVER
 
  LED ON 
  LED 關閉
 
 

 

  溫度（C）：0

 
  LED 狀態：NA 
 
 
 
 
 
 
)=====";

?

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

　　上述代碼部分負責設置網頁的所有視覺和美學部分。

　　注意：不要忘記將上面的頭文件放在NodeMCU代碼的同一文件夾中，因為這需要在以后的編程中包含。

　　將代碼上傳到 NodeMCU 模塊：

我們首先包含所有必需的頭文件，聽說我們已經包含了“ESP8266WiFi.h”、“WiFiClient.h”和“ESP8266WebServer.h”頭文件。

?

#include  
#include  
#include 

?

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

?

#include "index.h"

?

現在，聲明網絡憑據 - 即 SSID 和密碼。需要將 NodeMCU 連接到互聯網。

?

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

?

然后我們使用名稱服務器和默認端口號 80 定義 ESP8266WebServer 對象。

?

ESP8266WebServer 服務器（80）；

?

定義函數handleRoot處理HTML 網頁，并在請求時將整個網頁發送到客戶端。

?

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

?

函數sensor_data被定義為讀取溫度傳感器數據并在必要的轉換后將其發送到網頁。

?

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

?

在?led_control函數內部，接收來自網頁的信息并進行比較以控制 LED 狀態，如下所示。

?

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

?

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

?

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

?

然后，為了在客戶端請求索引為“/”、“/led_set”和“/adcread”的URL時調用定義的函數，如“handleRoot”、“led_control”和“sensor_data”，定義了以下代碼塊。

?

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

?

　　基于 AJAX 和 ESP8266 的 Web 服務器測試

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

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

　　請注意，您的設備必須連接到與 Nodemcu 連接的同一網絡。在地址欄中輸入 IP 后，您應該會在瀏覽器中獲取項目的網頁。如果你得到它，那么現在你可以在這里監控傳感器值，你還可以從瀏覽器控制 LED 的狀態。

/*ESP8266 AJAX 網絡服務器的 Arduino 代碼


www.circuitdigest.com ;


*/


#include

#include

#include

#include "index.h"

#define LED D0

const char* ssid = "admin";

const char* 密碼 = "12345678";

ESP8266WebServer 服務器（80）；


void handleRoot()

{

String s = 網頁；

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

}


void sensor_data()

{

int a = analogRead(A0);

國際溫度=一/4.35；

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

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

}


無效 led_control()

{

字符串狀態 = "OFF";

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

if(act_state == "1")

{

digitalWrite(LED,HIGH); //LED 開啟

狀態 = "ON";

}

其他

{

數字寫入（LED，LOW）；//LED關閉

狀態=“關閉”；

}



server.send（200，“文本/平面”，狀態）；

}


無效設置（無效）

{

Serial.begin（115200）；

WiFi.begin(ssid, 密碼);

序列號.println("");

pinMode（LED，輸出）；



而（WiFi.status（）！= WL_CONNECTED）

{

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

}

Serial.println("");

Serial.print("連接到");

序列號.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();

}


無效循環（無效）

{

server.handleClient();

}
?