- AJAX คืออะไร?
- AJAX ทำงานอย่างไร?
- ส่วนประกอบที่จำเป็นในการสร้างเว็บเซิร์ฟเวอร์ที่ใช้ AJAX และ ESP8266
- Ajax และ ESP8266 เว็บเซิร์ฟเวอร์ - แผนภาพวงจร
- รหัสเว็บเซิร์ฟเวอร์ที่ใช้ AJAX สำหรับ ESP8266
ในแอปพลิเคชัน IoT จำนวนมากมีสถานการณ์ที่ข้อมูลเซ็นเซอร์ต้องตรวจสอบอย่างต่อเนื่องและวิธีที่ง่ายที่สุดในการดำเนินการคือการเปิดใช้งานเว็บเซิร์ฟเวอร์ ESP8266 ซึ่งให้บริการเว็บเพจ HTML แต่ปัญหาของวิธีการนี้คือต้องรีเฟรชเว็บเบราว์เซอร์ในช่วงเวลาหนึ่งเพื่อรับข้อมูลเซ็นเซอร์ที่อัปเดต สิ่งนี้ไม่เพียง แต่ไม่มีประสิทธิภาพ แต่ต้องใช้รอบนาฬิกาจำนวนมากซึ่งสามารถทำงานอื่น ๆ ได้ วิธีแก้ปัญหานี้เรียกสั้น ๆ ว่า“ Asynchronous JavaScript and XML” หรือ AJAX การใช้ AJAX เราสามารถตรวจสอบข้อมูลแบบเรียลไทม์โดยไม่ต้องรีเฟรชหน้าเว็บทั้งหมดซึ่งไม่เพียงช่วยประหยัดเวลา แต่ยังช่วยประหยัดรอบนาฬิกาอันมีค่าอีกด้วย ทำตามและในบทความนี้คุณจะได้เรียนรู้วิธีการใช้AJAX เว็บเซิร์ฟเวอร์บนพื้นฐาน ESP8266
AJAX คืออะไร?
ดังที่เราได้กล่าวไปแล้วก่อนหน้านี้ AJAXย่อมาจาก"Asynchronous JavaScript and XML"ซึ่งสามารถใช้เพื่ออัปเดตส่วนหนึ่งของหน้าเว็บโดยไม่ต้องโหลดหน้ารายการซ้ำ ทำได้โดยการร้องขอและรับข้อมูลจากเซิร์ฟเวอร์โดยธรรมชาติ ฟังก์ชันของ AJAX คือการอัปเดตเนื้อหาเว็บแบบอะซิงโครนัส ซึ่งหมายความว่าเว็บเบราว์เซอร์ของผู้ใช้ไม่จำเป็นต้องรีเฟรชหน้าเว็บทั้งหมดเมื่อต้องอัปเดตเนื้อหาเพียงบางส่วนบนหน้าเท่านั้น
ตัวอย่าง AJAX ในชีวิตประจำวันจะเป็นคุณลักษณะคำแนะนำของ Google เมื่อเราพิมพ์ในแถบค้นหาของ Google Google จะเริ่มแนะนำสตริงการค้นหาที่เกี่ยวข้อง ในระหว่างขั้นตอนนี้หน้าเว็บจะไม่โหลดซ้ำ แต่ข้อมูลที่ต้องเปลี่ยนแปลงจะได้รับการอัปเดตในเบื้องหลังโดยใช้ AJAX
AJAX ทำงานอย่างไร?
AJAX ใช้การรวมกันของ -
- XML (Extensible Markup Language)
- JavaScript และ HTML
- XML (Extensible Markup Language):
XML เป็นภาษามาร์กอัป XML ส่วนใหญ่จะใช้สำหรับการรับข้อมูลเซิร์ฟเวอร์ที่มีรูปแบบเฉพาะ แม้ว่าจะสามารถรับข้อมูลในรูปแบบของข้อความธรรมดา เมื่อผู้ใช้เข้าชมหน้าเว็บและมีเหตุการณ์เกิดขึ้นในกรณีของเราคือ“ การกดปุ่ม” JavaScript จะสร้างอ็อบเจ็กต์XMLHttpRequestซึ่งจะถ่ายโอนข้อมูลในรูปแบบ XML ระหว่างเว็บเบราว์เซอร์และเว็บเซิร์ฟเวอร์ อ็อบเจ็กต์ XMLHttpRequest ส่งคำร้องขอข้อมูลเพจที่อัพเดตไปยังเว็บเซิร์ฟเวอร์เซิร์ฟเวอร์ประมวลผลคำขอการตอบกลับถูกสร้างขึ้นที่ฝั่งเซิร์ฟเวอร์และส่งกลับไปยังเบราว์เซอร์จากนั้นใช้ JavaScript เพื่อประมวลผลการตอบสนองและแสดงบนเว็บเพจ.
- JavaScript และ HTML:
JavaScript ทำกระบวนการอัปเดตใน AJAX คำขอสำหรับเนื้อหาที่อัปเดตถูกจัดรูปแบบใน XML เพื่อให้เข้าใจได้และ JavaScript จะรีเฟรชเนื้อหาสำหรับผู้ใช้ที่ดูเพจที่อัปเดต
AJAX ทำงาน:
ดังที่แสดงในแผนภาพด้านบนสำหรับคำขอ AJAX เบราว์เซอร์จะส่งXMLHttpRequestไปยังเซิร์ฟเวอร์โดยใช้จาวาสคริปต์ ออบเจ็กต์นี้มีข้อมูลที่บอกเซิร์ฟเวอร์ว่ากำลังร้องขออะไร เซิร์ฟเวอร์ตอบสนองเฉพาะข้อมูลที่ร้องขอจากฝั่งไคลเอ็นต์ จากนั้นเบราว์เซอร์จะรับข้อมูลอัปเดตเฉพาะส่วนของหน้าที่ต้องการอัปเดตแทนที่จะโหลดหน้าเว็บใหม่ทั้งหมด
ส่วนประกอบที่จำเป็นในการสร้างเว็บเซิร์ฟเวอร์ที่ใช้ AJAX และ ESP8266
ในขณะที่เรากำลังสร้างโครงการเพื่อแสดงให้เห็นถึงความสามารถของ esp8266 ในการจัดการกับ AJAX ความต้องการส่วนประกอบนั้นค่อนข้างน้อยมากคุณสามารถหาสิ่งเหล่านี้ได้ในร้านขายอุปกรณ์งานอดิเรกในพื้นที่ของคุณ
- NodeMCU X 1
- LM35 เซ็นเซอร์อุณหภูมิ X 1
- LED X 1
- เขียงหั่นขนม X 1
- จัมเปอร์ X 4
- สายการเขียนโปรแกรม X 1
Ajax และ ESP8266 เว็บเซิร์ฟเวอร์ - แผนภาพวงจร
แผนภาพวงจรสำหรับเว็บเซิร์ฟเวอร์ที่ใช้ AJAXแสดงอยู่ด้านล่าง
เนื่องจากวงจรนั้นง่ายมากจึงไม่มีอะไรจะอธิบายเกี่ยวกับเรื่องนี้มากนัก เราได้เชื่อมต่อ LED ที่มีตัวต้านทาน จำกัด กระแส 150 โอห์มเข้ากับ Pin D0 ของ ESP8266 อย่างที่คุณเห็นเราสามารถสลับได้โดยใช้เว็บเซิร์ฟเวอร์ ต่อไปเรามีเซ็นเซอร์อุณหภูมิ LM35 ซึ่งเราจะอ่านค่าอุณหภูมิและอัปเดตไปที่หน้าเว็บ เซ็นเซอร์อุณหภูมิใช้พลังงานจากราง 3.3V และเนื่องจาก LM35 เป็นเซ็นเซอร์อนาล็อกเราจึงใช้ขา A0 ของบอร์ด ESP8266 เพื่อวัดข้อมูล หากคุณพบเซ็นเซอร์วัดอุณหภูมิ LM35 เป็นครั้งแรกหรือหากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับเซ็นเซอร์ตัวเล็กที่เจ๋งมากนี้คุณสามารถตรวจสอบโพสต์ก่อนหน้าของเราเกี่ยวกับเครื่องวัดอุณหภูมิดิจิตอลโดยใช้ NodeMCU และ LM35 ซึ่งเราได้กล่าวถึงการทำงานของเซ็นเซอร์นี้ใน รายละเอียด.
รหัสเว็บเซิร์ฟเวอร์ที่ใช้ AJAX สำหรับ ESP8266
ก่อนที่เราจะดำเนินการใด ๆ ต่อไปเรามาดูโปรแกรมเพื่อทำความเข้าใจว่า เว็บเซิร์ฟเวอร์ NodeMCUของเราทำงานอย่างไร แต่ก่อนหน้านั้นโปรดตรวจสอบให้แน่ใจว่าคุณมีการตั้งค่า Arduino IDE สำหรับ ESP8266 หากคุณไม่มีการตั้งค่าคุณสามารถทำตามส่วนถัดไปมิฉะนั้นคุณสามารถข้ามส่วนนี้ได้ หากคุณสนใจเรียนรู้เพิ่มเติมเกี่ยวกับเว็บเซิร์ฟเวอร์และโครงการที่ใช้ IoT คุณสามารถดูโพสต์ก่อนหน้าของเราที่เราได้พูดคุยกัน