{"id":406,"date":"2020-09-01T21:25:18","date_gmt":"2020-09-01T14:25:18","guid":{"rendered":"https:\/\/www.makeriot2020.com\/?p=406"},"modified":"2020-09-01T21:25:23","modified_gmt":"2020-09-01T14:25:23","slug":"arduino-web-server-using-ajax-part-1","status":"publish","type":"post","link":"https:\/\/www.makeriot2020.com\/index.php\/2020\/09\/01\/arduino-web-server-using-ajax-part-1\/","title":{"rendered":"Arduino Web Server using AJAX – Part 1"},"content":{"rendered":"\n

There are many ways to use Arduino to create your own IoT device. One of the easiest is to configure your Arduino as a Web Server. This way, you can connect to it from any browser capable device on your home network. It is also quite a bit safer to do it this way, as you don’t have to expose your device to the internet, reducing the security implications of many of the other methods available.

It does, however, have the disadvantage of not being able to connect to your device from outside your home network. ( In a later part of this series, I will show you how to do this relatively safely, but take note that you still won’t have SSH encryption to the device, that is a huge security risk in today’s online world.<\/p>\n\n\n\n

What use will this kind of IoT device have?
<\/h2>\n\n\n\n

You can use an Arduino based web server to monitor various devices in your home, as well as control them. Many of us have old Android tablets and other devices lying around, that may be to old to run the newest Android Operating System. Such a Tablet can however be mounted to a wall, to provide a permanent display and control device. You will only be limited by your imagination, as well as your skill with interfacing your devices with electronics and Arduino.

A few examples of this can be
– controlling lights
– controlling a fan
– measuring temperature and light levels using various sensors, and performing actions based on those values<\/p>\n\n\n\n

But Arduino Web Servers are slow<\/h2>\n\n\n\n

The normal Arduino web servers that we have all seen in various projects on the internet are indeed slow and cumbersome. This is because they usually have to refresh and reload the entire page to display every single update of a switch or output. We can however take advantage of technology used on computer web servers, as well as the browser of the end user. <\/p>\n\n\n\n

Ajax and Javascript<\/h2>\n\n\n\n

What is AJAX?<\/h3>\n\n\n\n

AJAX stands for Asynchronous JavaScript and XML.<\/p>\n\n\n\n

AJAX is basically the use of JavaScript functions for getting information from the webserver (Your Arduino). This means that data on a web page can be updated without fetching the whole page each time.<\/p>\n\n\n\n

This means that only the relevant part of the web page will be updated, either automatically, or when the end user performs an action, like click on a button, or when an input on the actual Arduino changes state.<\/p>\n\n\n\n

What is JavaScript?<\/h3>\n\n\n\n

JavaScript is a client-side scripting language. This means that the code will run on the web browser. Meaning on the end-user computer or mobile device.<\/p>\n\n\n\n

The JavaScript is included in the HTML page that will be served by the Arduino Webserver. When you load the web page hosted by the Arduino, the page and the JavaScript is loaded to your browser. Your browser then runs the JavaScript code (provided that you have not disabled JavaScript in your browser).<\/p>\n\n\n\n

What will we need to do this?<\/h2>\n\n\n\n

You will need the following hardware and software to do this project<\/p>\n\n\n\n

– Arduino UNO or Compatible
– Arduino Ethernet Shield with NO SD-Card Inserted
– Breadboard
– 1K resistor
– LED
– 10k OR 22k Resistor
– Hookup Wire (5 pieces)
– Push Button

<\/p>\n\n\n\n

The Circuit<\/h2>\n\n\n\n

Wire the following circuit on your breadboard<\/p>\n\n\n\n

\"\"
Circuit Diagram for the Arduino AJAX Web Server – Part 1<\/figcaption><\/figure>\n\n\n\n

Connect your Ethernet Shield to the Arduino Uno.
Connect the Resistors, LED and push-button Switch as shown.
Connect +5v from Arduino to Red Line, Gnd From Arduino to Blue line<\/p>\n\n\n\n

Connect Orange Wire from Arduino Pin 2 to a hole BETWEEN the 10k resistor and the switch ( See Diagram).
Connect Green Wire from Arduino Pin 3 to a hole above the 1k resistor ( See Diagram)<\/p>\n\n\n\n

The Code<\/h2>\n\n\n\n

Copy the following code into your Arduino IDE, Or download the file below<\/p>\n\n\n\n

AjaxWebserver-part1.ino_<\/a>Download<\/a><\/div>\n\n\n\n
\n
#include <SPI.h>\n#include <Ethernet.h>\n\/\/ MAC address from Ethernet shield sticker under board\nbyte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED };\nIPAddress ip(192, 168, 100, 32); \/\/ IP address, may need to change depending on network\nEthernetServer server(80); \/\/ create a server at port 80\nString HTTP_req; \/\/ stores the HTTP request\n\nvoid setup()\n{\nEthernet.begin(mac, ip); \/\/ initialize Ethernet device\nserver.begin(); \/\/ start to listen for clients\nSerial.begin(9600); \/\/ for diagnostics\npinMode(2, INPUT_PULLUP); \/\/ switch is attached to Arduino pin 2\npinMode(3, OUTPUT);\ndigitalWrite(3,LOW);\n}\n\nvoid loop()\n{\nEthernetClient client = server.available(); \/\/ try to get client\nif (client) { \/\/ got client? <\/code>\nboolean currentLineIsBlank = true; <\/code>\nwhile (client.connected()) <\/code>\n{ if (client.available()) <\/code>\n{ \/\/ client data available to read char c = client.read(); \/\/ read 1 byte (character) from client HTTP_req += c; \/\/ save the HTTP request 1 char at a time <\/code>\n\/\/ last line of client request is blank and ends with \\n <\/code>\n\/\/ respond to client only after last line received <\/code>\nif (c == '\\n' && currentLineIsBlank) { \/\/ send a standard http response header client.println(\"HTTP\/1.1 200 OK\"); <\/code>\nclient.println(\"Content-Type: text\/html\"); <\/code>\nclient.println(\"Connection: keep-alive\"); <\/code>\nclient.println(); \/\/ AJAX request for switch state <\/code>\nif (HTTP_req.indexOf(\"ajax_switch\") > -1) <\/code>\n{ <\/code>\n\/\/ read switch state and send appropriate paragraph text <\/code>\nGetSwitchState(client); <\/code>\n} else <\/code>\n{ <\/code>\n\/\/ HTTP request for web page \/\/ send web page - contains JavaScript with AJAX calls <\/code>\nclient.println(\"<!DOCTYPE html>\"); <\/code>\nclient.println(\"<html>\"); <\/code>\nclient.println(\"<head>\"); <\/code>\nclient.println(\"<title>Arduino Web Page with AJAX - Maker and IoT Ideas<\/title>\"); <\/code>\nclient.println(\"<script>\"); <\/code>\nclient.println(\"function GetSwitchState() {\"); <\/code>\nclient.println(\"nocache = \\\"&nocache=\\\"\\ + Math.random() * 1000000;\"); <\/code>\nclient.println(\"var request = new XMLHttpRequest();\"); <\/code>\nclient.println(\"request.onreadystatechange = function() {\"); <\/code>\nclient.println(\"if (this.readyState == 4) {\"); <\/code>\nclient.println(\"if (this.status == 200) {\"); <\/code>\nclient.println(\"if (this.responseText != null) {\"); client.println(\"document.getElementById(\\\"switch_txt\\\")\\<\/code>.innerHTML =this.responseText;\");\n\nclient.println(\"}}}}\");\nclient.println(\"request.open(\\\"GET\\\", \\\"ajax_switch\\\" + nocache, true);\");\nclient.println(\"request.send(null);\");\nclient.println(\"setTimeout('GetSwitchState()', 1000);\");\nclient.println(\"}\");\nclient.println(\"\");\nclient.println(\"\");\nclient.println(\"\"); \nclient.println(\"Arduino Web Server with AJAX\"); \nclient.println(\"Switch Status on D2\"); \nclient.println( \"Switch state: Not requested\u2026\"); \nclient.println(\"\");\nclient.println(\"\");\n}\n\/\/ display received HTTP request on serial port\nSerial.print(HTTP_req);\nHTTP_req = \"\"; \/\/ finished with request, empty string\nbreak;\n}\n\/\/ every line of text received from the client ends with \\r\\n\nif (c == '\\n') {\n\/\/ last character on line of received text\n\/\/ starting new line with next character read\ncurrentLineIsBlank = true;\n}\nelse if (c != '\\r') {\n\/\/ a text character was received from client\ncurrentLineIsBlank = false;\n}\n} \/\/ end if (client.available())\n} \/\/ end while (client.connected())\ndelay(1); \/\/ give the web browser time to receive the data\nclient.stop(); \/\/ close the connection\n} \/\/ end if (client)\n}\n\n\/\/ send the state of the switch to the web browser\nvoid GetSwitchState(EthernetClient cl)\n{\nif (digitalRead(2)) {\ncl.println(\"Switch at D2 is: OFF, LED at D3 is OFF\");\ndigitalWrite(3,LOW);\n}\nelse {\ncl.println(\"Switch at D2 is: ON, LED at D2 is ON\");\ndigitalWrite(3,HIGH);\n}\n}<\/pre>\n\n\n\n
Upload the code to your Arduino<\/p>\n<\/div><\/div>\n\n\n\n
Testing the results<\/h2>\n\n\n\n
Open a web browser and go to the IP Address of the server ( the one you set in your code).
If you did everything correctly, you should see a screen similar to this.<\/p>\n\n\n\n
\"\"
The Ajax Web Server shows the button and LED is OFF<\/figcaption><\/figure>\n\n\n\n
Now press the button<\/p>\n\n\n\n
The web page should immediately update and tell you that the button is On, and the LED is ON<\/p>\n\n\n\n
\"\"

Ajax Web Server showing Status of Button and LED as ON<\/figcaption><\/figure>\n\n\n\n
The Generated HTML will look like this <\/p>\n\n\n\n
\n
<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<title>Arduino Web Page with AJAX - Maker and IoT Ideas<\/title>\n\n<script>\n\nfunction GetSwitchState() {\n\nnocache = \"&nocache=\" + Math.random() * 1000000;\n\nvar request = new XMLHttpRequest();\n\nrequest.onreadystatechange = function() {\n\nif (this.readyState == 4) {\n\nif (this.status == 200) {\n\nif (this.responseText != null) {\n\ndocument.getElementById(\"switch_txt\").innerHTML = this.responseText;\n\n}}}}\n\nrequest.open(\"GET\", \"ajax_switch\" + nocache, true);\n\nrequest.send(null);\n\nsetTimeout('GetSwitchState()', 1000);\n\n}\n\n<\/script>\n\n<\/head>\n\n<body onload=\"GetSwitchState()\">\n\n<h1>Arduino Web Server with AJAX<\/h1>\n\n<h3>Switch Status on D2<\/h3>\n\n<p id=\"switch_txt\">Switch state: Not requested...<\/p>\n\n<\/body>\n\n<\/html><\/pre>\n<\/div><\/div>\n\n\n\n
Images of the Working Hardware<\/h2>\n\n\n\n