website/webdevelopment/httpessentialtraining/requests.js

import { addBanner, addArticle, addTitle, addHeader, addParagraph, addClassParagraph, addSubHeader, addOrderedList, addUnorderedList, addBlockquote, addInset, addInsetList, addInsetCodeListing, addInsetBulletList, addImageWithCaption, addButtonGroup, addSidebar, addSyntax, menu, global_menu } from '/scripts/import.js';
import { local_menu } from '/scripts/webdev.js';

const heading = document.querySelector(".heading");
const global = document.querySelector(".global_menu");
const local = document.querySelector(".local_menu");
const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main_content");

heading.append(addTitle("HTTP Essential Training"));
heading.append(addParagraph("Morton Rand-Hendriksen - LinkedIn Learning - October 2019"));
heading.append(addParagraph("Chapter 2 - HTTP: Requests and Responses"));
global.append(global_menu());
local.append(local_menu("httpessentialtraining"));

main.append(addSubHeader("Anatomy of a URL"));
main.append(addParagraph("If we take a typical URL such as https://linkedin.com/learning/javascript-essential-training-3/add-dom-elements?u=1234567\", we can break this down into its various parts.  Firstly, we can separate the protocol (https) and the Universal Resource Name (URN)which is the rest of the URL."));
main.append(addParagraph("The URN can also be broken down and starts with a domain name.  This is the name which is registered with a domain name server and points to an IP address (in this case, the domain name is linkedin.com)."));
main.append(addParagraph("Next, we have the port number although in most cases, this is implied.  By default, HTTP uses port 80 and HTTPS uses port 443 so if the server is using one of these port numbers, we won’t see a port number being declared here.  However, if the server uses a different or if we want to use a different port number such as 8080, this is declared after the domain name and is preceded by a colon."));
main.append(addParagraph("The most familiar place for most people seeing such a declaration will be something like localhost:8080."));
main.append(addParagraph("After the port, we have a resource path which provides the location of the file we want on the server.  If we don’t specify a file, the server will return the default page if there is one.  This would normally be something like index.html or index.php."));
main.append(addParagraph("If the file is called anything else, the resource path must include the specific filename and, if the file is not in the default folder for the website, the path name."));
main.append(addParagraph("The final part of the URL is an optional query.  One or more queries can be added to the end of the URL and they can perform further actions on the server such as track a user’s id, filter content and so on."));
main.append(addParagraph("A query starts with a question mark.  The query itself comprises an argument and a value such as u=1234.  If we need to specify more than one query, these are separated by an ampersand symbol."));
main.append(addSubHeader("HTTP Status Messages"));
main.append(addParagraph("For every request sent to a server, a response is received and these fall into five main groupings"));
main.append(addImageWithCaption("./images/figure9.png", "Figure 9 - HTTP Status Codes"));
main.append(addParagraph("There are lots of other status messages, but these are the ones you will most likely encounter when working with regular websites."));
main.append(addSyntax("What Are HTTP Headers?"));
main.append(addParagraph("Since HTTP is a stateless protocol, if we want to send information about the state of the client to the server (or vice versa) we need to use HTTP headers to do that."));
main.append(addParagraph("HTTP headers are human-readable value pair (separated by a colon) which we can use to send standard or custom information between the client and server and It is added to the end of the HTTP request or response."));
main.append(addParagraph("A request can hold as many headers as are needed and each is separated by a line break.  There can be a lot of information being passed back and forth."));
main.append(addParagraph("To give an example, let’s say we want to send a POST request to a CMS to create a new resource.  The first step is going to be to provide authentication to the server and this is done, in its most basic form, by sending an authentication header with some basic authentication data, usually a username and password.  To avoid confusing the username and password with a simple text string, there are normally Base64 encoded."));
main.append(addParagraph("If the server needs or wants the client to remember some information regarding the server state (this might be, for instance, what video the user is viewing as part of a LinkedIn Learning course so that he or she can continue from the same point in a later session), it can use a set cookie header to pass this data to the client.  When the client next visits the server, it sends this data back to the server and this allows the server to reset the state."));
main.append(addParagraph("The server can also send cache headers to tell the client what files to save, whether cached files should be updated and how long they should be kept for."));
main.append(addParagraph("Headers can also pass information about the client to the server and this might include:"));
main.append(addInsetBulletList(["date and time info about the response request pair", "a user agent header identifying the client", "a server header identifying the software sued by the server", "proxy information", "security information", "cross origin resource sharing information"]));
main.append(addParagraph("and much more.  Modern web technologies, including HTTP2, are also leading to more headers appearing such as PUSH headers to push data from the server to the client without the client needing to request it."));
main.append(addSubHeader("How to See HTTP Headers"));
main.append(addParagraph("We saw how we could use the Developer Tools to view request and response headers for each resource under the network traffic, but this only generates data for requests made via the browser."));
main.append(addParagraph("If we want to send customer request headers to test the response, we can do that with a REST client.  Of course, the web itself can be described as a giant REST client.  However, in this context, a REST client is"));
main.append(addInsetBulletList(["a text-only user agent", "it allows us to create customer request headers", "these can be sent off to a server", "we can then inspect the response"]));
main.append(addParagraph("To see how this works, we will take a look at POSTMAN.  In POSTMAN, I have selected HEAD as the request type because in this case, I just want to see what the headers are, entered a URL of https://www.bbc.co.uk/sport/live/football/52963706 and clicked SEND.  Partial results are shown in figure 5."));
main.append(addImageWithCaption("./images/figure5.png", "Figure 5 - the results from sending a HEAD request in POSTMAN"));	
main.append(addParagraph("In the example shown in figure 5, we don’t see anything on the Body tab because we have only asked for headers.  If we want to see the body, we can use GET rather than HEAD and the results are shown below."));
main.append(addImageWithCaption("./images/figure6.png", "Figure 6 - the results from sending a GET request in POSTMAN"));
main.append(addParagraph("The results in figure 6 show only a small portion of the HTML under the body tab and if you look at the scroll bar to the left, you can see that it is a very small proportion shown in the visible window."));
main.append(addParagraph("Another thing to notice is that we can see 22 response headers (against the 23 shown in figure 5) so we can see that we are more or less getting to see the response headers in either scenario."));
main.append(addParagraph("Now we will look at doing the same thing using Visual Studio Code.  Installing the REST client is quite straightforward, we want to press F1, type ext install and then search for REST client.  This should bring up the client and we can just click the Install button to install it (see here for details of the installation)."));
main.append(addParagraph("In the file, we want to put our request and we will start, as we did with POSTMAN, with a HEAD request as follows:"));
main.append(addSyntax("	HEAD https://www.bbc.co.uk/sport/live/football/52963706"));
main.append(addParagraph("When we click Send Request, we get the output shown in figure 7."));
main.append(addImageWithCaption("./images//figure7.png", "The results from sending a HEAD request in Visual Studio Code."));
main.append(addParagraph("We used the same URL for the request in Visual Studio Code as we did in POSTMAN so unsurprisingly, we see the same number of response headers, 23."));
main.append(addParagraph("Again, this is only returning headers, but we can use the GET request if we want to see the body."));
main.append(addSyntax("GET https://www.bbc.co.uk/sport/live/football/52963706"));
main.append(addParagraph("The results of doing that are shown in figure 8."));
main.append(addImageWithCaption("./images//figure8.png", "Figure 8 - the results from sending a GET request in Visual Studio Code."));
main.append(addParagraph("Unlike with POSTMAN, we can see that the GET request returns the same 23 headers (POSTMAN returned 22 with the GET request) and we can also see the body here.  As you can see, both the headers and the body are placed in the same output window and the body, particularly, did look a bit neater in POSTMAN."));
main.append(addParagraph("However. Visual Studio Code is certainly easier to use because you only need to put the request into a VS Code file, you don’t have to worry about any other settings whereas with POSTMAN, there are other settings to be configured."));
main.append(addSubHeader("Anatomy of a Request Header"));

addSidebar("webdev");