Front-end HTML

First, the HTTP protocol

HTTP(Hypertext Transport Protocol), which is the Hypertext Transfer Protocol. This protocol details the rules for communicating with each other between the browser and the World Wide Web server. The format that the client sends to the server is called the " Request Protocol "and the format that the server sends to the client is called " response protocol ."

Features: 1, HTTP is called Hypertext Transfer Protocol, based on request/Response mode!

2, HTTP is a stateless protocol. (in other words, each response request is a separate time and has no effect on each other),

URL: Uniform Resource Locator, is a URL: protocol name:/ / domain : port / path.

Second, the request agreement

Request the first line;  //Request Path Protocol and version, for example: get/index.html http/1.1 request header information;//Request Header name: request header content, that is, the key:value format, for example: Host:localhost blank line;     //used to separate the request body from the request body.   //Get no request body, only post has request body.

HTTP is the GET request by default: ① does not have a request body. The ② data must be within 1K. ③ the content will be exposed in the URL.

Based on the feature of GET request, so get application scenario: ① The URL directly in the address bar of the browser, then it must be a GET request. ② clicking on a hyperlink on the page must also be a GET request. When ③ submits a form, the form uses the GET request by default, but can be set to post.

Here is the specific format of the request message:

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8accept-encoding:gzip, deflate, sdchaccept-language:zh-cn,zh;q=0.8cache-control:no-cacheconnection:keep-alivecookie:csrftoken= Z5h43zwarx7aij82oeizbowbsaqa2lpkhost:127.0.0.1:8090pragma:no-cacheupgrade-insecure-requests:1user-agent: mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) applewebkit/537.36 (khtml, like Gecko) chrome/53.0.2785.89 safari/537.36namelogin/requests??? 737? B transferred??? Finish:5?ms??? Domcontentloaded:14?ms??? Load:14?ms

POST request:

(1). Data does not appear in the address bar
(2). There is no limit to the size of the data
(3). There is a request body
(4). If Chinese is present in the request body, URL encoding will be used!

We all know that the transmission of the parameters in the HTTP protocol is a "Key=value" in the form of a, if you want to pass multiple parameters, you need to use the "&" symbol to split the key value pairs. such as "? Name1=value1&name2=value2 ", so that when the server receives this string, it will use" & "to separate each parameter, and then use" = "to split the parameter values. For the name1=value1&name2=value2 "Let's take a look at the conceptual parsing process for client-to-server: The above string is expressed as ASCII in the computer: 6e616d6531 3D 76616c756531 6e616d6532 3D 76616c756532. 6e616d6531:name1 3d:= 76616c756531:value1 26:& 6e616d6532:name2 3d:= 76616c756532:value2 the server receives the After the data can traverse the stream, the first byte of a byte to eat, when eating to 3D this byte, the server will know the front to eat a byte to indicate a key, and then want to eat, if you encounter 26, the description from Just Eat 3D to 26 sub-section is the value of the previous key,   And so on, you can parse out the parameters that the client passed over. Now there is a question of what to do if my parameter value contains = or & this special character. For example, "Name1=value1", where the value of value1 is "VA&lu=e1 "String, then the actual transfer process will become this" Name1=va&lu=e1 ". Our intention is that there is only one key-value pair, but the server will parse into two key-value pairs, which produces a singular. How to solve the ambiguity caused by the above problems? The solution is to URL encode the parameters URL encoding is simply a special character in front of each byte plus a%, for example, we will produce a singular character URL encoding after the result: "Name1=va%26lu%3d", so that the server will be placed immediately after the "%" After the byte as a normal byte, it is not considered as a separate parameter or key-value pairs separator. Why URL encoding

URL encoding

Using Post submission

<formAction=""Method= "POST">Key Words:<inputtype= "text"name= "keyword"/>  <inputtype= "Submit"value= "Submit"/></form>

The request body of the Post

Request headersaccept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8accept-encoding : gzip, Deflateaccept-language:zh-cn,zh;q=0.8cache-control:no-cacheconnection:keep-alivecontent-length : 13content-type:application/x-www-form-urlencodedcookie:csrftoken=z5h43zwarx7aij82oeizbowbsaqa2lpkhost : 127.0.0.1:8090origin:http://127.0.0.1:8090pragma:no-cachereferer:http://127.0.0.1:8090/login/ upgrade-insecure-requests:1user-agent:mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1)            applewebkit/537.36 (khtml, like Gecko) chrome/53.0.2785.89 safari/537.36

A POST request can have a body, and a GET request cannot have a request body.

• Referer : http://localhost:8080/hello/index.jsp: which page does the request come from, such as when you click on Baidu to link to this place, then referer:http://www.baidu.com If you are entering the address directly in the address bar of the browser, then there is no Referer This request header (can do anti-theft chain, and);
• content-type:application/x-www-form-urlencoded: The data type of the form, indicating that the data is encoded using a URL format; The encoded data is prefixed with "%" , followed by the two-bit decimal .
• Content-length:13: The length of the request body, which is represented as a byte.
• Keyword=hello: Request body content! Hello is the data entered in the form,keyword is the name of the form field.

Mainly statistical and anti-theft chain Referer request header is more useful a request header, it can be used to do statistical work, can also be used to do anti-theft chain. Statistics work: My company's website in Baidu did the advertisement, but do not know in Baidu advertising on our site's traffic has an impact, then can be in each request Referer analysis, if referer for many Baidu, then the user is to find our company through Baidu website. Anti-theft chain: My company's website has a download link, and other sites hotlinking this address, For example, I have a link in the index.html page on my site, click to download JDK7.0, but there is a person's microblog hotlinking this resource, it also has a link to our site JDK7.0, that is, login to its Weibo, click on the link can be downloaded from my Site JDK7.0, which led to our website ads did not Look, but the download is the resources of my site. At this time can use Referer for anti-theft chain, before the resources are downloaded, we judge Referer, if the request from the site, then allow the download, if not this site, first jump to this site to see ads, and then allow the download. Application of Referer

Third, the corresponding

The response content is the content sent by the server to the browser, which is displayed according to the response content. Encounter will open a new line loads load, so sometimes the picture is more, the content will be displayed first, and then the image is loaded out of a sheet.

Responds to the first line; response header information; blank line; response body. Request url:http://127.0.0.1:8090/login/request method:getstatus code:200 okremote address:127.0.0.1:8090response Headersview sourcecontent-type:text/html; charset=utf-8date:wed, Oct 06:48:50 gmtserver:wsgiserver/0.2 cpython/3.5.2x-frame-options:sameorigin<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title></Head><Body><formAction= "/login/"Method= "POST">User name:<inputtype= "text"name= "username"/>  <inputtype= "Submit"value= "Submit"/></form>    </Body></HTML>

Status code:

　　A 1xx (ad hoc response) represents a temporary response and requires a status code for the requestor to continue to perform the operation. 100 (continued) The requesting person shall continue to make the request.　　The server returns this code to indicate that the first part of the request was received and is waiting for the remainder. 　　101 (switching protocol) The requestor has asked the server to switch protocols, and the server has confirmed and is ready to switch.　　2XX (Success) indicates that the requested status code was successfully processed. 200 (success) The server has successfully processed the request. Typically, this indicates that the server provided the requested Web page.　　If this status code is displayed for your robots.txt file, it means that Googlebot has successfully retrieved the file.　　201 (created) The request was successful and the server created a new resource.　　202 (accepted) the server has accepted the request but has not yet processed it.　　203 (non-authoritative information) the server has successfully processed the request, but the information returned may be from another source.　　204 (no content) the server successfully processed the request, but did not return any content. 205 (reset content) the server successfully processed the request, but did not return any content.　　Unlike the 204 response, this response requires the requestor to reset the document view (for example, to clear the form contents to enter new content). 　　206 (partial) The server successfully processed a partial GET request. 3XX (redirected) to complete the request, further action is required. Typically, these status codes are used for redirection. Google recommends that you use redirects no more than 5 times per request. You can use the Webmaster tools to see if Googlebot is having trouble crawling the redirected pages.　　The network crawl page under diagnosis lists URLs that Googlebot cannot crawl due to redirection errors. 300 (multiple options) for requests, the server can perform a variety of operations.　　The server can select an action based on the requestor (user agent) or provide a list of actions for the requestor to select. 301 (permanently moved) The requested page has been permanently moved to a new location. When the server returns this response (a response to a GET or HEAD request), the requestor is automatically forwarded to the new location.　　You should use this code to tell Googlebot that a Web page or Web site has been permanently moved to a new location. 302 (Temporary move) The server is currently responding to a request from a Web page in a different location, but the requestor should continue to use the original location to respond to subsequent requests.　　This code, similar to the 301 code that responds to the GET and HEAD requests, automatically transfers the requestor to a different location, but you should not use this code to tell Googlebot that a Web page or site has moved because Googlebot continues to crawl the original location and index it. 303 (View other locations) The requester should use a separate GET request for the different locations to retrieve the responseThis code is returned by the server.　　For all requests except HEAD, the server automatically goes to a different location. 304 (not modified) The requested webpage has not been modified since the last request.　　When the server returns this response, the Web page content is not returned. If the page has not changed since the requestor last requested it, you should configure the server to return this response (known as the If-modified-since HTTP header).　　The server can tell the search engine that the spider/bot has not changed since the last crawl, thus saving bandwidth and overhead. 305 (using a proxy) the requestor can only use the proxy to access the requested Web page.　　If the server returns this response, it also indicates that the requestor should use the proxy. 307 (Temporary redirect) The server is currently responding to requests from a Web page in a different location, but the requestor should continue to use the original location to respond to subsequent requests. 　　This code, similar to the 301 code that responds to the GET and HEAD requests, automatically transfers the requestor to a different location, but you should not use this code to tell Googlebot that a page or site has moved because Googlebot continues to crawl the original location and index it.　　4xx (Request error) These status codes indicate a possible error in the request and hinder the processing of the server.　　400 (Error request) The server does not understand the syntax of the request. 401 (unauthorized) request authentication is required.　　The server may return this response for Web pages that are requested after logging in. 403 (Forbidden) The server rejects the request.　　If you see this status code when Googlebot tries to crawl a valid webpage on your site (you can see this information on the Web crawl page under Google Webmaster Tools Diagnostics), your server or host may have denied Googlebot access. 404 (not found) The requested Web page was not found by the server.　　For example, this code is often returned for Web pages that do not exist on the server. If you do not have a robots.txt file on your site and you see this status code on the robots.txt page of the Google Webmaster Tools Diagnostics tab, this is the correct status code.　　However, if you have a robots.txt file and you see this status code, your robots.txt file may be named incorrectly or in the wrong location (the file should be in the top-level domain named robots.txt).　　If you see this status code for Googlebot crawled URLs (on the HTTP error page of the Diagnostics tab), it means that Googlebot follows a potentially invalid link to another page (an old link or an incorrectly entered link).　　405 (method Disabled) Disables the method specified in the request.　　406 (not accepted) cannot use the requested content attribute to respond to the requested Web page.407 (requires proxy authorization) This status code is similar to 401 (unauthorized), but specifies that the requestor should authorize the use of the proxy.　　If the server returns this response, it also indicates that the requestor should use the proxy.　　408 (Request timed out) A timeout occurred while the server was waiting for a request. 409 (conflict) The server has a conflict when it finishes the request. The server must include information about the conflict in the response.　　This code may be returned by the server in response to a PUT request that conflicts with the previous request, as well as a list of differences of two requests. 410 (Deleted) If the requested resource has been permanently deleted, the server returns this response. This code is similar to the 404 (not Found) code, but is sometimes used to replace the 404 code in cases where the resource existed before and now does not exist.　　If the resource has been permanently moved, you should use 301 to specify a new location for the resource.　　411 (requires valid length) The server does not accept requests that do not contain a valid Content-Length header field.　　412 (precondition not met) the server does not meet one of the prerequisites set by the requestor in the request.　　413 (Request entity too Large) The server cannot process the request because the request entity is too large to exceed the processing power of the server.　　414 (The requested URI is too long) The requested URI (usually the URL) is too long for the server to process.　　415 (Unsupported media type) The requested format is not supported by the requested page.　　416 (Request scope does not meet the requirements) if the page cannot provide the requested range, the server returns this status code. 　　417 (unmet expectations) the server does not meet the requirements for the expected Request header field. 5XX (server error) These status codes indicate that the server has an internal error while processing the request.　　These errors may be the error of the server itself, not the request.　　500 (server internal error) the server encountered an error and could not complete the request. 501 (not yet implemented) the server does not have the capability to complete the request.　　For example, this code may be returned when the server does not recognize the request method.　　502 (Error Gateway) The server receives an invalid response from the upstream server as a gateway or proxy. 503 (Service Unavailable) the server is not currently available (due to overloading or downtime maintenance).　　Typically, this is only a temporary state.　　504 (Gateway Timeout) The server acts as a gateway or proxy, but does not receive requests from the upstream server in a timely manner. 505 (HTTP version not supported) the HTTP protocol version used in the request is not supported by the server.

Server corresponding status code

When a user requests index.html for the first time, the server adds a response header called Last-modified, which describes the  last modification time of the index.html, and the browser caches the index.html content and the last response time. When the user  requests index.html two times, the request contains a header called If-modified-since, and its value is the first time the  server through the last-modified response to the value of hair to the browser, That is index.html last modification time,  if-modified-since request header is to tell the server, I here browser cache index.html Last modified time is this,  You see now index.html last modified time is this, if still, then you will not have to respond to this index.html  content, I will put the content of the cache directly displayed. And the server will get If-modified-since value, and index.html  the current last modified time, if the same, the server will send a response code 304, indicating that index.html with the browser last cache,  no need to send again, The browser can display its own cache page, if the comparison is different, then the index.html has been  modified, the server will respond 200.

You can specify the appropriate header, for example:

In the HTMl page, you can use <meta http-equiv= "" content= "> to specify the response header, for example, in the index.html page <meta http-equiv= "Refresh" content= "3;url=http://www.baidu.com" >, indicating that the browser will only display the index.html page for 3 seconds, Then automatically jumps to http://www.baidu.com.

Front-end HTML