Starting Electronics Needs Your Help!
It is that time of the year when we need to pay for web hosting and buy new components and equipment for new tutorials. You can help by making a donation. Contribute to this website by clicking the Donate button. The total will be updated once daily. (You may need to clear your browser cache to see the updates.)
Target Amount: $2000
Amount Raised: $1061
Top Donor: C.C. $100
Created on: 4 February 2013
Part 7 of the Arduino Ethernet Shield Web Server Tutorial
The state of a switch connected to the Arduino / Ethernet shield is shown on a web page that is hosted by the Arduino. AJAX is used to fetch the state of the switch when a button on the web page is clicked.
The reason for using a button on the web page to refresh the state of the switch is to keep the code simple for those who are new to AJAX. The next part of this series will automate the reading of the switch using AJAX for a more practical application.
This video shows the Arduino web server displaying the switch status using AJAX.
Can't see the video? View on YouTube →
Using AJAX will be an improvement on the previous part of this tutorial as HTML refresh code that makes the page flicker each time it is reloaded is no longer needed. Only the information that has changed (the state of the switch) will be updated on the page eliminating the flicker.
The switch is interfaced to the Arduino / Ethernet shield as done in the circuit diagram from this article: Project 4: Switch a LED on when Switch is Closed (Button) except that the switch is connected to pin 3 and not pin 2 of the Arduino (the article actually uses the circuit diagram from one of the Arduino examples on the Arduino website).
The sketch for this part of the tutorial is shown below. Copy it and paste it into your Arduino IDE and then load it to the Arduino.
When the web page button is clicked and the GetSwitchState() function is called, it sends a HTTP GET request to the Arduino that contains the text "ajax_switch". This request looks as follows:
GET /ajax_switch&nocache=29860.903564600583 HTTP/1.1 Host: 10.0.0.20 User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:18.0) Gecko/20100101 Firefox/18.0 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-ZA,en-GB;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate Referer: http://10.0.0.20/ Connection: keep-alive
When the Arduino receives this request (containing the ajax_switch text), it responds with a standard HTTP response header followed by text that contains the state of the switch.
In the Arduino code, the function GetSwitchState() will read the switch state on the Arduino pin and send the text Switch state: ON or Switch state: OFF.
In the book, the author explains that when using a GET request, the web browser may cache the GET request. This means that the first request will work fine, but subsequent requests will fail as the first response to the request is cached and will be displayed by the browser every time.
The introduction of a random number in the request fixes the caching problem. Out of five different browsers (Firefox, IE, Safari, Chromium, Chrome) it was found that only Internet Explorer cached the request, so the random number has been added to fix the problem in IE.
The AJAX operation performed in this example can be summarized as follows:
When the Arduino web server receives the HTTP GET request, it sends back a standard HTTP response followed by text that represents the state of the switch. The state of the switch and the text sent is obtained from the Arduino's own GetSwitchState() function.
document.getElementById("switch_txt").innerHTML = this.responseText;
<p id="switch_txt">Switch state: Not requested...</p>
This example has illustrated the use of AJAX used to update a single paragraph of text in the browser. The next part of this tutorial will automate the AJAX request so that a button does not have to be clicked to initiate the request.