Project Description

In WIZnet Museum, you can get some references about Web Server implementation. In this tutorial, we will provide the web server example to display the sensor value (ADC) using Gauge. You will use the JAVA script for Gauge display and ioShield-A (in which W5500 is embedded) for Ethernet connectivity.

Below is the system diagram about AJAX (Asynchronous JavaScript And XML)

Ajax_flow

AJAX is the combination of the asynchronous JavaScript & XML. For the data exchange with a web server, it does not renew whole web page, but some portion.

AJAX has below components.

1) XMLHttpRequest : It’s related to the communication with a web server. It transmits the user’s request to the web server and returns the result to the web browser.

2) DOM(Document Object Model) : a cross-platform and language independent convention for representing and interacting with objects in HTML, XHTML and XML

3) CSS (Cascading Style Sheets) : a style sheet language used for describing the look and formatting of a document written in markup language.

4) JavaScript : a dynamic computer programming language. It transmits the request to web server using XMLHttpRequest object. When it gets the response from XMLHttpRequest, it controls the browser using DOM and CSS.

This tutorial will use below hardware parts

1) Arduino Mega

Arduino-Mega

2) ioShield-A (WIZ550io+Arduino Interface Board)

io_s_a-300x246

3) uSD, Bread Board, Jumpers and Potentiometer

mSD

Connect 3 pins of a potentiometer to the VCC, Analog 8 and GND pins of Arduino Mega using bread board and jumpers as below picture.

Hardware-connection

You can get the Arduino Sketch file and web page examples from below link.

Ajax Web Sever File Download : Ajax_WebServer

Download from GitHub

 

When you save the HTML file to the SD card, please change the name as ‘index.htm’.

Below is the demonstration movie.