Esp8266 ile Ajax: yeniden yüklemeden dinamik web sayfası güncellemesi

Birçok IoT uygulamasında, sensör verilerinin sürekli olarak izlenmesi gereken durumlar vardır ve bunu yapmanın en basit yolu, bir HTML web sayfası sunan bir ESP8266 web sunucusunu etkinleştirmek; ancak bu metodolojiyle ilgili sorun, güncellenmiş bir sensör verisi almak için web tarayıcısının belirli bir zaman aralığında yenilenmesi gerekmesidir. Bu sadece verimsiz olmakla kalmaz, aynı zamanda diğer görevlerin gerçekleştirilebileceği çok sayıda saat döngüsü gerektirir. Bu sorunun çözümü "Eşzamansız JavaScript ve XML" veya kısaca AJAX olarak bilinir. AJAX kullanarak, tüm web sayfasını yenilemeden gerçek zamanlı verileri izleyebiliriz, bu sadece zamandan tasarruf sağlamakla kalmaz, aynı zamanda değerli saat döngülerinden de tasarruf sağlar. Devam edin ve bu makalede AJAX tabanlı web sunucusunu ESP8266'da nasıl uygulayacağınızı öğreneceksiniz.

AJAX nedir?

Daha önce tartıştığımız gibi, AJAX, gerekli sayfayı yeniden yüklemeden web sayfasının bir bölümünü güncellemek için kullanılabilen "Asenkron JavaScript ve XML" anlamına gelir. Bunu, sunucudan kendiliğinden veri talep ederek ve alarak yapar. AJAX'ın işlevi, web içeriğini eşzamansız olarak güncellemektir. Bu, bir kullanıcının web tarayıcısının sayfadaki içeriğin yalnızca bir kısmının güncellenmesi gerektiğinde tüm web sayfasını yenilemesine gerek olmadığı anlamına gelir.

Günlük bir AJAX örneği, Google arama çubuğuna yazdığımız sırada Google'ın öneri özelliği olacaktır, Google ilgili arama dizelerini önermeye başlar. Bu işlem sırasında web sayfası yeniden yüklenmez, ancak değiştirilmesi gereken bilgiler AJAX kullanılarak arka planda güncellenir.

AJAX Nasıl Çalışır?

AJAX yalnızca aşağıdakilerin bir kombinasyonunu kullanır:

1. XML (Genişletilebilir İşaretleme Dili)
2. JavaScript ve HTML

• XML (Genişletilebilir İşaretleme Dili):

XML bir biçimlendirme dilidir. XML, çoğunlukla belirli bir biçimdeki sunucu verilerini almak için kullanılır. Düz metin şeklinde veri alabilmesine rağmen. Bir kullanıcı bir web sayfasını ziyaret ettiğinde ve bir olay meydana geldiğinde, bizim durumumuzda bu bir "Düğmeye basın" dır, JavaScript bir XMLHttpRequest nesnesi oluşturur ve bu nesneyi daha sonra bir web tarayıcısı ile bir web sunucusu arasında bir XML formatında aktarır. XMLHttpRequest nesnesi, web sunucusuna güncellenmiş sayfa verileri için bir istek gönderir, sunucu isteği işler, sunucu tarafında bir yanıt oluşturulur ve tarayıcıya geri gönderilir, bu da yanıtı işlemek ve web sayfasında görüntülemek için JavaScript kullanır..

• JavaScript ve HTML:

JavaScript, AJAX'ta güncelleme işlemini yapar. Güncellenen içerik talebi, anlaşılır olması için XML olarak biçimlendirilir ve JavaScript, güncellenen sayfayı görüntüleyen kullanıcı için içeriği yeniler.

AJAX Çalışması:

Yukarıdaki diyagramda gösterildiği gibi, bir AJAX isteği için, tarayıcı javascript kullanarak sunucuya bir XMLHttpRequest gönderir. Bu nesne, sunucuya neyin talep edildiğini söyleyen verileri içerir. Sunucu, yalnızca istemci tarafından istenen verilerle yanıt verir. Ardından tarayıcı verileri alır, tüm web sayfasını yeniden yüklemek yerine sayfanın yalnızca güncellenmesi gereken bölümünü günceller.

AJAX ve ESP8266 Tabanlı Web Sunucusunu oluşturmak için Gerekli Bileşenler

Projeyi esp8266'nın AJAX'ı işleme kapasitesini göstermek için inşa ettiğimizden, bileşen gereksinimi çok küçüktür, bunların çoğunu yerel hobi mağazanızda bulabilirsiniz.

• NodeMCU X 1
• LM35 Sıcaklık sensörü X 1
• LED X 1
• Breadboard X 1
• Süveter X 4
• Programlama Kablosu X 1

Ajax ve ESP8266 Web Sunucusu - Devre Şeması

AJAX tabanlı web sunucusu için devre şeması aşağıda gösterilmiştir.

Devre çok basit olduğu için açıklanacak pek bir şey yok. ESP8266'nın Pin D0'ına 150 Ohm akım sınırlama direncine sahip bir LED bağladık, göreceğiniz gibi, web sunucusunu kullanarak değiştirebiliriz. Daha sonra, sıcaklık değerini okuyacağımız ve bunu web sayfasında güncelleyeceğimiz LM35 sıcaklık sensörümüz var. Sıcaklık sensörüne 3.3V rayından güç verilir ve LM35 bir analog sensör olduğundan, verileri ölçmek için ESP8266 kartının A0 pinini kullandık. LM35 sıcaklık sensörüyle ilk kez karşılaştıysanız veya bu çok havalı küçük sensör hakkında daha fazla bilgi edinmek istiyorsanız, bu sensörün çalışmasını tartıştığımız NodeMCU ve LM35 kullanarak Dijital Termometre hakkındaki önceki gönderimize bakabilirsiniz. detay.

ESP8266 için AJAX Tabanlı Web Sunucusu Kodu

Daha fazla ilerlemeden önce, NodeMCU web sunucumuzun nasıl çalışacağını anlamak için doğrudan programa dalalım. Ama ondan önce, ESP8266 için Arduino IDE kurulumuna sahip olduğunuzdan emin olun, eğer kuruluma sahip değilseniz, bir sonraki bölümü takip edebilirsiniz, aksi takdirde bu bölümü atlayabilirsiniz. Web sunucusu ve IoT tabanlı projeler hakkında daha fazla bilgi edinmek istiyorsanız, tartıştığımız önceki gönderimize göz atabilirsiniz.