- The Browser as a GUI for HTTP 1:52
- Intro to Chrome Developer Tools 7:07
- HTML Review and URIs vs URLs 3:47
- URIs vs URLs 1 question
- Using Anchors for GET Requests 4:18
- Using Anchors for GET Requests 1 question
- Using Forms for GET Requests 8:44
- Data in POST Requests 1 question
- Using Forms for POST Requests 8:32
- Using Forms for HTTP Requests 2 questions
- Wrap-Up 0:53
Preview
Video Player
00:00
00:00
Using Anchors for GET Requests
4:18HTML anchors form the links by which we can navigate throughout the internet. In this video you'll see how the browser uses HTML anchor elements to form HTTP GET requests when a visitor clicks on the anchor.
When you hear the terms World Wide Web or
0:01
Internet, you might think of
something that's highly connected.
0:03
As a spiderweb or fishing net needs
to be in order to be effective.
0:06
Online, the web of the Internet is
spun by what are called hyperlinks.
0:11
Today we've shortened
that to simply links.
0:15
And we have a technical term for
that in the browser.
0:17
They're called anchors.
0:20
We reviewed how anchors
are created in HTML, so
0:22
let's now look at how they're
related to HTTP requests.
0:25
Okay, I'm back in Chrome and
I'm gonna navigate to httpbin.org.
0:30
On this page you see a long
list of blue anchors and
0:36
clicking on each will take
you to the linked page.
0:38
Remember, that destination is
determined by the URL listed
0:41
in the href attribute of the anchor.
0:44
To show you more about Chrome Developer
tools let's right click the html anchor
0:47
and choose Inspect Element.
0:51
So I'll scroll down to that /html resource
and I'll right-click and choose Inspect.
0:52
What we see here is the original html
that the browser used to produce, or
1:00
render, this anchor.
1:04
Notice it has an href attribute
with the value /html.
1:06
This href value is
the URL that the browser
1:11
uses to make a request to the destination.
1:14
Now you might think,
this looks like a URI, Chris, not a URL.
1:17
Well, I'd agree with you
that it looks that way.
1:21
But this is what's called a relative URL,
1:24
which means the URL listed is
relative to the current URL.
1:27
If we look up top at our
browser's address bar right here,
1:31
we see httpbin.org as the current URL.
1:36
So this /html down here is
relative to that httpbin.org URL.
1:39
And the full URL would translate to
1:47
http://httpbin.org/html.
1:51
It's worth noting that modern browsers
will hide the protocol from the address
1:56
bar if it's plain http.
2:01
Notice in Chrome I do
not see http:// here.
2:03
So what happens when we
click on the anchor?
2:09
Well, only one way to find out.
2:11
After clicking on it,
the browser navigates to that page.
2:14
And what you see if you click
on the Network tab is that by
2:17
clicking on the anchor your
browser made an http GET request.
2:22
If I expand this I see the request
method was a GET request
2:27
using the URL from the href
attribute of the anchor, /html.
2:33
Let's put this all together.
2:38
When viewing the page http://httpbin.org
2:40
you saw a link on
the page that said /html.
2:45
This link was created with
an html anchor tag where the href
2:48
attribute's value is /html.
2:53
Remember that's a relative URL and
the text displayed is also /html.
2:55
Upon clicking on that link
the browser used the relative
3:02
URL from the href attribute and
combined it with the URL
3:04
of the current page to construct
a full URL of the destination.
3:08
This full URL is known as an absolute URL.
3:12
With the absolute URLs,
3:15
your browser has everything it needs
to construct the http request.
3:17
Your browser makes a network connection
to httpbin.org using port 80,
3:21
kinda like we did in Telnet,
then sends a GET request for
3:27
the /html resource using HTTP/1.1.
3:31
It adds a bunch of headers according to
the kind of content that are acceptable,
3:35
the type of device making the request,
Chrome in our case,
3:39
the page that we're currently on, and
among others, the language we prefer.
3:42
English in this case, though this is
determined by your browser settings.
3:47
And that's what happens every time you
click a standard HTML anchor in a browser.
3:51
That was a fancy illustration of
something that's quite simple.
3:56
Clicking on an HTML anchor in a browser
results in an http GET request
3:59
to the resource located at the URL
specified in the anchor's href attribute.
4:04
I should tell you that only GET requests
are made with these anchors, and
4:10
not post requests.
4:13
We'll see later how post requests
can be made with a browser.
4:14