Up next in 10
STM32 ETHERNET #11 HTTP Server with AJAX - PART 1 || NETCONN || LWIP
2 views
Jun 25, 2022
Purchase the Products shown in this video from :: https://controllerstech.store __________________________________________________________________________________________________ Use CMSIS V1, For now it seems to be more stable than V2. You can refer the page for more information on the bugs in LWIP https://community.st.com/s/question/0D50X0000BJ1iquSQB/bug-in-cubemx-ide-lwip-freertos-on-nucleo-f429zi HTTP SERVER Video :::: https://youtu.be/haO8_eLIDeI STM32 ETHERNET Playlist:: https://www.youtube.com/playlist?list=PLfIJKC1ud8ggZKVtytWAlOS63vifF5iJC STM32 Playlist :::: https://www.youtube.com/playlist?list=PLfIJKC1ud8gga7xeUUJ-bRUbeChfTOOBd DOWNLOAD THIS PROJECT FROM :::: https://controllerstech.com/http-server-using-ajax-part1/ ________________________________________________________________________________________ ******* SUPPORT US BY DONATING****** https://paypal.me/controllertech *******Join the Membership******* https://www.youtube.com/channel/UCkdqtSMnhYuMsJkyHOxiPZQ/join
View Video Transcript
0:01
[Music]
0:09
hello and welcome to controllers tech
0:12
this is the 11th video in the ethernet
0:15
series and today we will see how to use
0:17
the http server with ajax
0:20
the video was going to be very long and
0:23
therefore we will cover it in two
0:24
different parts
0:26
this part will only include the basic
0:28
understanding of what exactly we are
0:30
going to use also we will try sending an
0:33
empty request to the server and the
0:35
server should perform some operation on
0:37
receiving the request
0:39
in the next video we will update a
0:41
specific part of the web page by
0:43
receiving the data from the server and
0:46
this whole operation will be done
0:48
without loading the page again
0:50
as this is the continuation from the
0:52
previous http server video i would
0:55
advise that you watch that video first
0:59
in order to use ajax we use the
1:02
xmlhttprequest object
1:05
you can find more info about it in the
1:07
mozilla documentation i will leave the
1:10
link in the description
1:12
as mentioned here the object is used to
1:15
retrieve data from a url without doing
1:18
the full page refresh
1:20
iac stands for asynchronous javascript
1:22
and xml and it uses a number of
1:25
technologies specially the xml http
1:28
request
1:30
we will see how to implement it as we
1:32
proceed with the video
1:34
this is the project from my previous
1:36
video about the http server and i am
1:39
going to continue with the same
1:56
let's open the project in cube id
2:08
here is the http server file which we
2:11
will modify in a while
2:13
the most important part of this tutorial
2:16
is the html files we use
2:20
to make it a bit more interesting i have
2:22
decided to use a larger web page with
2:24
images and more syntax
2:27
as i am too lazy to make it from scratch
2:30
i decided to use one from the estes
2:32
examples
2:34
this is an example on the netcon http
2:37
web server provided by the s-t
2:40
here we are only interested in this fs
2:43
folder
2:44
the home page looks like this and this
2:47
is good enough for the experiment
2:53
this is the 404 error page
2:57
we will modify the home page and add
2:59
some buttons to it which will be used to
3:02
send an empty request to the server
3:05
let's create some buttons first
3:08
i am going to use an online html editor
3:11
to create the button
3:15
these look nice with the hover actions
3:19
let me delete all this stuff from here
3:28
first we will create an onload event
3:30
which will basically call the onload
3:32
function once the entire page is loaded
3:38
now we need to create this onload
3:40
function and it must be defined under
3:42
the script tag in the head
3:45
you can use javascript for larger code
3:47
but since i am using something very
3:49
basic i am writing the code here itself
3:53
first we will define a variable to store
3:56
the xml http request
3:58
now we will define the onload function
4:01
in which we will create a new xml http
4:04
request
4:05
the buttons we created we must use the
4:08
click functionality to them so when the
4:10
green button is clicked we will call the
4:12
function green which we will define in a
4:15
while
4:17
similarly when the blue button is
4:18
pressed it will call the function blue
4:25
we will define these functions inside
4:27
our script tag again
4:33
so when the green button is pressed we
4:36
will initialize the x hr request
4:39
the open method is used to initialize a
4:41
new request or re-initialize an existing
4:44
request
4:46
here is the syntax for the same
4:49
the parameters are the request method
4:51
the url and the third one is optional
5:03
here we will use the get method the url
5:06
will be button color equals to g and
5:08
just put true in the last parameter
5:15
after initializing the request we will
5:17
send it to the server with no parameters
5:20
at all
5:21
this is not actually a request for data
5:24
but rather a test to see if the server
5:26
is able to receive it
5:28
we will do the same for the blue button
5:38
close the script tag after everything is
5:40
finished
5:42
i am not good with html or javascript so
5:46
if i am missing some functions or if you
5:48
think using javascript is better here
5:50
you are free to do so
5:53
please don't spam the comment section
5:55
regarding this
5:57
we will test this with our server later
6:00
now as i mentioned that i am going to
6:02
use the files from the examples provided
6:05
by s t let's copy them outside
6:08
we will rename this to index.html
6:20
also let's rename this to the image
6:23
folder it will be easier for us to deal
6:25
with it
6:35
now you can see the images are not
6:36
loading as we need to update the path to
6:39
these images in the code
6:41
let's edit this
6:43
index.html file
6:45
this is the folder name where it is
6:48
looking for the images
6:50
we will change it to the img folder at
6:52
all the locations in the code
6:57
also we need to add the button code we
6:59
just created
7:01
let's copy the head section and replace
7:04
the entire head from the index file
7:09
we also need to add the onload event in
7:12
the body of the file
7:23
all right the images are loading fine
7:25
now
7:27
now comes the button part
7:30
i want to add them somewhere in the
7:32
middle of the page
7:53
let's reload this page all right they
7:55
are looking fine
7:57
you can see our script is also loading
7:59
all right
8:06
we need to change the folder name in the
8:08
404 file as well
8:19
all right we will copy them in our
8:21
project folder now
8:26
so go to middleware third party lwip
8:30
source apps http fs and paste them here
8:41
now we need to generate the fs data file
8:44
again so double click this make fs data
8:47
application
8:48
all right let's build the code once
8:53
we have added a few images in the web
8:55
page so we need to add the functions to
8:57
serve those images
8:59
if you notice in the web server file our
9:02
code is only looking for the index.html
9:05
file so we need to add the code for
9:07
serving the image file also
9:10
if you check the html file again here
9:13
you can see there will be a request for
9:15
the img
9:16
sd.gif
9:21
so we will check if this request was
9:23
made
9:27
and if it did we will open the gif from
9:30
the image folder and send this data
9:44
similarly there will be a request for
9:46
the stm 32.jpg
9:55
we will again check this request and
9:58
open the respective file and send it
10:08
in the 404 file there will be another
10:11
request for the logo image
10:22
all right other than the requests for
10:24
these image files remember that we are
10:27
also making a request when clicking the
10:29
buttons
10:38
so we will check for the url button
10:40
color equal to
10:46
the next character will basically define
10:48
whether we clicked the green or the blue
10:51
button
10:52
whatever it is we will store it in the
10:55
color variable
10:56
we need to define this color variable
10:59
and we will check its value in the
11:01
debugger
11:06
let's build and debug the code now
11:15
let's go to the server address which is
11:18
the same as the previous tutorial
11:24
all right the web page is loaded
11:26
successfully with the images and the
11:28
buttons
11:30
keep an eye on the debugger window as
11:32
well where i have added the color
11:34
variable
11:35
when i click the green button the color
11:38
variable has the character g
11:41
and on clicking the blue button it
11:43
changes to b
11:45
so the buttons are working fine and the
11:47
xml http request is indeed made by the
11:51
client
11:52
if we try to access any other page it
11:55
will show the 404 error page instead
11:59
let's check the wireshark to understand
12:01
the requests made by the client
12:04
we are analyzing the ethernet requests
12:07
also i am putting a filter for http
12:09
requests
12:11
let me reload the page once
12:16
here you can see the requests first one
12:19
is the index.html
12:21
which was successful
12:23
then it requested the gif and jpg file
12:26
which were successful as well
12:29
when i press the buttons the button
12:31
colour requests were made by the client
12:34
the page did not reload while making
12:37
these requests
12:39
which was exactly what we wanted it to
12:41
do
12:42
when we open some other page you can see
12:45
the 404 page request followed by the
12:48
logo file
12:50
so far things are working fine
12:53
you can play with these buttons like
12:55
using the buttons to control the leds
12:59
in the next tutorial we will actually
13:01
receive some data from the server and
13:04
display it in some section on the web
13:06
page
13:07
and the objective is to achieve this
13:09
without reloading the web page again
13:12
let me be clear again i am not an expert
13:15
in html css or javascript so if you
13:19
notice any mistake in the web page
13:22
please check other comments before
13:23
pointing them out
13:25
we will continue with the same project
13:27
in the next video
13:29
you can download the code from the link
13:32
in the description keep watching and
13:35
have a nice day ahead
13:51
you