Websites are among the most popular things in our lives, but few passages have been talking about how they work as holistic parts. I have always wanted to see a passage demystifying websites, introducing different components of a website, and describing how they work together without losing the practicality aspects of tools.
This is a series of blogs, containing the following sections:
- Components of a website
- How frontend and backend communicate?
- How does a server run?
- How server and database cooperate?
1. What is a Website?
A website is analogous a coffee shop - it offers services to clients. In a coffee shop, a menu is displayed to users. A waiter listens to clients’ requests, and responds accordingly by either giving desserts or drinks. Sometimes the server jots down notes in a piece of paper, where workers in the kitchen can view and modify. Similarly, a website displays a front end to visitors at a time. A server responds to your requests. Sometimes the server does CRUD operations in database, where other components in the back scene can view and modify. By the way, the location of the coffee shop is comparable to the operation system the server is running on.
A website has a front end, a server, a database, and an operation system. This combination is a software stack. There are many choices for the stack components.
- Front end: Pure HTML, AngularJS, etc.
- Server engine: Apache, Nginx, etc.
- Server’s scripting language: PHP, Python in Flask / Django / Bottle, Node.js, Express.js, Ruby on Rails, etc.
- OS: Linux
- Database: MySQL, SQLite, MongoDB, Cassandra, etc.
In particular, the combination of {Linux, Apache, MySQL/MongoDB, PHP/Python} is called LAMP stack, and the combination of {MongoDB, ExpressJS, AngularJS, NodeJS} is the MEAN stack.
2. How do Servers and Clients Communicate?
Co-workers should communicate in the coffee shop; same is true for a functioning web server. In order to work together, different components of a website communicate. Following describes how server and clients communicate in four aspects: request, response, session, and cookie.
Request: How Clients Talk to Servers
When there is a waiter, there is communication between him/her and the clients. When there is a server, there is a request from clients to it, and there is a response from server to clients. Note that a server cannot spontaneously reach out to a specific client; he can only respond.
Different clients may speak different dialects, but the essence of communication is the same. Different clients may sent requests in various forms complying to different protocols, but all HTTP requests contains the following fields.
A typical HTTP 1.1 request contains:
- request-line
- request header (ending with an empty line)
- (optional) a message body
A request-line consists of Method Request-URI HTTP-Version. Following is an example of a request-line:A request method is usually one of ‘POST’, ‘GET’, ‘PUT’, and ‘DELETE’. Each corresponding to Create, Read, Update, and Delete (CRUD), according to the ReSTful programming convention. By the way, there are many versions of HyperText Transmit Protocols, and the aforementioned one is HTTP 1.1. This passage describes how HTTP evolves from 0.9, 1.0, 1.1, to 2.1
"GET http://google.ca HTTP/1.1"
How to use this (almost) only method to talk to the server, then? To perform a request, different methods can be used, depending on the type of client you are using. - In Linux terminal. cURL can be conveniently used.
1
2
3
4#POST
curl --data "server_ip?param1=value1¶m2=value2"
#GET
curl "server_ip?param1=value1¶m2=value2" - In JavaScript, an AJAX query can be performed.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16var xhttp;
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
var txt = xhttp.responseText;
}
};
xhttp.open("POST", url, true); // the last parameter specifies
//whether this request is sent asynchronously
xhttp.send("praam1=val1¶m2=val2");
// For GET method, just use xhttp.send() - In Node.js, a request can be required and called.
- In Python, a requests can be submitted.
- In Android, many networking tools can be used, including volley, HttpURLConnection, and OkHttp.
Response: How Servers Reply to Clients
In the client side, usually the request handling tool has API for handling server responses. In the JavaScript example, readyState, status, and responseText are part of the server’s request.
At server side, however, the programmer can specify the contents of response. Following are a few examples.
- In Flask, the responseText is returned by the handler function. Under situations of error, an error handler function is specified.
1
2
3
4
5
6
7
8
9
10
11
12@app.route("/", methods=['GET'])
def hello():
name = request.args.get('user_name')
if name == None:
return "Hello World!"
else:
return "Hello %s!" %name
@app.errorhandler(404)
def not_found(err):
resp = make_response(render_template('error.html'), 404)
resp.headers['X-Something'] = 'A value'
return resp - In Express.js, the response is passed as a parameter.
1
2
3
4
5
6
7
8
9
10
11
12
13
14var express = require('express');
var app = express();
app.route('/')
.get(function(req, res) {
if (typeof(req.param('user_name') == 'undefined')) {
res.send('Hello World!')
} else {
res.send('Hello ' + req.user_name);
}
});
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(404).send('Not found!');
});
Session: Storing Data Across Requests
Sometimes a waiter remembers some information about a client, and is able to directly call out “Yo bro French Vanilla as usual?”. Similarly, during a session, the server stores some information about visitors.
Cookie: Small Piece of Data Stored on Client’s Browser
Sometimes a waiter gives a piece of name card to client. The name card is analogous to cookie.