- AJAX là gì?
- AJAX hoạt động như thế nào?
- Các thành phần cần thiết để xây dựng Máy chủ Web dựa trên AJAX và ESP8266
- Máy chủ Web Ajax và ESP8266 - Sơ đồ mạch
- Mã máy chủ trang web dựa trên AJAX cho ESP8266
Trong nhiều ứng dụng IoT, có những trường hợp dữ liệu cảm biến cần phải theo dõi liên tục và cách đơn giản nhất để làm điều đó là bật máy chủ web ESP8266 phục vụ trang web HTML; nhưng vấn đề với phương pháp này là trình duyệt web cần được làm mới vào một khoảng thời gian nhất định để có được dữ liệu cảm biến cập nhật. Điều này không chỉ không hiệu quả mà còn mất rất nhiều chu kỳ xung nhịp nơi các tác vụ khác có thể được thực hiện. Giải pháp cho vấn đề này được gọi là “JavaScript và XML không đồng bộ” hay viết tắt là AJAX. Sử dụng AJAX, chúng tôi có thể theo dõi dữ liệu thời gian thực mà không cần làm mới toàn bộ trang web, điều này không chỉ tiết kiệm thời gian mà còn tiết kiệm các chu kỳ đồng hồ quý giá. Cùng theo dõi và trong bài viết này, bạn sẽ học cách triển khai máy chủ web dựa trên AJAX trên ESP8266.
AJAX là gì?
Như chúng ta đã thảo luận trước đó, AJAX là viết tắt của “JavaScript và XML không đồng bộ” có thể được sử dụng để cập nhật một phần của trang web mà không cần tải lại trang yêu cầu. Nó thực hiện điều đó bằng cách yêu cầu và nhận dữ liệu từ máy chủ một cách tự phát. Chức năng của AJAX là cập nhật nội dung trang web một cách không đồng bộ. Điều này có nghĩa là trình duyệt web của người dùng không cần phải làm mới toàn bộ trang web khi chỉ một phần nội dung trên trang cần được cập nhật.
Một ví dụ hàng ngày về AJAX sẽ là tính năng gợi ý của Google, khi chúng ta gõ vào thanh tìm kiếm của Google, Google sẽ bắt đầu đề xuất các chuỗi tìm kiếm có liên quan. Trong quá trình này, trang web không tải lại nhưng thông tin cần thay đổi sẽ được cập nhật trong nền bằng AJAX.
AJAX hoạt động như thế nào?
AJAX chỉ sử dụng sự kết hợp của-
- XML (Ngôn ngữ đánh dấu có thể mở rộng)
- JavaScript và HTML
- XML (Ngôn ngữ đánh dấu có thể mở rộng):
XML là một ngôn ngữ đánh dấu. XML chủ yếu được sử dụng để nhận dữ liệu máy chủ với một định dạng cụ thể. Mặc dù nó có thể nhận dữ liệu dưới dạng văn bản thuần túy. Khi người dùng truy cập một trang web và một sự kiện xảy ra, trong trường hợp của chúng tôi, đó là “Nút nhấn”, JavaScript tạo một đối tượng XMLHttpRequest, sau đó chuyển thông tin ở định dạng XML giữa trình duyệt web và máy chủ web. Đối tượng XMLHttpRequest gửi yêu cầu dữ liệu trang được cập nhật đến máy chủ web, máy chủ xử lý yêu cầu, phản hồi được tạo ở phía máy chủ và được gửi trở lại trình duyệt, sau đó sử dụng JavaScript để xử lý phản hồi và hiển thị trên trang web.
- JavaScript và HTML:
JavaScript thực hiện quá trình cập nhật trong AJAX. Yêu cầu về nội dung cập nhật được định dạng bằng XML để làm cho nó dễ hiểu và JavaScript làm mới nội dung cho người dùng xem trang cập nhật.
AJAX Hoạt động:
Như được minh họa trong sơ đồ trên, đối với một yêu cầu AJAX, trình duyệt sẽ gửi một XMLHttpRequest đến máy chủ bằng javascript. Đối tượng này bao gồm dữ liệu cho máy chủ biết những gì đang được yêu cầu. Máy chủ chỉ phản hồi dữ liệu được yêu cầu từ phía máy khách. Sau đó, trình duyệt nhận dữ liệu, chỉ cập nhật phần trang cần cập nhật thay vì tải lại toàn bộ trang web.
Các thành phần cần thiết để xây dựng Máy chủ Web dựa trên AJAX và ESP8266
Khi chúng tôi đang xây dựng dự án để chứng minh khả năng của esp8266 để xử lý AJAX, yêu cầu về thành phần là rất nhỏ, bạn có thể tìm thấy hầu hết các thành phần đó trong cửa hàng sở thích tại địa phương của mình.
- NodeMCU X 1
- LM35 Cảm biến nhiệt độ X 1
- LED X 1
- Bảng mạch X 1
- Nhảy X 4
- Cáp lập trình X 1
Máy chủ Web Ajax và ESP8266 - Sơ đồ mạch
Sơ đồ mạch cho máy chủ web dựa trên AJAX được hiển thị bên dưới.
Vì mạch rất đơn giản, không có gì nhiều để giải thích về nó. Chúng tôi đã kết nối một đèn LED có điện trở giới hạn dòng 150 Ohms với Chân D0 của ESP8266, như bạn sẽ thấy, chúng tôi có thể chuyển đổi nó bằng cách sử dụng máy chủ web. Tiếp theo, chúng tôi có cảm biến nhiệt độ LM35, qua đó chúng tôi sẽ đọc giá trị nhiệt độ và cập nhật giá trị đó lên trang web. Cảm biến nhiệt độ được cấp nguồn từ đường ray 3.3V và vì LM35 là cảm biến tương tự, chúng tôi đã sử dụng chân A0 của bảng ESP8266 để đo dữ liệu. nếu bạn đã xem qua cảm biến nhiệt độ LM35 lần đầu tiên hoặc nếu bạn muốn tìm hiểu thêm về cảm biến nhỏ rất thú vị này, bạn có thể xem bài đăng trước của chúng tôi về Nhiệt kế kỹ thuật số sử dụng NodeMCU và LM35, nơi chúng tôi đã thảo luận về hoạt động của cảm biến này trong chi tiết.
Mã máy chủ trang web dựa trên AJAX cho ESP8266
Trước khi tiếp tục, hãy đi sâu vào chương trình để hiểu cách máy chủ web NodeMCU của chúng tôi sẽ hoạt động. Nhưng trước đó, hãy đảm bảo rằng bạn đã thiết lập Arduino IDE cho ESP8266, Nếu chưa có thiết lập, bạn có thể theo dõi phần tiếp theo, nếu không bạn có thể bỏ qua phần này. Nếu bạn quan tâm đến việc tìm hiểu thêm về máy chủ web và các dự án dựa trên IoT, bạn có thể xem bài đăng trước của chúng tôi, nơi chúng tôi đã thảo luận