http和ajax

93 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 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 跨域是指域不同

域 = 协议+域名+端口