数据交互

概述

• 客户端和服务器之间交互的时候，客户端不仅可以发送请求给服务器，还可以把一些内容传递给服务器；服务器接收到请求后，也会把一些内容返回给客户端； 客户端 <----> 服务器
• [HTTP报文] 客户端和服务器之间传输的内容统称为HTTP报文
• 首部(头)：通用首部、请求头、响应头、自定义头
• 主体：请求主体、响应主体

AJAX的四步

• 1、 创建AJAX对象
  var xhr=new XMLHttpRequest;
• 2、打开请求的URL地址(配置一些基础参数)
  xhr.open([http method],[Request url and parameters],[sync/async],[user name],[user pass]);
• 3、绑定事件,用来监听AJAX状态的改变,在不同状态做不同的事情
  xhr.onreadystatechange=function(){
  if(xhr.readyState===4 && /^2\d{2}$/.test(xhr.status)){
  xhr.responseText;//->获取响应主体内容
  }
  }
• 4、发送AJAX请求
  xhr.send([post data]);

细节：

• 1、创建AJAX对象使用XMLHttpRequest在IE6浏览器中不兼容，我么需要使用ActiveXObject来做处理

• 2、http method ->HTTP请求方式
  不管使用哪一种方式，客户端都可以把数据传递给服务器，服务器也会把数据返回给客户端

• Request url 请求的URL地址，我们通过这个地址就可以找到对应的服务器以及对应的服务，再以及对应的目录地址(我们想要的). 真实项目中，这个地址后台开发提供给前端的(API文档).

• async/sync 同步或者异步，不写默认是true->异步，写成false是同步
  同步：AJAX请求没有完成，其它事情做不了
  异步：AJAX请求没有完成，继续可以做其它的事情

HTTP方法以及GET系列请求和POST系列请求的区别:

• 本质:get系列的一般应用于给服务器的少，从服务器拿的多这种需求，而post系列的一般应用于，给服务器的多，从服务器拿的少。在真实项目中，GET系列的话，我们传递给服务器内容一般都通过问号传参的方式，而POST系列一般都把数据放在请求主体中传递给服务器(约定俗成的规范)。

• GET 从服务器获取资源
  POST 往服务器发送资源
  HEAD 服务器响应报文只需包含起始行和首部，不需要返回响应主体。
  DELETE 告诉服务器删除某个资源
  PUT 往服务器发送资源

• GET请求没有POST请求传递给服务器的内容多
  GET: xhr.open('get','/getAll?name=zf&age=7');
  POST: xhr.open('post'.'/register');
  xhr.send('{"name":"刘晓洋","age":8...}');//->在SEND中传递的内容就是通过请求主体的方式把数据传递给服务器,我们一般都用JSON格式的字符串给服务器传递对应的内容。
  每一个浏览器对于URL的长度都是由大小限制的(谷歌8KB、火狐7KB、IE2KB)，所以使用GET请求我们不会给服务器传递太多的内容，因为超过限制的部分浏览器就会自己把它截了；而POST理论上不会受到限制的。

• GET请求会出现缓存(这里的缓存我们无法控制),POST不会
  不想要缓存的话,我们在每一次请求的时候在URL的末尾追加一个随机数即可
  xhr.open('get','/getAll?name=zf&age=7&_='+Math.random());

• GET请求没有POST请求安全

• GET特点：
  1、html中所有的href和src以及通过地址栏访问的资源，都是get方法
  2、没有请求主体
  3、因为该方法没有请求主体，所以需要把参数格式为请求参数，拼接到URL后面
  4、对发送的数据有大小限制（因为浏览器对URL的长度有大小限制 ie 2k，chrome 8k，ff 7k）
  5、可以被浏览器缓存（通过响应首部实现）

• POST特点：
  1、有请求主体
  2、没有大小限制
  3、永远不会被浏览器缓存
  4、数据即可以放在请求主体中，也可以放在请求参数中

• HEAD特点：
  1、和GET特点一模一样
  2、没有响应主体
  3、该方法既没有请求主体，也没有响应主体

• DELETE特点：
  1、和GET特点一模一样
  2、响应成功的状态码为202

• PUT特点：
  1、和POST特点一模一样
  2、该方法有幂等性，而POST没有
  幂等性= X^n===X

AJAX这件事的开始和结束:

• 从执行SEND后才发送的请求,AJAX这件事才开始;到xhr.readyState===4的时候，服务器才把所有的内容返回给客户端，此时AJAX这件事才结束。
• userName/userPass:一般不用
• xhr.onreadystatechange:AJAX的一个事件,当AJAX状态发生改变的时候就会触发这个事件,如果给这个事件绑定了方法,那么方法也会被执行
• xhr.readyState:
  0 UNSEND 未发送，执行完成new XMLHttpRequest的时候状态就为0了
  1 OPENED 已打开，执行完成xhr.open状态变为1了
  2 HEADERS_RECEIVED 响应头信息已经接收
  3 LOADING 响应主体内容正在加载
  4 DONE 响应主体内容加载完成
• xhr.timeout=3000 ->设置超时时间 xhr.ontimeout=function(){}
  xhr.abort() ->终止AJAX执行
  getAllResponseHeaders() ->获取响应头中的所有信息
  getResponseHeader([key]) ->获取响应头中的指定信息 xhr.getResponseHeader('Date') ->获取响应头中存储的服务器时间
  setRequestHeader([key],[value]) ->设置请求头信息

URL内容

• URI 统一资源标识符
• URL 统一资源定位符
• 作用：标识该资源在整个互联网上的唯一位置。
• 格式：
  http://zhangyatao:[email protected]:80
  http://www.baidu.com/s?wd=a&b=2&c=3
  <方案>://<<用户名>>:<<密码>>@<域名>:<端口>/<请求路径>?<请求参数>#hash
• 名词解释：
  方案：标识该请求使用什么协议去请求，如果不填写，浏览器设置默认方案为http
  端口：指定与服务器交互的端口。如果不填写会根据方案选择默认端口。
  默认端口：
  http -> 80
  https -> 443
  ftp -> 21
  请求路径：指定请求的资源路径
  请求参数的格式是固定的：?key=value&key1=value1&key2=value2
  请求参数：针对该次请求的过滤条件
  锚点：高级功能->实现前端路由
  URI是URL的超集->URI包括URL URN

网址访问的流程

1、解析URL
2、DNS解析（domain naming service） 把域名解析为ip地址
3、使用URL指定的协议，通过ip和端口去连接服务器
4、等待服务器响应
5、连接成功之后，发送请求
6、等到服务器响应
7、接收服务器响应
8、渲染收到的数据并断开连接

http协议：
原因：全世界90%的互联网流量都是通过http协议传输；ajax的内部原始就是操作的http协议；每一个前端开发人员必须掌握该协议；
超文本传输协议

作用：负责连接并传输http客服端和http服务器之间的数据。

请求：http客户端发送给http服务器
响应：http服务器返回给http客户端

顺序是固定的：先请求 后响应
请求和响应中的数据，统称为报文。

事务：事务包含[1,无限大)个事件，只有当包含的所有事件都完成，那么这个事务才算完成，否则失败。

http协议是一个事务，包含请求和响应两个事件。当请求和响应都完成之后，http才算完成，否则失败。

报文的结构：

请求报文：

• 1、起始行（请求行）
  作用：标识该请求基本信息
  http方法、请求地址、http版本号

• 2、首部(附属信息)
  cookie
  user-agent
  PC:
  Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2679.0 Safari/537.36
  mobile:
  Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1

• 3、主体（存放数据）
  文件上传、注册用户

响应报文：

• 1、起始行（响应的基本信息）
  http版本号、服务器响应码、状态码描述符
• 2、首部
  date
  content-length
• 3、主体

xhr.status：服务器响应的状态码

• 1xx http协议正在初始化
  101 切换协议 websocket
• 2xx http客户端请求成功
  200 成功
  202 服务器接受该请求
• 3xx 重定向和缓存
  301 永久移动
  302 临时移动
  站点或者页面之前的跳转，需要设置Location响应首部，来指定跳转的地址
  301会降低搜索引擎权重，而302不会。
  304 请求的静态资源未改变（缓存）
  需要使用2个响应首部和2请求首部
  响应首部：
  last-modified 标识请求的静态资源在服务器上最后一次修改的时间（GMT格式）
  etag 实体标签，服务器会给每个静态资源打上一个标签，只要这个静态资源已修改，那么将会生成一个新标签。
  请求首部：
  if-modified-since 该静态资源上一次请求时在服务器最后一次修改的时间
  if-none-match 该静态资源上一次请求时再服务器中的实体标签
  强缓存
  expire
  过期时间，单位是GMT。过期时间没有到期之前，一直使用不会去服务器请求该资源。
  缺点：因为每次校验该资源有没有到期，都是根据浏览器时间去校验，而浏览器时间是可以更改的。所以该缓存方案有一定的误差。
  cache-control：max-age 缓存多少秒
• 4xx http客户端请求失败
  400 错误的请求
  缺少参数、方案错误、端口错误、url长度过长
  401 未认证
  403 禁止访问
  404 未找到该资源
• 5xx http服务器错误
  只要出现5xx的状态码，一定是服务器的错误，和前端没有任何关系。
  MIME Type
  多用途因特网邮件扩展
  作用：标识请求或响应数据的格式
  MIME Type在http协议是通过通用首部Content-Type来标识。
  html text/html
  css text/css
  js text/javascript
  json application/json
  png image/png
  jpg image/jpeg
  jpeg image/jpeg
  gif image/gif
  格式：父类型/子类型
  注意事项：当内容为文本时，可以通过content-type来指定内容的编码格式
  返回UTF-8格式的html
  content-type: text/html; charset=utf-8

http版本号之间的区别：

• http的版本号 0.9、 1.0、 1.1、 2.0
• 1.1和2.0的区别
  1、多路复用
  2、首部压缩
  3、服务器推送
  4、数据格式从字符串改为数据帧
  表单提交有一个专门的Content-Type application/x-ww-form-urlencoded