Using Anchors for GET Requests

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