知识不怕旧，关键在于在旧知识的基础上不断创新与提高！
引入一个问题：打开一个浏览器，在地址栏输入一个网址，按下 enter 键到看到整个页面，中间都经历了哪些事情?
这是一个前端的面试题，相信很多朋友都知道，知道了解的朋友可以略过这一块。
1、http请求阶段：向服务器发送请求
浏览器首先向dns域名解析服务器发送请求，dns域名解析服务器对该地址进行解析，根据浏览器请求地址中的域名，到dns服务器中找到对应的服务器外网ip地址，进而通过找到的外网ip，向对应的服务器发送请求，通过url地址中携带的端口号，找到服务器上对应的服务，以及服务所管理的项目源文件；
2、http响应阶段：服务器把客户端需要的内容准备好，并且返回给客户端
服务器端根据请求地址中的路径名称、问号传参或者哈希值，把客户端需要的内容进行准备和处理，把准备的内容响应给客户端；
注意：如果请求的是html或者css等这样的资源文件，服务器返回的是资源文件中的源代码
3、浏览器渲染阶段
客户端浏览器接受到服务器返回的源代码，基于自己内部的渲染引擎（内核）开始进行页面的绘制和渲染。
url，在上诉中一个很重要的媒介：https://i.cnblogs.com/helloworld.html?name=xxx&sex=xxx#boy，我们再来认识认识这个东西是什么？
1、url / urn / uri
uri = url + urn
uri：统一资源标识符
url：统一资源定位符
urn：统一资源名称
2、传输协议（http）：用来传输客户端和服务器端交互的信息（这是个很重要的东西）
http：超文本传输协议（除了传递普通的文本，还可以传递文件流或者进制编码等信息），是目前最常用的web传输协议
https：基于ssl（secure sockets layer 安全套接层）加密的http传输协议，比http更加的安全
扩展：ftp：文件传输协议，一般用来实现资源文件在服务器上的上传下载
3、域名：i.cnblogs.com
这个没什么好说的，基本就是为了语义化，好记
4、端口号（8080）：用来区分同一台服务器上不同服务的标识
http => 默认端口号 80
https => 默认端口号 443
ftp => 默认端口号 21
端口号范围：0~65535之间
5、请求路径名称：/helloworld.html
（1）有后缀信息：/helloworld.html
一般都是请求当前服务对应的项目目录中，helloworld.html页面
（2）无后缀信息：/helloworld
一般都不是用来请求资源文件的，而是用于ajax数据请求的接口地址
6、问号传参及哈希值：?name=xxx&sex=xxx#boy
在http事务中，问号传参是客户端把信息传递给服务器的一种方式(也有可能是跳转到某一个页面，把参数值传递给页面用来标识的)
哈希值一般都跟客户端服务器交互没啥关系，主要用于页面中的锚点定位和hash路由切换
看了这么多是不是觉得啰嗦了呢，别急，正题这不就来了吗！
ajax ：async javascript and xml 异步的 js 和 xml
1、操作
我要评论 1 // 创建ajax实例：ie6中是不兼容的（忽略这万恶的）
2 let xhr = new xmlhttprequest();
3
4 // 打开请求：发送请求之前的一些配置项
5 // 1.http method 请求方式
6 // get/delete/head/options/trace/connect/post/put
7 // 2.url 向服务器端发送请求的api
8 // 3.async 设置ajax请求的同步异步，默认是异步（写true也是异步），false是同步，一般都使用异步编程，防止阻塞后续代码执行
9 // 4.user-name/user-pass：用户名密码，一般不用
10 xhr.open([http method],[url],[async],[user-name],[user-pass]);
11
12 // 事件监听：一般监听的都是 ready-state-change 事件（ajax状态改变事件），基于这个事件可以获取服务器返回的响应头响应主体内容
13 xhr.onreadystatechange=()=>{
14 if(xhr.readystate===4 && xhr.status===200){
15 xhr.responsetext;
16 }
17 };
18
19 // 发送ajax请求：从这步开始，当前ajax任务开始，如果ajax是同步的，后续代码不会执行，要等到ajax状态成功后在执行，反之异步不会
20 xhr.send([请求主体内容]);
2、http请求方式
所有的请求都可以给服务器端传递内容，也都可以从服务器端获取内容
get：从服务器端获取数据(给少拿多)
post：向服务器端推送数据(给多拿少)
delete：删除服务器端的某些内容（一般是删除一些文件）
put：向服务器上存放一些内容（一般也是存放文件）
head：只想获取服务器返回的响应头信息，不要响应主体中的内容
options：一般使用它向服务器发送一个探测性请求，如果服务器端返回的信息了，说明当前 > 客户端和服务器端建立了连接，我们可以继续执行其它请求了
3、get vs post（重点嘛）
（1）传递给服务器信息的方式不一样
1 // get是基于url地址“问号传参”的方式把信息传递给服务器
2 xhr.open('get','/haha/list?xxx=xxx&xxx=xxx')
3
4 // post是基于“请求主体”把信息传递给服务器
5 xhr.send('xxx=xxx&xxx=xxx')
（2）get不安全，post相对安全
（3）get会产生不可控制的缓存,post不会
4、ajax状态
- 0 ：刚开始创建xhr，还没有发送
- 1 ：已经执行了open这个操作
- 2 ：已经发送ajax请求（ajax任务开始），响应头信息已经被客户端接收了（响应头中包含了：服务器的时间、返回的http状态码...）
- 3 ：响应主体内容正在返回
- 4 ：响应主体内容已经被客户端接收
5、http网络状态码
根据状态码能够清楚的反映出当前交互的结果及原因
- 200 ok 成功(只能证明服务器成功返回信息了，但是信息不一定是你业务需要的)
- 301 moved permanently 永久转移（永久重定向）
- 302 move temporarily 临时转移（临时重定向 =>307）
- 304 not modified 设置缓存
- 400 bad request 请求参数错误
- 401 unauthorized 无权限访问
- 404 not found 找不到资源(地址不存在)
- 413 request entity too large 和服务器交互的内容资源超过服务器最大限制
- 500 internal server error 未知的服务器错误
- 503 service unavailable 服务器超负荷
6、xhr的属性和方法
- xhr.response 响应主体内容
- xhr.responsetext 响应主体的内容是字符串（json或者xml格式字符串都可以）
- xhr.responsexml 响应主体的内容是xml文档
- xhr.status 返回的http状态码
- xhr.statustext 状态码的描述
- xhr.timeout 设置请求超时的时间
- xhr.withcredentials 是否允许跨域（false）
- xhr.abort() 强制中断ajax请求
- xhr.getallresponseheaders() 获取所有响应头信息
- xhr.getresponseheader([key]) 获取key对应的响应头信息
- xhr.open() 打开url请求
- xhr.overridemimetype() 重写mime类型
- xhr.send() 发送ajax请求
- xhr.setrequestheader() 设置请求头
后面就是让我们动动自己的小手，实现你自己代码吧！
如对本文有疑问， 点击进行留言回复！！
Android 入门第七讲01-数据存储（数据存储概述，文件存储（raw和asserts目录读写，data/data/包名目录读写，sdcard目录读写），SharedPreferences读写）
vue-axios系列:axios拦截器，配置请求头，配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论