Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTTP Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Using Anchors for GET Requests

4:18 with Chris Ramacciotti

HTML 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.

The "Referer" Header

In an HTTP request, your browser includes a "referer" header, which is the page which the current request is initiated from. Looking closely, you might notice that "referer" is misspelled! The correct spelling is referrer, but the initial specifications included the incorrect spelling of the header. Because of its widespread use, the spelling has not been corrected.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up