异步数据传输

异步数据传输

HTTP协议

• 无状态协议
• 请求响应 ： 客户端请求，服务端响应
• 请求报文：请求方法，请求URI，协议版本，可选的请求首部字段，内容实体构成
• 响应报文：协议版本，状态码，原因短句，可选的响应首部字段，实体主体
• URI：统一资源标识符（URL是URI的子集）
  • URL转义
    • 全局方法
      • encodeURI —— 把字符串作为URI进行编码
      • decodeURI —— 可对该函数编码过的URI进行解码
• 方法（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 **
      • 求状态改变触发器（回调事件处理函数）
  • 实例常用方法
    • 创建请求 open(method，url，bool )
      • method：请求类型get/post
      • url：请求地址
      • bool：异步/同步请求
      • true发送异步请求（用户可以操作页面）；false发送同步请求（浏览器锁定当前页面，用户不能操作页面）
    • setRequestHeader() —— 指定请求的HTTP开头信息
    • send() —— 发送请求
      • 方法内传递提交参数(POST方法)，没有则默认为 null
      • 若是GET方法，可在 open 方法的 “URL” 后面追加参数
      • 请求发送到服务器端，收到数据会自动填充实例对象的属性
  • 提交不同格式的数据
    • FormData
      • 表示表单数据的键值对的构造方式
      • 可以使用 XMLHttpRequest.send() 方法送出
    • Document
    • Blob
    • ……

fetch

• 用于网络请求（现代浏览器均提供）
• 返回结果：Promise实例，用于接收请求数据

同源策略（了解）

• 保护某些用户数据的隐私与安全，会限制Ajax技术获取数据的范围和能力
• 有时也会绕过同源策略，实现跨域请求资源
  • 跨域：请求能够发送，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了
  • Ajax不可以发起跨域请求：跨域是为了阻止用户读取到另一个域下的内容 ，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应
• 一种约定，浏览器最核心最基本的功能
• 限制不同源之间执行特定操作
  • 同源：域名，协议，端口均相同
  • 特定操作：
    • 读取 Cookie，LocalStorage 等中的数据
    • 获取 DOM 元素
    • 发送 Ajax 请求