Ajax με esp8266: δυναμική ενημέρωση ιστοσελίδας χωρίς επαναφόρτωση

Σε πολλές εφαρμογές IoT, υπάρχουν καταστάσεις όπου τα δεδομένα των αισθητήρων πρέπει να παρακολουθούνται συνεχώς και ο απλούστερος τρόπος να γίνει αυτό είναι η ενεργοποίηση ενός διακομιστή ιστού ESP8266 που εξυπηρετεί μια ιστοσελίδα HTML. αλλά το πρόβλημα με αυτήν τη μεθοδολογία είναι ότι το πρόγραμμα περιήγησης ιστού πρέπει να ανανεωθεί σε ένα ορισμένο χρονικό διάστημα για να λάβει ενημερωμένα δεδομένα αισθητήρα. Αυτό δεν είναι μόνο αναποτελεσματικό αλλά απαιτεί πολλούς κύκλους ρολογιού όπου μπορούν να εκτελεστούν και άλλες εργασίες. Η λύση σε αυτό το πρόβλημα είναι γνωστή ως "Asynchronous JavaScript and XML" ή AJAX για συντομία. Χρησιμοποιώντας το AJAX, μπορούμε να παρακολουθούμε δεδομένα σε πραγματικό χρόνο χωρίς να ανανεώσουμε ολόκληρη την ιστοσελίδα, αυτό όχι μόνο εξοικονομεί χρόνο, αλλά και εξοικονομεί πολύτιμους κύκλους ρολογιού. Ακολουθήστε και σε αυτό το άρθρο, θα μάθετε πώς να εφαρμόζετε τον διακομιστή ιστού που βασίζεται στο AJAX στο ESP8266.

Τι είναι το AJAX;

Όπως έχουμε συζητήσει νωρίτερα, το AJAX σημαίνει "Asynchronous JavaScript and XML", τα οποία μπορούν να χρησιμοποιηθούν για την ενημέρωση ενός τμήματος της ιστοσελίδας χωρίς να φορτώσουν ξανά τη σελίδα entail. Το κάνει αυτό ζητώντας και λαμβάνοντας δεδομένα από τον διακομιστή αυθόρμητα. Η λειτουργία του AJAX είναι να ενημερώνει το περιεχόμενο ιστού ασύγχρονα. Αυτό σημαίνει ότι το πρόγραμμα περιήγησης ιστού ενός χρήστη δεν χρειάζεται να ανανεώνει ολόκληρη την ιστοσελίδα όταν χρειάζεται να ενημερωθεί μόνο ένα μέρος του περιεχομένου της σελίδας.

Ένα καθημερινό παράδειγμα του AJAX θα είναι η δυνατότητα προτάσεων της Google, καθώς πληκτρολογούμε στη γραμμή αναζήτησης Google, το Google αρχίζει να προτείνει σχετικές συμβολοσειρές αναζήτησης. Κατά τη διάρκεια αυτής της διαδικασίας, η ιστοσελίδα δεν φορτώνει ξανά, αλλά οι πληροφορίες που πρέπει να αλλάξουν ενημερώνονται στο παρασκήνιο χρησιμοποιώντας AJAX.

Πώς λειτουργεί το AJAX;

Το AJAX χρησιμοποιεί μόνο έναν συνδυασμό-

1. XML (Επεκτάσιμη γλώσσα σήμανσης)
2. JavaScript και HTML

• XML (Επεκτάσιμη γλώσσα σήμανσης):

Το XML είναι μια γλώσσα σήμανσης. Το XML χρησιμοποιείται κυρίως για τη λήψη δεδομένων διακομιστή με συγκεκριμένη μορφή. Αν και μπορεί να λάβει δεδομένα με τη μορφή απλού κειμένου. Όταν ένας χρήστης επισκέπτεται μια ιστοσελίδα και συμβαίνει ένα συμβάν, στην περίπτωσή μας, είναι ένα "Πλήκτρο κουμπιού", η JavaScript δημιουργεί ένα αντικείμενο XMLHttpRequest, το οποίο στη συνέχεια μεταφέρει πληροφορίες σε μορφή XML μεταξύ ενός προγράμματος περιήγησης ιστού και ενός διακομιστή ιστού. Το αντικείμενο XMLHttpRequest στέλνει ένα αίτημα για ενημερωμένα δεδομένα σελίδας στον διακομιστή ιστού, ο διακομιστής επεξεργάζεται το αίτημα, δημιουργείται μια απάντηση από την πλευρά του διακομιστή και αποστέλλεται πίσω στο πρόγραμμα περιήγησης, το οποίο στη συνέχεια χρησιμοποιεί JavaScript για να επεξεργαστεί την απόκριση και να την εμφανίσει στην ιστοσελίδα.

• JavaScript και HTML:

Το JavaScript κάνει τη διαδικασία ενημέρωσης στο AJAX. Το αίτημα για ενημερωμένο περιεχόμενο διαμορφώνεται σε XML ώστε να είναι κατανοητό και η JavaScript ανανεώνει το περιεχόμενο για τον χρήστη που βλέπει την ενημερωμένη σελίδα.

AJAX Εργασία:

Όπως φαίνεται στο παραπάνω διάγραμμα, για ένα αίτημα AJAX, το πρόγραμμα περιήγησης στέλνει ένα XMLHttpRequest στον διακομιστή χρησιμοποιώντας javascript. Αυτό το αντικείμενο περιλαμβάνει δεδομένα που ενημερώνουν τον διακομιστή τι ζητείται. Ο διακομιστής αποκρίνεται μόνο με τα δεδομένα που ζητήθηκαν από την πλευρά του πελάτη. Στη συνέχεια, το πρόγραμμα περιήγησης λαμβάνει τα δεδομένα, ενημερώνει μόνο το τμήμα της σελίδας που πρέπει να ενημερωθεί αντί να φορτώσει ξανά ολόκληρη την ιστοσελίδα.

Απαιτούνται στοιχεία για τη δημιουργία του διακομιστή Web που βασίζεται στους AJAX και ESP8266

Καθώς χτίζουμε το έργο για να δείξουμε την ικανότητα του esp8266 να χειρίζεται το AJAX, η απαίτηση εξαρτημάτων είναι πολύ μικρή, μπορείτε να βρείτε τα περισσότερα από αυτά στο τοπικό κατάστημα χόμπι σας.

• ΚόμβοςMCU X 1
• LM35 Αισθητήρας θερμοκρασίας X 1
• LED X 1
• Breadboard X 1
• Άλτες Χ4
• Καλώδιο προγραμματισμού X 1

Διακομιστής Web Ajax και ESP8266 - Διάγραμμα κυκλώματος

Το διάγραμμα κυκλώματος για τον διακομιστή ιστού που βασίζεται στο AJAX εμφανίζεται παρακάτω.

Καθώς το κύκλωμα είναι πολύ απλό, δεν υπάρχει τίποτα να εξηγήσουμε γι 'αυτό. Έχουμε συνδέσει ένα LED με αντίσταση περιορισμού ρεύματος 150 Ohms στο Pin D0 του ESP8266, όπως θα δείτε, μπορούμε να το αλλάξουμε χρησιμοποιώντας τον διακομιστή ιστού. Στη συνέχεια, έχουμε τον αισθητήρα θερμοκρασίας LM35 μέσω του οποίου θα διαβάζουμε την τιμή θερμοκρασίας και θα την ενημερώνουμε στην ιστοσελίδα. Ο αισθητήρας θερμοκρασίας τροφοδοτείται από τη ράγα 3.3V και καθώς το LM35 είναι αναλογικός αισθητήρας, χρησιμοποιήσαμε τον ακροδέκτη A0 της πλακέτας ESP8266 για τη μέτρηση των δεδομένων. εάν έχετε συναντήσει τον αισθητήρα θερμοκρασίας LM35 για πρώτη φορά ή εάν θέλετε να μάθετε περισσότερα σχετικά με αυτόν τον πολύ δροσερό μικρό αισθητήρα, μπορείτε να ελέγξετε την προηγούμενη ανάρτησή μας στο Ψηφιακό Θερμόμετρο Χρησιμοποιώντας NodeMCU και LM35 όπου συζητήσαμε τη λειτουργία αυτού του αισθητήρα στο λεπτομέρεια.

Κωδικός διακομιστή Web που βασίζεται σε AJAX για ESP8266

Προτού προχωρήσουμε περαιτέρω, ας βυθίσουμε κατευθείαν στο πρόγραμμα για να καταλάβουμε πώς θα λειτουργεί ο διακομιστής ιστού NodeMCU. Αλλά πριν από αυτό, βεβαιωθείτε ότι έχετε τη ρύθμιση Arduino IDE για ESP8266, Εάν δεν έχετε τη ρύθμιση, μπορείτε να ακολουθήσετε το επόμενο μέρος, αλλιώς μπορείτε απλά να παραλείψετε αυτό το μέρος. Εάν ενδιαφέρεστε να μάθετε περισσότερα σχετικά με τον διακομιστή ιστού και τα έργα που βασίζονται στο IoT, μπορείτε να δείτε την προηγούμενη ανάρτησή μας όπου έχουμε συζητήσει