Open the developer tools in your browser (by pressing Control+Shift+I or Command+Option+I, or using the browser’s menus).
With the Node.js Express server running, visit http://localhost:8080/ and examine the various developer tools (especially examine the “Network” tab and the headers of each request). You may need to refresh the page if the network tab is empty. Notice the headers and experiment with different actions to see how the headers change.
Visit some of your other favorite webpages to see the headers in use and the kinds of requests performed.
Open the developer tools in your browser.
Run this web server:
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
// Show a "Hello, World" greeting and a name input form
function indexHandler(request, response) {
response.send(`<!DOCTYPE html>
<title>Hello, World!</title>
<p>Hello, World!</p>
<form action="/greet_user" method="POST">
<p>Your name: <input type="text" name="username"></p>
<p><input type="submit"></p>
</form>`);
}
// Greet the user supplied in request.body
function formHandler(request, response) {
const username = request.body.username;
response.send(`<!DOCTYPE html>
<title>Hello, ${username}!</title>
<p>Hello, ${username}!</p>`);
}
// Handle POSTed form data
app.use(bodyParser.urlencoded({ extended: false }));
// Set up routes
app.get('/', indexHandler);
app.post('/greet_user', formHandler);
// Start the server
console.log('Running on http://localhost:8080/');
app.listen(8080);What does it do? Visit the web page with your browser developer tools open. How does the header, URL and request body differ between GET and POST requests?
There is no concept of a user login or a long-term connection in any of the layers involved in handling a page request. In principle, every page request is completely independent.
Cookies were first introduced in the Netscape browser in the late 1990s, but are now the standard approach to managing long-term sessions in web browsers.
A cookie is a piece of information (it can be any value) that passes between the web server and web browser (and back again). It works in two steps:
-
The web server uses a
Set-Cookieheader in a HTTP response. This header contains a name and value to be stored by the web browser. -
In every subsequent HTTP request, the web browser includes the stored name and value in a
Cookieheader. [1]
This cookie functionality supports a wide range of applications. Storing a unique identifier [2] in a cookie allows a server to identify whether a user has logged in, associate a user with a shopping cart, or track user activity. [3]
Clear your browser’s Cookies (or use a private browsing window), and then visit some of your favorite websites with the developer tools open in your browser. What values appear in the Set-Cookie header of HTTP responses? What value appears in the Cookie header of initial and subsequent requests?
|
Tip
|
Websites containing advertising may perform so many requests that it is difficult to interpret all of the requests. It may be easier to use ‘simpler’ websites. |