一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第11天,点击查看活动详情。
http1.0
1、只能传文本类的数据 2、无状态 3、短链接 4、性能低 就是因为短链接
1 method 方式
get delete 有限制 最大32k 少量数据
post put 最大2G
head 只返回头 不返回内容
2 enctype 数据的方式
application/x-www-form-urlencoded 键值对 传输数据表单提交默认,ajax post方式需要头设置
multipart/form-data 传输文件 需要设置请求头 Content-Type (文件)
text/plain 文本传输 ajax 默认的请求头设置
3 原生AJAX
-
1、建立对象 xhr = new XMLHttpRequest() 不兼容ie6
-
2 建立链接 xhr.open('post', '1.php', true), 第一参数是method方式 第二个url,第三个是是否异步
-
3 发送 xhr.send() 可以发送参数 以key=value&key=value
-
4 监听状态变化
xhr.onreadystatechange = function() { 通信状态变化
xhr.readyState
0 通信开始
1 建立链接
2 发送请求
3 接受完成 头部 信息完成
4 接受完成 body 数据完成
接口返回的code码
xhr.status 状态是200 为正确
1XX 是消息 只返回头信息
301 永久重定向 302 临时重定向 304 使用内存 4XX 请求错误 5XX 服务器错误
接收数据
xhr.response 现在常用
xhr.responseXML 以前常用的xml格式的数据 }
ajax2.0 兼容ie10以上
- 1 formdata 是个容器 最常见的是上传文件用 常用方法 set get append
- 2 上传文件, 监控上传文件
set 方法会把append添加的覆盖掉(set一次性覆盖会把之前都盖了)
let file = new formdata().set('f1', <input type='file'>)或 new formdata().append('f1',<input type='file'>);
常用方法
xhr.upload// 对象 里面有方法
xhr.upload.loaded // 方法 上传完成
xhr.upload.onprogress //方法 // 监听上传动作
xhr.upload.onbort // 终止是触发
xhr.upload.onerror // 报错
xhr.upload.onloadstart // 上传开始
xhr.upload.onloadend // 上传完成 必须要放在open之前
- 3 cors 跨域 跨域 ajax2.0支持 response返回头加'Access-Control-Allow-Origin','*' 是1.0 就可以加的 缺点单项认证 此时都服务器谁都可以访问了
4 formdata 支持post类的请求 http2.0
1 强制使用https
2 性能高 一、面向流 二、头压缩 三、多路复用
3 双向通信
4 服务器推送
5 JSONP 方式
JSONP方式后台都会返回一个函数,相当于引入了一个show(s:{a:1,b:2}); 然后在自己的html页面 写一个相对应的函数 show(){}; 引入完成自己就是触发
6 跨域是指域不同
域 = 协议+域名+端口