If you have built an Arduino web server (e.g. by following the Arduino web server tutorial), you will be able to access your web server on your local network, probably through your ADSL router. But what must be done if you want to access the Arduino server from outside of your home network?
The Arduino sketch for this solution: eth_websrv_LED2.zip
This code is a hack from some previous code that I wrote and so does not look exactly like the code from the sketch that the question is related to.
The idea is to send the status of the switch (either ON or OFF) as well as the button HTML code with text color to the web browser. This is done every time that an Ajax call is made. An initial Ajax call is made when the page loads. Additional Ajax calls are made every time the button on the web page is clicked. In other words the status of the switch is displayed on the web page the first time that the web page is loaded and then every time that the button on the web page is clicked. The button text will be colored red when the switch is open and colored green when the switch is closed.
<p id="switch_txt">Switch state: Not requested...</p>
The div could have been left empty as everything in the div will be replaced after the Ajax call.
In the Arduino sketch, the Arduino responds to the Ajax call from the web page by sending the button status text and the button with color information. This is done in the Arduino sketches’ GetSwitchState() function. This function checks the state of the interfaced push-button switch and responds as follows:
If the switch is open, it sends OFF paragraph text and red button text: cl.println("<p>Switch state: OFF</p><button type=\"button\" style=\"color: red;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
The above line of Arduino code sends these lines of HTML with CSS to color the button text red: <p>Switch state: OFF</p>
<button type="button" style="color: red;" onclick="GetSwitchState()">Get Switch State</button>");
If the switch is closed, this line of Arduino code is run: cl.println("<p>Switch state: ON</p><button type=\"button\" style=\"color: green;\" onclick=\"GetSwitchState()\">Get Switch State</button>");
which sends this HTML with CSS code to color the button text green: <p>Switch state: ON</p>
<button type="button" style="color: green;" onclick="GetSwitchState()">Get Switch State</button>");