In the Web application, the server passes the Web page to the browser, which actually sends the HTML code of the Web page to the browser, which is displayed by the browser. and the transport protocol between the browser and the server is HTTP, so:
HTML is a kind of text used to define Web pages, HTML, you can write Web pages;
HTTP is the protocol that transmits HTML over the network, and is used for communication between the browser and the server.
Before we do this, we need to install Google Chrome.
Why use a Chrome browser instead of IE? IE is too slow, and IE is completely useless for developing and debugging Web applications.
We need to easily debug our web apps in a browser, and Chrome provides a complete set of debugging tools that are ideal for web development.
Once you've installed your Chrome browser, open chrome and choose "View", "Developer", "Developer Tools" in the menu to display the developer tools:
Elements
Displays the structure of the Web page, Network
displaying the communication between the browser and the server. Let's Network
make sure the first Little red light is on, and Chrome will record all the communication between the browser and the server:
When we enter in the Address bar www.sina.com.cn
, the browser will display Sina's homepage. What did the browser do in the process? Through Network
the records, we can know. In Network
, navigate to the first record, click, the right side will show Request Headers
, click on the right side view source
, we can see the browser sent to Sina server request:
The most important first two lines are analyzed as follows, the first line:
GET / HTTP/1.1
GET
Represents a read request that will fetch the Web page data from the server, /
representing the path to the URL, always starting with the URL, /
representing the /
first page, and the last HTTP/1.1
indication of the HTTP protocol version is 1.1. The current version of the HTTP protocol is 1.1, but most servers also support version 1.0, the main difference being that version 1.1 allows multiple HTTP requests to reuse a TCP connection to speed up the transfer.
Starting with the second line, each line is similar to Xxx: abcdefg
:
Host: www.sina.com.cn
Indicates that the requested domain name is www.sina.com.cn
. If a server has multiple Web sites, the server needs Host
to differentiate which Web site the browser is requesting.
Continue to find Response Headers
, click to view source
display the original response data returned by the server:
The HTTP response is divided into header and body (body is optional), and the Network
most important lines we see in the header are as follows:
200 OK
200
Represents a successful response, followed by a OK
description. The failed response is 404 Not Found
: The Web page does not exist 500 Internal Server Error
: the server internal error, and so on.
Content-Type: text/html
Content-Type
Indicates the content of the response, here is the text/html
HTML page that represents it. Please note that the browser is relying on Content-Type
to determine whether the content of the response is a webpage or a picture, video or music. The browser does not rely on the URL to determine the content of the response, so even if the URL is http://example.com/abc.jpg
, it is not necessarily a picture.
HTTP response body is the HTML source code, we choose "View" in the menu bar, "Developer", "View Web page source" can be directly in the browser to view the HTML source code:
When the browser read the HTML source of the Sina homepage, it will parse the HTML, display the page, and then, according to the HTML inside the various links, and then send the HTTP request to Sina server, get the corresponding pictures, videos, Flash, JavaScript scripts, CSS and other resources, Finally, a complete page is displayed. So we Network
can see a lot of additional HTTP requests below.
HTTP request
Following Sina's homepage, let's summarize the process of the HTTP request:
Step 1: The browser sends an HTTP request to the server first, and the request includes:
Method: Get or Post,get only request resources, Post will be accompanied by user data;
Path:/full/url/path;
Domain name: specified by the Host header: Host:www.sina.com.cn
and other relevant headers;
If it is post, then the request includes a body containing the user data.
Step 2: The server returns an HTTP response to the browser, including the following:
Response code: 200 indicates success, 3xx indicates redirection, 4xx indicates that the client sent a request error, 5xx indicates server-side processing error occurred;
Response type: specified by Content-type;
and other relevant headers;
Usually the server's HTTP response will carry content, that is, a body, containing the content of the response, the HTML source of the Web page is in the body.
Step 3: If the browser still needs to continue to request additional resources from the server, make the HTTP request again, repeat steps 1, 2.
The HTTP protocol used by the web uses a very simple request-response pattern, which greatly simplifies development. When we write a page, we only need to send the HTML in the HTTP request, no need to consider how to attach pictures, videos, etc., if the browser needs to request pictures and videos, it will send another HTTP request, so an HTTP request only processes one resource.
The HTTP protocol is also very extensible, although the browser is requesting the http://www.sina.com.cn/
homepage, but Sina in HTML can be linked to other server resources, for example
, so that the request pressure spread across the server, and a site can link to other sites, Countless sites link up with each other, forming the world Wide Web, referred to as www.
HTTP format
Each HTTP request and response follows the same format, and an HTTP contains both the header and body, where the body is optional.
The HTTP protocol is a text protocol, so its format is very simple. Format of the HTTP GET request:
GET /path HTTP/1.1Header1: Value1Header2: Value2Header3: Value3
Each header line is one line, and the newline character is \r\n
.
Format of the HTTP POST request:
POST /path HTTP/1.1Header1: Value1Header2: Value2Header3: Value3body data goes here...
When encountering two consecutive \r\n
, the header part ends, and the back data is all body.
Format of HTTP response:
200 OKHeader1: Value1Header2: Value2Header3: Value3body data goes here...
The HTTP response is delimited if it contains \r\n\r\n
a body. Please note again that the body data type is Content-Type
determined by the head, if it is a Web page, body is text, if it is a picture, body is the binary data of the picture.
When present Content-Encoding
, the body data is compressed, the most common compression method is gzip, so, Content-Encoding: gzip
when you see, you need to extract the body data first to get real data. The purpose of compression is to reduce body size and speed up network transmission.
To learn more about the HTTP protocol, the recommended "http:the Definitive Guide" book, very good, has a Chinese translation:
HTTP authoritative Guide
HTTP Simple Understanding