- AJAXとは何ですか？
- AJAXはどのように機能しますか？
- AJAXおよびESP8266ベースのWebサーバーを構築するために必要なコンポーネント
- AjaxおよびESP8266Webサーバー-回路図
- ESP8266用のAJAXベースのWebサーバーコード
多くのIoTアプリケーションでは、センサーデータを継続的に監視する必要がある状況があります。そのための最も簡単な方法は、HTMLWebページを提供するESP8266Webサーバーを有効にすることです。ただし、この方法の問題は、更新されたセンサーデータを取得するために、特定の時間間隔でWebブラウザーを更新する必要があることです。これは非効率的であるだけでなく、他のタスクを実行できる場所で多くのクロックサイクルを要します。この問題の解決策は、「非同期JavaScriptとXML」または略してAJAXとして知られています。AJAXを使用すると、Webページ全体を更新せずにリアルタイムのデータを監視できます。これにより、時間が節約されるだけでなく、貴重なクロックサイクルも節約されます。この記事に従って、ESP8266にAJAXベースのWebサーバーを実装する方法を学びます。
AJAXとは何ですか？
前に説明したように、 AJAXは「非同期JavaScriptとXML」の略で、必要なページをリロードせずにWebページの一部を更新するために使用できます。これは、サーバーからデータを自発的に要求および受信することによって行われます。AJAXの機能は、Webコンテンツを非同期的に更新することです。つまり、ページのコンテンツの一部のみを更新する必要がある場合、ユーザーのWebブラウザーはWebページ全体を更新する必要がありません。
AJAXの日常的な例は、Googleの提案機能です。Googleの検索バーに入力すると、Googleは関連する検索文字列の提案を開始します。このプロセス中、Webページはリロードされませんが、変更が必要な情報はAJAXを使用してバックグラウンドで更新されます。
AJAXはどのように機能しますか？
AJAXは次の組み合わせを使用します-
- XML（Extensible Markup Language）
- JavaScriptとHTML
- XML（Extensible Markup Language）：
XMLはマークアップ言語です。XMLは主に、特定の形式のサーバーデータを受信するために使用されます。プレーンテキストの形式でデータを受信できますが。ユーザーがWebページにアクセスしてイベントが発生すると（この場合は「ボタンを押す」）、JavaScriptはXMLHttpRequestオブジェクトを作成し、WebブラウザーとWebサーバー間でXML形式の情報を転送します。XMLHttpRequestオブジェクトは更新されたページデータのリクエストをウェブサーバーに送信し、サーバーがリクエストを処理し、サーバー側でレスポンスが作成されてブラウザに返送されます。ブラウザはJavaScriptを使用してレスポンスを処理し、ウェブページに表示します。 。
- JavaScriptとHTML：
JavaScriptはAJAXで更新プロセスを実行します。更新されたコンテンツのリクエストは、理解しやすいようにXMLでフォーマットされ、JavaScriptは更新されたページを表示しているユーザーのコンテンツを更新します。
AJAXの動作：
上の図に示すように、AJAXリクエストの場合、ブラウザはjavascriptを使用してXMLHttpRequestをサーバーに送信します。このオブジェクトには、サーバーに何が要求されているかを伝えるデータが含まれています。サーバーは、クライアント側から要求されたデータのみで応答します。次に、ブラウザはデータを受信し、Webページ全体をリロードするのではなく、更新が必要なページの部分のみを更新します。
AJAXおよびESP8266ベースのWebサーバーを構築するために必要なコンポーネント
Esp8266がAJAXを処理する機能を実証するプロジェクトを構築しているため、コンポーネントの要件はごくわずかであり、それらのほとんどは地元のホビーショップで見つけることができます。
- NodeMCU X 1
- LM35温度センサーX1
- LED X 1
- ブレッドボードX1
- ジャンパーX4
- プログラミングケーブルX1
AjaxおよびESP8266Webサーバー-回路図
AJAXベースのWebサーバーの回路図を以下に示します。
回路は非常に単純なので、それについて説明することはあまりありません。150オームの電流制限抵抗を備えたLEDをESP8266のピンD0に接続しました。ご覧のとおり、Webサーバーを使用して切り替えることができます。次に、LM35温度センサーがあり、これを介して温度値を読み取り、それをWebページに更新します。温度センサーは3.3Vレールから給電され、LM35はアナログセンサーであるため、ESP8266ボードのA0ピンを使用してデータを測定しました。LM35温度センサーに初めて遭遇した場合、またはこの非常にクールな小さなセンサーについて詳しく知りたい場合は、NodeMCUとLM35を使用したデジタル温度計に関する以前の投稿でこのセンサーの動作について説明しました。詳細。
ESP8266用のAJAXベースのWebサーバーコード
先に進む前に、プログラムに直接飛び込んで、 NodeMCUWebサーバーがどのように機能するかを理解しましょう。ただし、その前に、ESP8266用のArduino IDEセットアップがあることを確認してください。セットアップがない場合は、次の部分に従うことができます。そうでない場合は、この部分をスキップできます。ウェブサーバーやIoTベースのプロジェクトについて詳しく知りたい場合は、以前に説明した投稿をご覧ください。