URL resolution process and URL composition

URL resolution process and URL composition

1. The whole process of web page access analysis

1. After the user enters the URL, the browser resolves the URL, and the domain name resolution system (DNS) looks up the corresponding IP address
2. Initiate a TCP link request to the server, establish a link through the TCP three-way handshake, and the browser will send the http request (based on the TCP application layer protocol-hypertext transfer protocol) data to the server through
3. HTTP transaction consists of request command (client -> server) and response result (server -> client)
4. The web server obtains the response data and returns it to the client according to the information in the http request header.
5. The browser parses the http response
   1. html document analysis (Dom Tree)
   2. Browser sends to get HTML and its objects
   3. Css analysis
   4. JS parsing

2. Detailed URL parameters

protocol://hostname:port/path/index.html?query=1&query1=3# detail

• A complete URL includes: protocol part, domain name part, port part, virtual directory part, file name part, parameter part, anchor part

Famous minister	Corresponding position
Agreement part	protocol
Domain name part	hostname
Port part	port
Virtual directory part	path
File name part	index
Parameter section	query
Anchor part	detail

3. URL parameter acquisition method

1. Get some URL parameters. Dry goods. . .
   Get the key value by parameter
   https://www.baidu.com/s?keyWords=Search

  function getParam(name) {
    
    
          // 获取参数
          var url = window.location.search;
          //正则筛选地址
          var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
          // 匹配目标参数
          var result = url.substr(1).match(reg);
          // 返回参数值
          return resule ? decodeURIComponent(result[2]) : null;
        }
        // console.log(getParam(keyWords))===>搜索 

2. Some basic usages commonly used

// 1. 设置或获取对象指定的文件名或路径。
console.log('pathname',window.location.pathname) 
//2.设置或获取整个 URL 为字符串。
console.log('href',window.location.href); 
//3.设置或获取与 URL 关联的端口号码。
console.log('port',window.location.port);
//4.设置或获取 URL 的协议部分。
console.log('protocol',window.location.protocol);
//5.设置或获取 href 属性中在井号“#”后面的分段。
 console.log('hash',window.location.hash);
//6.设置或获取 location 或 URL 的 hostname 和 port 号码。
console.log('host',window.location.host);
//7.设置或获取 href 属性中跟在问号后面的部分。
console.log('search',window.location.search);