HTTP protocol network-related knowledge

1. Internal network IP (LAN)

   • In one area, we are connected to the same network (precisely: with a WIFI connection is not necessarily the same network, connecting different WIFI network may be the same, all watching configured routing switch), which is local area network
   • In the same local area network, members can visit each other (your computer is connected to the A network, the phone is also connected to the A network, then the mobile phone can access some of the information on your computer up => so you can make mobile-side development when the phone FBI)
   • HBuilder FBI also provides functions (add breakpoints, mobile phone access on the code, the program will take the break)

2. How his own native code uploaded to the remote server

   • The server is allowed to install anything except the need for exploitation of the environment (to keep the server clean) we are generally based FTP upload (there are a lot of tools FTP upload: FileZilla)

3. Open a browser and enter a URL in the address bar, press ENTER to see the whole page, the middle have experienced what things?

   • HTTP Request Phase: sending a request to the server

     • First, the browser sends a request to the DNS domain name server
     • Reverse DNS Analysis: According to the address in the browser requests the domain name to the DNS server to find the corresponding external server IP address
     • External network IP found, the server sends a request corresponding to the (first visit was to the server WEB site management tools: accurate is our first based tool to create a lot of service on the server when the client has accessed the server which match the specific service request)
     • URL address by port number carried in, find the corresponding server services, managed services and project source files

   • HTTP response phase: the content server clients need ready and returned to the client

     • The path name server request address, a question mark or a hash value of the reference mass, the content client needs to prepare and process
     • The content preparation response to the client (if the request is HTML or other such resources CSS file, the server returns the resource in the source file [file itself is not])

   • Browser rendering stage

     • The client browser receives the source code returned by the server, started drawing and rendering pages based on their own internal rendering engine (kernel)

       1. First calculate DOM structure, the TREE generated DOM
       2. Run the code from top to bottom, CSS and other resources to load content
       3. According RENDER TREE generated with the acquisition of CSS styles
       4. Start rendering and drawing

4. We request a complete response + called " HTTP Transaction " the transaction is complete once the operation requests and responses are indispensable

5. A page is fully loaded, you need to initiate many times HTTP transaction operations to the server

   • General: First, the HTML source code to get back when loading HTML encountered link / script / img [src] / iframe / video and Audio [not set preload = 'none'] ... and the server will re establish an HTTP transaction interaction
   • Special case: If we do resource caching (304), and is about to be loaded before resources have been loaded, so the operation and traditional HTTP transaction has not the same, they are read from the cache server and browser data fetch, read much faster than conventional

6. Send a request to the server at the client, and the server sends the content in response to the client when the intermediate mutual transmission of a lot of content (client some content delivery server, the server something in response to the client), we content delivery is referred to as " HTTP packets "

7. A complete URL of the composition

   • http://www.zhufengpeixun.cn:80/stu/index.html?name=xxx&age=25#teacher

   • URL / URN / URI URI = URL + URN URI: Uniform Resource Identifier URL: Uniform Resource Locator URN: Uniform Resource Name

   • [Transfer Protocol]

     • For transmission from the client and server interaction (similar courier brother)

       • HTTP: Hypertext Transfer Protocol (except plain text is transmitted, or the stream may also be a file transfer binary coded information), is the most commonly used transmission protocol WEB
       • HTTPS: SSL (Secure Sockets Layer Secure Sockets Layer) encrypted HTTP transport protocol based on more secure than HTTP (Web site involving payments generally are based on HTTPS completed)
       • FTP: File Transfer Protocol, commonly used to upload and download files of resources on the server

   • [Domain name] Domain Name

     • Level domain (Top Level Domain) www.qq.com
     • Second-level domain sports.qq.com
     • Level domain kbs.sports.qq.com
     • International domain name .com for commercial
     • Chinese .cn domain names for commercial
     • .net for network service providers supply (system classes often use the NET domain name)
     • .org for official organizations
     • .edu for educational institutions
     • .gov for government agencies

   • [The port number]

     • Identification used to distinguish different services on the same server (WEB-based service manager when creating a service can be specified), between different services generally can not use the same port number
     • HTTP => 80 default port number
     • HTTPS => default port number 443
     • FTP => default port number 21
     • If the current Web services, using the corresponding protocol default port management, so when users enter the URL when you can not specify the port number, the browser will default to the user's default port to the server
     • A range of port numbers on the server: 0 to 65535
     • WEBSTORM preview page: WS their own computer as a server, create a service on the server, the port number is 63342, the browser on your computer to preview their own services on the computer, the machine belonging to a service request with localhost (127.0.0.1) the local domain name to http: // localhost: 63342 / 201802LESSON / WEEK7 / 0522DAY1 / 1.html
     • Install an application on a server as a service may occupy a port number

   • [Request path name]

     • path
     • pathname
     • For example: /stu/index.html usually request the current service corresponding project directory, INDEX.HTML page STU folder. But there are special circumstances, is the current URL is "pseudo URL rewriting", we see the URL request is in fact not a real request (for example https://item.jd.com/4679424.html this URL is to be re written, it is likely to be the real URL address https://item.jd.com/detail.jsp?id=4679424 , in fact, jump to the details page, passing by a question mark number of different products, different show product details information, but .jsp this server rendering dynamic pages can not be indexed by search engines, it is not conducive to the page SEO, so we'll dynamic static pages, which also uses URL rewriting)
     • For example: / stu / info no such suffix information, are not generally used to request resource file, but the data for the requested AJAX interface address (if suffix .json class, is the same reason), but there is a except / stu / info / this is probably not the interface address, but did not specify the name of the resource request, the server will request the default resource file, usually index.html / default.html ...
     • DHTML: Dynamic pages refers to the contents of the current page is not dead but write dynamic binding, such as .jsp / .php / .aspx ... data in these pages are based on AJAX programming background or language processing , rendered by the server, and finally the results back to the client render rendered

   • [Question mark and a hash value parameter passing]

     • ?xxx=xxx&...#xxx
     • In HTTP transaction, question mark parameters are passed to the client information to the server a way (there may be a jump to a certain page, the page is used to pass parameters to the identified)
     • A hash value is generally related to the client-server interaction have nothing, mainly for anchor positioning and routing pages to switch HASH

8. HTTP packets

   • Start Line: request start line, in response to the start line

   • Header (head): request header, response header, general header

   • Body: request body, response body

   • General Universal head

     Request URL: http://www.zhufengpeixun.cn/  请求地址
     Request Method: GET  请求方式:GET/POST/DELETE/PUT/HEAD/OPTION...
     Status Code: 304 Not Modified   响应的HTTP状态码
     Remote Address: 125.39.174.137:80  主机地址(服务器外网IP地址)
     Referrer Policy: no-referrer-when-downgrade
     

   • Request Headers request header [client settings, the server receives]

     GET / HTTP/1.1  =>起始行(描述当前请求的一些基本信息：用的是1.1版本传输协议进行内容传输的)
     Host: www.zhufengpeixun.cn
     Connection: keep-alive
     Cache-Control: max-age=0
     Upgrade-Insecure-Requests: 1
     User-Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
     Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
     Accept-Encoding: gzip, deflate
     Accept-Language: zh-CN,zh;q=0.9
     Cookie: ... =>cookie信息一般都是放到头文件中实现和服务器端的数据通信的
     If-Modified-Since: Sun, 06 May 2018 10:02:42 GMT
     

   • Response Headers response header [settings server, the client obtains]

     HTTP/1.1 304 Not Modified  =>响应起始行（HTTP状态码）
     Date: Tue, 22 May 2018 09:18:56 GMT  =>服务器响应内容时候的“服务器端时间”（客户端获取这个时间的时候已经和真实的时间产生误差了，因为服务器返回内容到客户端接收到，也是需要时间的），并且这个时间是格林尼治时间（比北京时间慢8小时，北京时间是GMT+0800）
     Connection: keep-alive
     ETag: "700a6f-17f43-56b86a77513d3"
     Vary: Accept-Encoding,User-Agent
     Server: yunjiasu-nginx  //=>管理WEB服务的工具
     CF-RAY: 41ee32c192db66b8-TSN
     

   • The Response [Response body]

     • Returned by the server is valid and what is

   • Request Payload / Form Data [request body]

     • The client is passed to the server

9. HTTP packets and how to view on future work to develop and debug BUG crucial for the future involves interactive features (front-end <=> background) problems, find the cause of the problem are as follows

   • Open the console, find the requested address current interaction in the NET-WORK, click into it to see details
   • If the mode is passed to the server's error parameters or [distal Problems]
   • If the server returns an error message or API interface documentation and provision of content is not the same [back problems]
   • If the return data is correct, but to show there is a problem [front-end problem] determine their own front-end problem, based on the breakpoint (or code debugger) or console output, etc., you can start stepping

10. Client and server-side information exchange manner

    • [Client to the server]

      • Question mark parameter passing:

        • End of the URL address requested by a question mark mass participation ways to pass some information to the server / stu / info? Id = 12 & lx = man

      • Setting request header

        • Content client to the server needs to set the request header information (custom request header), the server may request the content by receiving the header information obtained

      • Setting request body

        • xhr.send ([AJAX SEND content delivery, the client is provided to the main content request, the server may receive the information]);

    • [Server back to the client]

      • Header information setting response

        • For example, the time to return to the client service in response to the head, to give the client time (response speed of the head is returned in response to the priority of the body) by the header information acquisition response

      • Setting response body

        • The main return information in the response body