- Apa itu AJAX?
- Bagaimana AJAX Bekerja?
- Komponen yang diperlukan untuk membangun Server Web Berbasis AJAX dan ESP8266
- Server Web Ajax dan ESP8266 - Diagram Sirkuit
- Kode Webserver Berbasis AJAX untuk ESP8266
Dalam banyak aplikasi IoT, ada situasi di mana data sensor perlu dipantau terus menerus, dan cara termudah untuk melakukannya adalah dengan mengaktifkan server web ESP8266 yang melayani halaman web HTML; tetapi masalah dengan metodologi ini adalah browser web perlu di-refresh pada interval waktu tertentu untuk mendapatkan data sensor yang diperbarui. Ini tidak hanya tidak efisien tetapi membutuhkan banyak siklus clock di mana tugas-tugas lain dapat dilakukan. Solusi untuk masalah ini dikenal sebagai "Asynchronous JavaScript and XML" atau disingkat AJAX. Dengan menggunakan AJAX, kita dapat memantau data waktu nyata tanpa menyegarkan seluruh halaman web, ini tidak hanya menghemat waktu, tetapi juga menghemat siklus jam yang berharga. Ikuti terus dan dalam artikel ini, Anda akan belajar bagaimana mengimplementasikan webserver berbasis AJAX di ESP8266.
Apa itu AJAX?
Seperti yang telah kita bahas sebelumnya, AJAX adalah singkatan dari "Asynchronous JavaScript and XML" yang dapat digunakan untuk memperbarui sebagian halaman web tanpa memuat ulang halaman yang diperlukan. Itu dilakukan dengan meminta dan menerima data dari server secara spontan. Fungsi AJAX adalah memperbarui konten web secara asynchronous. Ini berarti browser web pengguna tidak perlu menyegarkan seluruh halaman web ketika hanya sebagian konten pada halaman yang perlu diperbarui.
Contoh sehari-hari AJAX adalah fitur saran Google, saat kami mengetik di bilah pencarian Google, Google mulai menyarankan string pencarian terkait. Selama proses ini, halaman web tidak memuat ulang, tetapi informasi yang perlu diubah diperbarui di latar belakang menggunakan AJAX.
Bagaimana AJAX Bekerja?
AJAX hanya menggunakan kombinasi dari-
- XML (Bahasa Markup yang Dapat Diperluas)
- JavaScript dan HTML
- XML (Extensible Markup Language):
XML adalah bahasa markup. XML banyak digunakan untuk menerima data server dengan format tertentu. Meskipun dapat menerima data dalam bentuk teks biasa. Ketika pengguna mengunjungi halaman web dan sebuah peristiwa terjadi, dalam kasus kami, ini adalah "Tekan tombol", JavaScript membuat objek XMLHttpRequest, yang kemudian mentransfer informasi dalam format XML antara browser web dan server web. Objek XMLHttpRequest mengirimkan permintaan untuk data halaman yang diperbarui ke server web, server memproses permintaan tersebut, tanggapan dibuat di sisi server dan dikirim kembali ke browser, yang kemudian menggunakan JavaScript untuk memproses tanggapan dan menampilkannya di halaman web.
- JavaScript dan HTML:
JavaScript melakukan proses pemutakhiran di AJAX. Permintaan untuk konten yang diperbarui diformat dalam XML agar dapat dimengerti, dan JavaScript menyegarkan konten untuk pengguna yang melihat halaman yang diperbarui.
AJAX Bekerja:
Seperti yang ditunjukkan pada diagram di atas, untuk permintaan AJAX, browser mengirimkan XMLHttpRequest ke server menggunakan javascript. Objek ini mencakup data yang memberi tahu server apa yang diminta. Server hanya merespons dengan data yang diminta dari sisi klien. Kemudian browser menerima data, memperbarui hanya sebagian dari halaman yang perlu diperbarui, bukan memuat ulang seluruh halaman web.
Komponen yang diperlukan untuk membangun Server Web Berbasis AJAX dan ESP8266
Karena kami sedang membangun proyek untuk mendemonstrasikan kemampuan esp8266 untuk menangani AJAX, persyaratan komponen sangat kecil, Anda dapat menemukannya di toko hobi lokal Anda.
- NodeMCU X 1
- Sensor suhu LM35 X 1
- LED X 1
- Breadboard X 1
- Jumper X 4
- Kabel Pemrograman X 1
Server Web Ajax dan ESP8266 - Diagram Sirkuit
Diagram sirkuit untuk webserver berbasis AJAX ditunjukkan di bawah ini.
Karena rangkaiannya sangat sederhana, tidak banyak yang perlu dijelaskan tentangnya. Kami telah menghubungkan LED dengan resistor pembatas arus 150 Ohm ke Pin D0 dari ESP8266, seperti yang akan Anda lihat, kami dapat mengaktifkannya menggunakan server web. Selanjutnya, kami memiliki sensor suhu LM35 di mana kami akan membaca nilai suhu dan memperbaruinya ke halaman web. Sensor suhu diberi daya dari rel 3.3V, dan karena LM35 adalah sensor analog, kami telah menggunakan pin A0 dari papan ESP8266 untuk mengukur data. Jika Anda baru pertama kali menemukan sensor suhu LM35, atau jika Anda ingin mempelajari lebih lanjut tentang sensor kecil yang sangat keren ini, Anda dapat memeriksa posting kami sebelumnya tentang Termometer Digital Menggunakan NodeMCU dan LM35 di mana kami membahas cara kerja sensor ini di detail.
Kode Webserver Berbasis AJAX untuk ESP8266
Sebelum kita melanjutkan lebih jauh, mari selami langsung program untuk memahami bagaimana server web NodeMCU kita akan bekerja. Tetapi sebelum itu, pastikan Anda memiliki pengaturan Arduino IDE untuk ESP8266, Jika Anda tidak memiliki pengaturan, Anda dapat mengikuti bagian selanjutnya, jika tidak Anda dapat melewati bagian ini. Jika Anda tertarik untuk mempelajari lebih lanjut tentang server web, dan proyek berbasis IoT, Anda dapat melihat posting kami sebelumnya di mana kami telah membahas