URL解析过程及URL组成

URL解析过程及URL组成

1.网页访问解析全过程

1. 用户输入网址之后，浏览器解析网址，域名解析系统（DNS）查找对应的IP地址
2. 向服务器发起TCP链接请求，通过TCP三次握手建立链接，浏览器将http请求（基于TCP应用层协议–超文本传输协议）数据通过发给服务器
3. http事物由请求命令（客户端–>服务器）和响应结果（服务器–>客户端）组成
4. Web服务器根据http请求头的信息，得到响应数据返回给客户端。
5. 浏览器解析http response
   1. html文档解析（Dom Tree）
   2. 浏览器发送获取HTML及其对象
   3. Css解析
   4. JS解析

2. URL参数详解

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

• 一个完整的URL包括：协议部分、域名部分、端口部分、虚拟目录部分、文件名部分、参数部分、锚部分

名臣	对应位置
协议部分	protocol
域名部分	hostname
端口部分	port
虚拟目录部分	path
文件名部分	index
参数部分	query
锚部分	detail

3. URL参数获取方法

1. 获取URL部分参数。干货。。。
   以参数获取键值
   https://www.baidu.com/s?keyWords=搜索

  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. 常用的一些基本用法

// 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);