http与ajax入门笔记

1 HTPP

1.1 前端和后端如何通讯

前端:客户端 后端:服务端

职业规划建议

培养自己的人脉圈，以及建立自己的影响力

• 状态自己的总和能力
• 经常参加一些活动
• 开放分享(做讲师分享自己的智慧、写组件的个人博客做技术分享)

当我们在浏览器地址中输入URL地址，到最后看到页面，中间经历了哪些事情？
假设我们访问的是 www.baidu.com这个地址，按下enter建后，我们可以看到百度首页

• 百度页面并没有在我们自己的客服端本地，我们是输入地址后，才请求过来的
• 输入不同的域名可以看到不同的页面
• 有的网页是https，有的是http(也有的是ftp)
• 需要客户端联网才能完成这些事情

1.1.1 DNS服务器 域名解析服务

1.www.baidu.com  220.163.18.24
域名和服务器关联在一起，是通过DNS解析完成，所谓的DNS解析就是在dns服务上生成一条解析记录，标注了域名和对应的外网ip地址

1.1.2 都经历了哪些事情？

• 首先根据客户端输入的域名，到DNS服务器上进行反解析(通过域名找到对应服务器的外网ip)
• 通过找到外网的ip，找到对应的服务器
• 通过地址栏中输入的端口号(没输入是因为不同协议有自己默认的端口号)找到服务器上发布的对应项目
• 服务器获取请求资源的地址，例如/stu/index.html，把资源文件中的原代码找到
  • response 响应阶段
• 服务器端会把找的原代码返回给客户端(通过http等传输协议返回)
• 客户端接收到原代码后，会交给浏览器的内核(渲染引擎)进行渲染，最后由浏览器绘制出对应的页面
  • 服务器自主渲染

1.1.3 客户端和服务端交互(通讯)模型

1.2 第一部分 传输协议

1.2.1 URL、URI、URN

• URI : 统一资源标识符
• URL: 统一资源路径地址
• URN：统一资源名称
• URI=URL+URN

一个完整的url包含很多部分 www.yuque.com/as-giant/dz…?name=wang&age=2

1.2.2 第一部分:传输协议

传输协议是用来完成客户端和服务端的数据(内存)传输的，类似于快递小哥、负责把客户和商家的物品来回床底

• 客户端不仅可以向服务器发送请求，而且还可以吧一些内容传递给服务器
• 服务器端也可以把内容返回给客户端
  • 客户端和服务端传输的内容总称:http报文RequestResponse) , request+response两个阶段统称为一个HTTP事务(事务:一个完整的事情)

HTTP事务:

• 当客户端想服务器端发送请求，此时客户端和服务器端会简历一个传输通道(链接通道)，传输协议就是基于这个通道吧信息进行传输的
• 当服务器端接受到请求信息，把内容返回给客户端后，传输通道会自动销毁关闭

传输协议分类

• http:超文本传输协议(客户端和服务器端传输的内容除了文本以外)，还可以传输图片，音视频等文件流[二进制编码/base64],以及传输xml格式的数据等，是目前市场上应用最广泛的传输协议
• https:http ssl,它比http更加安全，要往数据内容的传输通道是经过ssl加密的(它需要在服务器端惊醒特殊的处理)，所以涉及资金类的网站一般都是https协议的
• ftp:资源文件传输协议，一般用客户端把资源文件(不是代码)上传到服务端，或者从服务器端下载一些资源文件（ftp传输的内容会http这类传输协议传输的内容多)

http报文

1、起始行

• 请求起始行
• 响应起始行

2、首部(头)

• 请求头：内置请求头、自定义请求头
• 响应式：内置响应头、自定义响应头
• 通用头：请求和响应都有的

3、主体

• 请求主体
• 响应主体

请求xxx都是客户端设置的信息，服务器获取这些信息
响应xxx都是服务器端设置的信息，客户端用来接受这些信息

1.3 第二部分 域名

设置域名其实就给不好记忆的服务器外网ip设置了一个好记忆的名字
顶级域名(一级域名):qq.com
二级域名:www.qq.com、v.qq.com、sports.qq.com
三级域名:kbs.sports.qq.com

1.4 第三部分 端口号

在服务器发布项目的时候，我们可以通过端口号区分当前服务器上不同的项目
一台服务器的端口号取值范围:0~65535之间，如果电脑上安装了很多程序，有一些端口号是被占用了

HTTP:默认端口号80
HTTP:默认端口号443
FTP:默认端口号21

对于上述三个端口号其实是很重要的，如果被其它程序占用的，我们则不能使用了，所以服务器上一般是禁止安装其它程序的

1.5 第四部分 请求资源文件的路径名称

/stu/index.html
在服务器中发布项目的时候，我们一般都会配置一些默认文档:用户即使不输入请求文件的名称，服务器也会找到默认文档(一般默认文档都是index/default...)
我们通常为了做seo优化，会把一些动态页面的地址(xxx.php、xxx.aspx、xxx.asp、xxx.jsp...)进行伪URL重写(需要服务器处理的)
item.jd.com/432527.html
不可能是有一个商品，自己就单独写一个详情页面，肯定是同一个详情页做的不同处理

1.5.1 第一种方案

由后台语言很久详情页模板动态生成具体的详情页面

1.5.2 第二种方案

当前页面就是一个页面，例如:detail.html/detail.php...,我们做详情页面的时候，开发是按照detail.html?id=432527 来开发的，但是这种页面不方便做seo优化，此时我们把真实的地址进行重写，重写为了让我们看到的是4325427.html

1.6 第五部分 问号传承

?name=zf&age=9
把一些通过xxx=xxx的方式，放在一个url的末尾，通过问号传递

【作用】
1.在ajax请求中，我们可以通过问号传递参数的方式，客户端吧一些信息传递给服务器，服务器更具传递信息的不一样，返回不同的数据

// $.ajax(url,{});
// $.get(url,function(){});
// 对于ajax请求的特殊写法，原理还是基于ajax方法实现 $.post $.script

$.ajax({
    url:'getPersonInfo?id=12'
    ...
})

// 当前案例，我们传递给服务器的编号是多少，服务器端就会把对应编号人员信息给返回
复制代码

2.消除ajax请求中get方式缓存

$.ajax({
	url:'xxx?_=0.123456'
	method:'get'
})
// 我们会在请求url的末尾最佳一个随机数_=随机数，保证每一次请求的url都是不一样的，以此来消除get请求一流的缓存问题
复制代码

3.通过url传递传输的方式，可以实现页面之间信息的通讯，例如:我们有两个页面A/B,A是列表页面、B是详情页，点击A中的某一条信息，进入到唯一的详情页B，如果展示不同的信息，这种操作就可以基于URL问号传递参数来实现了

例如:
sports.qq.com/kbsweb/game…
sports.qq.com/kbsweb/game…
在进入game.htm页面的时候，我们可以获取URL传递的参数值，更具传递参数值的不一样从服务器端获取不同的数据展示

在列表页面进行页面跳转的时候，我们需要记住的是跳转的同事传递不同的参数值

1.7 第六部分 HASH值

#xxx
URL末尾传递的井号什么，就是HASH值(哈希值)

[作用]
1、页面中锚点定位
2、前端路由(SPA单页面开发)

2 AJAX

2.1 什么是ajax？

async javastctip and xml,异步的js和xml

2.2 xml:可扩展的标记语言

作用是通过存储数据的(通过自己扩展的标记名称清晰的展示出来数据结构)

ajax值所以称为异步的js和xml,主要原因是:当初最开始用ajax实现客户端和服务器端数据通信的时候，传输的数据格式一般都是xml格式的数据，我们把他们称为异步js和xml(现在一般都是基于json格式进行数据传输)

<?xml version='1.0' encoding='UTF-8'?>
<root>
    <student>
        <name>张三</name>
        <age>25</age>
        <score>
            <english>90</english>
            <math>90</math>
            <chinese>90</chinese>
        </score>
    </student>
</root>
复制代码

2.3 异步的js

这里的异步不是ajax只能基于异步进行请求(虽然建议都是使用异步变成)，这里的异步特指的是局部刷新

2.3.1 局部刷新 vs 全局刷新

在非完全前后端分离项目中，前端开发只需要完成页面的制作，并且把一些基础的人机交互效果使用js完成即可，页面中需要动态呈现内容的部分，都是交给后台开发工程师做数据绑定和基于服务器进行渲染的(服务器端渲染)

[优势]

• 动态展示的数据在页面的原代码中可以看见，有利于seo优化推广(有利于搜索引擎的收录和抓取)
• 从服务器获取的结构就已经是最后要呈现的结果了，不需要客户端做额外的事情，所以也没加速快(前提是服务器端处理的速度够快，能够处理过来)，所以类似于京东、淘宝这些网站，首屏数据一般都是由服务器渲染的

[弊端]

• 实时更新的数据，每一次想要展示最新的数据，页面都要重新的刷新一次，这样肯定不行
• 都交给服务器端做数据渲染，服务器端的压力太大，如果服务器处理不过来，页面呈现的速度更慢(所以京东、淘宝这类网站,除了首屏是服务器端渲染的，其他屏一般都是客户端做数据渲染绑定)
• 这种模式不利于开发(开发效率低)

目前市场上大部分项目都是前后端完全分离的项目(也有非完全前后端分离的)

2.3.2 前后端完全分离

前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完全渲染的

• 想服务器端发送ajax请求
• 把从服务器端获取的数据解析处理，拼接成为我们需要展示的html字符串
• 把拼接好的字符串替换页面中某一部分的内容(局部刷新),页面整体不需要重新加载，局部渲染极客

[优势]

• 我们可以根据需求，任意修改页面中某一部分的内容(例如实时刷新),整体页面不刷新，性能好，体验好(所有表单验证，需要实时刷新的等需求都要基于ajax实现)
• 有利于开发，提高开发的效率
  • 前后端的完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后台用什么技术，真正意义上实现了技术的划分
  • 可以同时进行开发:项目开发开始，首先制定前后端数据交互的结构文档(文档中包含了，调用哪个接口或者那些数据等协议规范),后台吧接口线写好(目前很多公司也需要前端自己拿node来模拟这些接口)，客户端按照接口调取极客，后端再去实现接口功能极客

[弊端]

• 不利于seo优化:第一次从服务器端获取的内容不包含需要动态绑定的数据，所以也没的原代码中没有这些内容，不利于seo收录，后期听过js添加到页面中的内容，并不会写在页面的源代码中(是源代码不是页面结构)
• 交由客户端渲染，首先需要把页面呈现，然后通过js的异步ajax请求获取数据，然后数据绑定，浏览器在动态增加部分重新渲染，无形中浪费了一些时间，没有服务器端渲染页面呈现速度快

2.4 ajax请求

let xhr = new XMLHttpRequest();
// 不兼容ie6以及更低版本的浏览器(ie6 activeXobject)

// 打开请求地址(可以理解为一些基础配置，但是并没有发送请求呢)
xhr.open([method],[url],[async],[username],[user password]);

// 监听ajax改变，获取响应信息(获取响应头信息，获取响应主体信息)
xhr.onreadystatechange=()=>{
	if(xhr.readyState===4 && xhr.readyState===200){
  	let result = xhr.responseText;// 获取响应主体中的内容
  }
}

// 发送ajax请求(括号中传递的信息内容是请求主体的内容)

xhr.send(null)
复制代码

分析第二部分的细节点

xhr.open([method],[url],[async],[username],[user password]);
复制代码

2.4.1 ajax请求方式（method）

get系列的请求

• get
• delete
• head
• ...

post系列的请求(推送)

• post
• put:想服务器中增加指定的资源文件
• ...

不管哪一种请求方式,客户端可以吧信息传递给服务器，服务器也可以吧信息返回给客户端，只要get系列一般以获取为主(给的少)

1. 我们想获取一些动态展示的信息，一般使用GET请求，因为只需要向服务器发送请求，告诉服务器端想要什么，服务器端就会把需要的数据返回
2. 在实现注册功的时候，我们需要把客户端输入信息发送给服务器进行存储，服务器一般返回成功是成功等状态，此时我们一般都基于post请求完成
3. ....

get系列请求和post系列请求，在项目是在中存在很多的区别

1. get请求传递给服务器的内容一般贸易post请求传递给服务器的内容多
2. 原因:get请求传递给服务器内容一般都是基于url地址问号传递参数设置请求主体**来实现的。浏览器都已自己的关于url的最大长度限制(谷歌:8kb、火狐:7kb、ie:2kb)超过限制长度的部分，浏览器会自动截取掉，导致传递给服务器的数据缺失
3. 理论上post请求通过主体传递是没有大小限制，真实项目中为了保证传输的速度，我们会限制大小(例如:上传的资料或者图片我们会做大小的限制)
4. get请求容易出现缓存(这个缓存不可控:一般我们都不需要)，而post不会出现缓存(除非自己做特殊处理)
5. 原因:get是通过url问号传参传递给服务器信息，二post是设置请求主体
6. 设置请求主体不会出现缓存，但是url传递参数就会了
7. 
   

setTimeout(()=>{
	$.ajax({
  	url:'getList?lx=news',
    success:result=>{
    	// 第一次请求数据回来，间隔一分钟后，浏览器又发送一次请求，
      // 但是新发送，不管是地址还是传递的参数都和第一次不一样，
      // 浏览器很有可能会把上一次数据获取，而不是获取新的数据
    }
  });
},60000)

// 解决方案:每一次重新请求的时候，在URL的末尾追加一个随机数，保证每一次请求的地址不完全一直
// 就可以避免是从缓存中读取的数据

setTimeout(()=>{
	url:'getList?lx=news_='+Math.random()
	success:result=>{
  
  }
})
复制代码

3.GET请求没有post请求安全(post也并不是十分安全，只是相对安全)
原因:还是因为get是url传递给服务器有一种比较简单的黑客技术:url劫持，也就是可以客户端传递给服务器劫持掉，导致信息泄露

2.4.2 url

请求数据的地址(api地址)，真实项目中，后台开发工程师会编写一个api文档，在api文档中汇总了获取那些数据需要使用哪些地址，我们按照文档操作即可

2.4.3 async

异步(sync同步)，设置当前ajax请求是异步还是同步的，不写默认是异步(true)，如果设置false，则代表当前请求是同步的

用户名和密码这两个参数一般不用，如果你请求的url地址所在服务器设定了访问权限，则需要我们提供通行的用户名和密码才可以(一般服务器都可以允许匿名访问的)

2.5 AJAX状态码

xhr.readyState

1. unsent 未发送，只要创建一个ajax对象，默认值是零
2. opened 我们已经执行了xhr,open这个操作
3. headers_resceived 当前ajax的请求已经发送，并且已经接收到服务器端返回的响应头信息了
4. loading 响应主体内容正在返回的路上
5. done 响应主体内容已经返回到客户端

2.6 HTTP网络状态码

记录了当前服务器返回信息的状态

xhr.status

• 200成功，一个完整的http事务完成了(以2开头的状态码一般性都是成功)
• 3开头一般也是成功，只不过是服务器做了特殊的处理
  • 301 moved permanently 永久转移(永久重定向)
  • 302 move temporarily 临时转移(临时重定向，新的http版本中任务307是临时重定向)
    • 一般用于服务器的负载均衡:当前服务器处理不了，我把当前请求临时交给其他的服务器处理(一般图片请求经常出现302,很多公司都有单独的图片服务器)
  • 304 not modified 从浏览器缓存中获取数据
    • 把一些不经常更新的文件或者内容缓存到浏览器中，下一次从缓存中获取，减轻服务器压力，也提高页面加载的速度
• 4开头的，一般性都是失败的，而且客户端的问题偏大
  • 400:请求参数错误
  • 401:无权限访问
  • 404:访问地址不存在
• 5开头的，一般都是失败，而且服务器的问题偏大
  • 500:internal Server Error 未知的服务器错误
  • 503:Service Unavailable 服务器超负债
  • ...

面试题 ajax中总共支持几个方法
let xhr = new xmlHttpReques();
console.dir(xhr);

[属性]
readyState:存储的是当前ajax的状态
response/responseText/responseXML : 都是用来接收服务器返回的响应主体的内容，只是更具服务器返回内容的格式不一样，我们使用不同的属性接收即可
responseText是最常见的，接收到结果是字符串格式的(一般服务器返回的数据都是json格式字符串)
responXML:偶尔会用到，如果服务器返回的是xml文档数据，我们需要使用这个属性接收
status:记录了服务器返回的http状态码
statusText:对返回状态码的描述
timeout:设置当前ajax请求的超时时间，假设我们设置时间为3000(MS)，从AJAX请求发送开始，3秒后响应主体内容还没有返回，浏览器会把当前ajax请求强行断开

[方法]
abor():强行终端ajax请求
getAllResponseHeaders():获取全部的响应头信息(获取的结果是一丢字符串文本)
getResponseHeader(key):获取指定属性名的响应头部信息，例如:xhr.getResponseHeader('data')获取响应头中存储的服务的时间
open():打开一个url地址
overridMimeType():重写数据的MIME类型
send():发送ajax请求(括号中书写的内容是客户端请求主体吧信息传递给服务器)
setRequestHeader(key,value):设置请求头信息(可以是设置自定义请求信息)

[事件]
onabort:当ajax被终端请求触发这个时间
onreadstatechange:ajax状态发烧改变，会触发这个事件
ontimeout:当AJAX请求超时，会触发这个事件
...

let xhr = new XMLHttpRequest(();
xhr.open('get','temp.json?_='+Math.random(),true);
xhr.setRequesHeader('cookie','xxx'); // => 设置请求内容不能出现中文汉字
xhr.timeout = 10;
xhr.ontimeout=()=>{
	console.log('当前请求已经超时');
  xhr.abort();
}

xhr.onreadystatechange = () =>{
		let {readyState:state,status} = xhr;
    
    // 说明请求数据成功了
    if(!/^(2|3)\d{2}$/.test(status)) return
    
    // 在状态为2的时候就获取响应头信息
    if(state === 2){
    	let headerAll = xhr.getAllResponseHeaders(),
      		serverDate = xhr.getResponseHeader('date');// 获取的服务时间是格林尼治时间(相比北京时间差不多差8小时)
          console.log(headerAll,new Date(serverDate));
      		return;
    }
  
  // 在状态为4的时候就获取响应头信息已经回来了
    if(state === 4){
    	let valueText = xhr.responseText,// 获取到的结果一般都是json字符串(可以时间json.parse把其转换成json对象) 
          valueXML = xhr.responseXML; // 获取到的结果是xml格式的数据，(可以通过xml的一些常规操作获取存储的指定信息)
      // 如果服务器返回的是xml文档，responseText获取的结果是字符串，而responseXML获取的是标准xml文档
      console.log(valueText,valueXML);
    }

}

xhr.send('name=wjw&age=23&sex=man')
复制代码

2.7 AJAX中的同步和异步编程

let xhr = new XMLHttpRequest();
xhr.open('get','temp.json',false);
xhr.onredystatechange=()=>{
	console.log(xhr.readySate);
}
xhr.send();
// 只输出一次结果4
复制代码

let xhr = new XMLHttpRequest();
xhr.open('get','temp.json',false);
xhr.send();// => 同步开始发送ajax请求，开启ajax任务，在任务没有完成之前，什么事情都做不了
// 下面绑定时间也做不了 => loading => 当readyState ===4 的是ajax任务完成，开始执行下面的操作
xhr.onreadystatechange=()=>{
	console.log(xhr.readySate);
}
// 绑定方法之前状态已经为4了，此时ajax的状态不会再改吧其他值，所以事件永远不会被处罚
// 一次都没有执行方法(使用ajax同步编程，不要把send放在事件监听前
// 这样我们无法在绑定方法中获取响应主体的内容)

复制代码

let xhr = new XMLHttpRequest();

// 下面绑定时间也做不了 => loading => 当readyState ===4 的是ajax任务完成，开始执行下面的操作
xhr.onreadystatechange=()=>{
	console.log(xhr.readySate);
  if(xhr.readySate===1) {
  	xhr.setRequestHeader('aaa','bbb');
  }
}

xhr.open('get','temp.json',false);
// xhr.readyState === 1 AJAX特殊处理的一件事:执行OPEN状态变为1,会主动把之前监听的方法执行一次
// 然后再去执行SEND

xhr.send();
// xhr.redayState === 4 AJAX任务借宿，主任务队列完成

复制代码

2.8 AJAX类库的封装

JQ中的AJAX

$.ajax({
	url:'xxx.txt',
  method:'get',
  dataType:'json',
	cache:false,
  data:null,
  async:true,
  success:function(result){
  
  },
  error:funciton(msg){
	
	},
  complate:function(msg){
	
	}
})
复制代码

2.8.1 url

请求api地址

2.8.2 method

请求方法get/post..在老板的jq中使用是type，使用type和method相同效果

2.8.3 dataType

dataType只是我们预设获取结果的类型不会影响服务器的返回(服务器端一般给我们返回的都是json格式的字符串),如果我们预设是json,那么类库中将吧服务器返回的字符串转换为json对象，如果我们预设是text(默认值)，我们把服务器获取的结果直接拿过来操作即可，我们预设的值还可以xml等

2.8.4 cache

设置是否清楚缓存，只对get系列请求有作用，默认是true不清除缓存，手动设置false，jq类库在请求url的末尾最佳一个随机数来清楚缓存

2.8.5 data

我们通过data可以把一些信息传递给服务器，get系列请求会把data中的内容拼接在url的末尾通过问号传参的方式给服务器，post系列请求会把内容请求放在主题传递给服务器;data的值可以设置为两种格式，字符串、对象，如果是字符串，设置的值是传递给服务器的就是什么，如果设置成对象，jq会把对象变为xxx=xxx&xx=xx,这样来数据传递

13.8.6 async

设置同步或者异步，默认是true代表异步，false代表同步

2.8.7 success

dangajax请求成功后redayState===4&&statue是以2或者3开头的 请求成功后jq会把传递的回调函数执行，并且获取的结果当做实参传递给回调函数(result就是我们从服务器获取的结果)

2.8.8 error

请求错误触发回调函数

2.8.9 complate

不管请求还是错误的还是正确的都会触发这个回调函数(他就是完成的意思)

....

2.9 封装自己的AJAX库

• url
• method/type
• data
• dataType
• async
• cache
• success
• 
  

~funcction(){

    class ajaxClass {
        // send ajax
        init() {
            let xhr = new XMLHttpRequest();
            xhr.onreadustatechange = () => {
                if (!/^[23]\d{2}$/.test(xhr.status)) return;
                if (xhr.redayState === 4) {
                    let result = xhr.responseText;
                    //	DATA-TYPE
                    switch (this.dataType.toUpperCase()) {
                        case 'TEXT':
                            break;
                        case 'JSON':
                            result = JSON.parese(result);
                            break;
                        case 'XML':
                            result = xhr.responseXML;
                            break;
                    }
                    this.success(result);
                }
            }
            // DATA
            if (this.data !==null) {
                this.formatData();
                if (this.idGET) {
                    this.url +=this.querySymbol()+this.data;
                    this.data = null;
                }
            }


            // CACHE
            this.isGET ? this.cache();
            xhr.open(this.method, this.url, this.async);
            xhr.send();
        }

        cacheFn() {
            // THIS:EXAMPLE
            !this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null;
        }

        querySymbol() {
            // THIS:EXAMPLE
            return this.url.indexOf('?') > -1 ? '&' : '?';
        }

        formatData(){
             // THIS:EXAMPLE
             if(Object.prototype.toString.call(this.data)==='[Object Object]'){
                 let obj = this.data,
                     str = ``;
                     for (const key in obj) {
                         if (object.hasOwnProperty(key)) {
                          str +=`${key}=${obj[key]}`; 
                         }
                     }
                str = str.replace(/&$/g,'');
                this.data = str;
             }
        }

    }

    let ajax = function () {

    };

    // init parameters

    window.ajax = function ({
        url = null,
        method = 'GET',
        type = 'GET',
        data = null,
        dataType = 'JSON',
        cache = true,
        async = ture,
        suceess = null
    } = {}) {
        let _this = new ajaxClass(); // 创建实例
        ['url', 'method','data','dataType','cache','async','success'].forEach((item)=>{
            if (item === 'method') {
                _this.method = type === null ? method : type;
                return;
            }
            if (item==='success') {
                 _this.suceess = typeof success === 'function' ? success : new Function();
            }
            _this[item] = eval(item);

        })
        _this.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method);
        _this.init();
        return _this;
    };
}();

ajax({})
复制代码

3 内容编码和加密解密方法

3.1 正常的编码解码(非加密)

3.1.1 escape/uescape

主要就是把中文汉字进行编码的(一般只有js语言支持,也经常应用于前端页面通讯时间的中文汉字编码)

3.1.2 encodeURL/decodeURL

基本上所有的编码语言都支持

3.1.3 encodeURlComponent/decodeURIComponent

和第二种方法非常的累死，区别在于

需求:我们url问号传递参数的时候，我们传递的参数值还是一个url或者包含很多特殊字符，此时为了不影响住要的url，我们需要把传递的参数值进行编码，使用encodeURLComponent处理

let str = 'http://www.baidu.com/?',
    obj={
    	name:'wjw',
      age:9,
      url:'http://www.sogou.com/?x=1'
    }
// => 把obj中的每一项属性名和属性值拼接到url的末尾(问号传参的方式)

for(let key in obj){
	str +=`${key}=${obj[key]}`;
  // => 不能使用encodeURL必须使用encodeURlComponent,原因是encodeURL不能编码
}
console.log(str.replace(/&$/g,''));

复制代码

3.1.4 也可以通过加密的方法进行编码解码

1、可逆转加密(一般都是团队自己玩的规则)
2、不可逆加密(一般都是基于MD5加密完成的，可能会把md5加密后的结果二次加密)

<script src='js/md5.min.js'></script>
<script>
	hex_md5('0000')
  // "c6f057b86584942e415435ffb1fa93d4"
</script>
复制代码

转载于:https://juejin.im/post/5cab021ef265da24c56e8fed