异步数据传输
HTTP协议
- 无状态协议
- 请求响应 : 客户端请求,服务端响应
- 请求报文:请求方法,请求URI,协议版本,可选的请求首部字段,内容实体构成
- 响应报文:协议版本,状态码,原因短句,可选的响应首部字段,实体主体
- URI:统一资源标识符(URL是URI的子集)
- URL转义
- 全局方法
- encodeURI —— 把字符串作为URI进行编码
- decodeURI —— 可对该函数编码过的URI进行解码
- 全局方法
- URL转义
- 方法(Method) —— 告知服务器意图的HTTP方法
- GET —— 获取资源
- POST —— 向服务器端发送数据
- PUT —— 向服务器发送数据,改变数据信息
- DELETE —— 删除文件
- HEAD —— 获取报文首部
- OPTIONS —— 询问支持的方法
- 状态码 —— (表示请求成功或失败的数字代码)
- 1XX:信息性
- 2XX:成功
- 3XX:重定向
- 4XX:客户端错误
- 5XX:服务器端错误
Ajax异步请求
- Ajax(专注于数据传输)
- 改善用户体验,使网页实现异步更新(不重加载进行更新)
- Ajax技术与数据格式无关
- 实质:使用XMLHttpRequest 对象异步的向服务器发送请求
- 最早设计使用XML格式传输数据,现在基本是用JSON(JS天然支持其解析和序列化)
- XMLHttpRequest
- 一般流程
- 创建对象实例
- 创建请求
- 设置事件回调函数
- 发送请求
- 一般流程
- 实例常用属性
- readyState —— 请求状态
- 0:尚未初始化
- 1:正在发送请求
- 2:请求完成
- 3:请求成功,正在接收数据
- 4:接收数据成功
- status
- responseText —— 服务器返回的文本数据
- 请求响应 json 数据时得到的结果为字符串类型
- **onreadystatechange **
- 求状态改变触发器(回调事件处理函数)
- readyState —— 请求状态
- 实例常用方法
- 创建请求 open(method,url,bool )
- method:请求类型get/post
- url:请求地址
- bool:异步/同步请求
- true发送异步请求(用户可以操作页面);false发送同步请求(浏览器锁定当前页面,用户不能操作页面)
- setRequestHeader() —— 指定请求的HTTP开头信息
- send() —— 发送请求
- 方法内传递提交参数(POST方法),没有则默认为 null
- 若是GET方法,可在 open 方法的 “URL” 后面追加参数
- 请求发送到服务器端,收到数据会自动填充实例对象的属性
- 创建请求 open(method,url,bool )
- 提交不同格式的数据
- FormData
- 表示表单数据的键值对的构造方式
- 可以使用 XMLHttpRequest.send() 方法送出
- Document
- Blob
- ……
- FormData
fetch
- 用于网络请求(现代浏览器均提供)
- 返回结果:Promise实例,用于接收请求数据
同源策略(了解)
- 保护某些用户数据的隐私与安全,会限制Ajax技术获取数据的范围和能力
- 有时也会绕过同源策略,实现跨域请求资源
- 跨域:请求能够发送,服务端能收到请求并正常返回结果,只是结果被浏览器拦截了
- Ajax不可以发起跨域请求:跨域是为了阻止用户读取到另一个域下的内容 ,Ajax 可以获取响应,浏览器认为这不安全,所以拦截了响应
- 一种约定,浏览器最核心最基本的功能
- 限制不同源之间执行特定操作
- 同源:域名,协议,端口均相同
- 特定操作:
- 读取 Cookie,LocalStorage 等中的数据
- 获取 DOM 元素
- 发送 Ajax 请求