【前后端交互】Ajax + HTTP

一、Ajax 介绍

（一）客户端与服务器

1、基础定义

• 客户端：上网过程中，负责获取和消费资源的电脑
• 服务端：上网过程中，负责存放和对外提供资源的电脑
• URL
  • 定义：统一资源定位符（Uniform Resoure Locator），是每个网络资源的唯一地址
  • 作用：浏览器只有通过 URL 地址，才能正确定位资源存放位置，从而成功访问对应资源
  • 语法：protocol: // hostname[:port] / path / [;parameters][?query]#fragment
  • 组成
    • 通信协议：客户端与服务器之间的通信协议
    • 域名：存放该资源的服务器 IP 地址名称
    • 资源路径：资源在服务器上的具体存放位置

2、客户端与服务端通信

• 通信步骤：客户端请求-服务器处理-服务器响应，适用网络所有资源

3、资源请求

• 资源类型：text、img、audio、video、data
• 请求工具：XMLHttpRequest 对象，var xhrObj = new XMLHttpRequest()
• 请求方式
  • get：获取服务端资源
  • post：向服务器提交数据

（二）Ajax

• Ajax：异步 JavaScript 和 XML（Async Javascript And XML），利用 XMLHttpRequest 对象实现网页和服务器的数据交互

1、jQuery 中的 Ajax

• 背景：浏览器提供的 XMLHttpRequest 用法复杂，jQuery 封装为简易版本
• 用法
  • $.get(‘url’ [,{data}] [,callback])
  • $.post(‘url’ [,{data}] [,callback])
  • $.ajax({type/method:‘GET/POST’, url:’ ', data:{请求携带的数据}, success:fn(res)})

2、接口

• 接口：使用 Ajax 请求数据时，被请求的 URL 地址，就叫数据接口（简称接口），接口具有各自请求方式
• 接口测试工具
  • 作用：检测接口是否可以正常访问
  • 优点：在不写代码的情况下，对接口进行调用和测试
  • 推荐：PostMan
• 接口文档
  • 定义：接口的说明文档，是调用接口的依据
  • 组成
    • 接口名称：标识各接口的简单说明
    • 接口 URL：接口调用地址
    • 调用方式：GET / POST
    • 参数格式：接口需要传递的参数，每个参数必须包含参数名称、参数类型、是否必选、参数说明
    • 响应格式：接口返回值的详细描述，一般包含数据名称、数据类型、说明
    • 返回示例：通过对象形式例举服务器返回数据的结构，可选

二、form 表单

• 表单：网页中主要负责数据采集功能
• 组成：表单标签、表单域、表单按钮

（一）<form>标签常用属性

• <form>标签用于采集数据，<form>标签属性用于规定如何把采集到的数据发送给服务器

属性	值	描述
action	URL 地址	提交表单时的发送地址（未指定时默认当前页面）
method	GTE（提交少量、简单数据） POST（提交大量、复杂或包含文件上传的数据，更安全）	何种方式将表单提交到 action URL
enctype	application/x-www-form-urlencoded（默认，发送器编码所有字符） multipart/formdata（文件上传时必须使用，不对字符编码） text/plain	发送表单数据前的编码方式
target	_self（默认） _blank（新窗口打开） _parent（在父框架集中打开） _top（在整个窗口打开） framename（在指定框架打开）	打开 action URL 的位置

（二）阻止表单默认提交

1、同步提交

• 定义：通过点击 submit 按钮触发表单提交，从而使页面跳转到 action URL 的行为
• 缺点
  • 页面跳转到 action URL 指向地址，用户体验感差
  • 页面之前的状态和数据丢失
• 解决方案：表单仅采集数据，Ajax 负责数据提交

2、Ajax 提交

• 监听事件
  • $(‘form’).submint(function(event){})
  • $(‘form’).on(‘submit’,function(event){})
• 阻止表单默认提交
  • event.preventDefault()

$("form").submint(function (e) {
  e.preventDefault();
});
$("form").on("submit", function (e) {
  e.preventDefault();
});

（三）快速操作表单数据

1、快速获取表单数据

• 语法：$(‘form’).serialize()
• 优点：一次性获取表单所有数据，简化操作
• 注意：必须为每个表单元素添加 name 属性（不重名）

2、快速清空表单数据

• 转为原生 DOM 对象 reset()清空
  • $(‘form’)[0].reset()

三、Ajax 进阶

（一）XMLHttpRequest 的基本使用

• XML：可扩展标记语言（eXtensible Markup Language）， 就像 HTML 用来显示数据，XML 用来传输和存储数据，是各应用程序间进行数据传输的最常用工具
• XMLHttprRequest：简称 xhr，浏览器提供的基于 XML 的 HTTP 请求，用于在后台与服务器交换数据

1、使用 xhr 发起 GET 请求

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 调用 xhr.send() 函数
• 监听 xhr.onreadystatechange 事件

// 1、创建 xhr 对象
var xhr = new XMLHttpRequest
// 2、调用 open 函数，指定请求方式和URL地址
xhr.open('GET','url?key1=val1&key2=val2') // 查询字符串：URL 地址后面拼接参数
// 3、调用send函数，发起Ajax请求
xhr.send()
// 4、监听onreadystatechange事件
xhr.onreadystatechange = function(){
  // 4.1、监听xhr对象的请求状态readyState和服务器响应状态status
  if(xhr.readyState === 4 && xhr.status === 200){
    // 4.2、打印服务器响应回来的数据
    console.log(xhr.responseText)
  }
}

（1）readyState 属性

值	状态	描述
0	UNSENT	XMLHttpRequest 对象已创建，尚未调用 open 方法
1	OPENED	open() 方法已调用
2	HEADERS_RECEIVED	send() 方法已调用
3	LOADING	数据接收中，response 属性已包含部分数据
4	DONE	Ajax 请求完成，数据传输已完成或失败

（2）查询字符串

• 定义：URL 地址后面的拼接参数，格式为?key1=val1&key2=val2
• 本质：无论$.get()、$.ajax()，还是xhr 对象发起 GET 请求，携带参数时都将参数以查询字符串的形式追加到 URL 地址后面发送给服务器

（3）URL 编码与解码

• 编码：URL 地址中只允许出现英文相关字母、标点、数字，如果需要包含中文等字符，需要对中文字符进行编码（转义）
• 原则：使用安全字符（无特殊用途/意义的可打印字符）表示不安全字符，即使用英文字符表示非英文字符
• 浏览器提供的 API
  • 编码函数：encodeURL()
  • 解码函数：decodeURL()
• 注意：浏览器自动对 URL 编码，多数情况下程序员无需关注 URL 地址的编码和解码操作

2、使用 xhr 发起 POST 请求

• 创建 xhr 对象
• 调用 xhr.open() 函数
• 设置 Content-Type 属性（固定写法）
• 调用 xhr.send() 函数，同时指定要发送的数据
• 监听 xhr.onreadystatechange 事件

// 1、创建 xhr 对象
var xhr = new XMLHttpRequest
// 2、调用 open 函数，指定请求方式和URL地址
xhr.open('POST','url')
// 3、设置 Content-type 属性（固定写法）
shr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
// 4、调用send函数，同时将数据以查询字符串的形式提交给服务器
xhr.send('key1=val1&key2=val2&...')
// 5、监听onreadystatechange事件
xhr.onreadystatechange = function(){
  // 5.1、监听xhr对象的请求状态readyState和服务器响应状态status
  if(xhr.readyState === 4 && xhr.status === 200){
    // 5.2、打印服务器响应回来的数据
    console.log(xhr.responseText)
  }
}

（二）数据交换格式

• 定义：服务器与客户端进行数据传输与交换的格式
• 类型：XML 和 JSON

1、XML

• XML：可扩展标记语言（eXtensible Markup Language）， 就像 HTML 用来显示数据，XML 用来传输和存储数据，是各应用程序间进行数据传输的最常用工具
• 缺点
  • 格式臃肿体积大，传输效率低
  • 在 JS 中解析 XML 较繁琐
    

2、JSON

• 定义：JS 对象表示法（JavaScript Object Notation）,是 JS 对象数据和数组数据的字符串表示
• 优点：轻量级文本数据交换格式，类似 XML 用于存储和传输数据，但是更小、更快、更易解析

（1）JSON 结构

• 对象结构：{"key1":val1, "key2":val2, …}
  • key：必须用英文双引号包裹的字符串
  • val:数据类型仅支持数字、字符串、布尔值、null、数组、对象6种
• 数组结构：[100, “java”, true, null, {“苹果”}, [90]]
  • val:数据类型仅支持数字、字符串、布尔值、null、数组、对象6种

（2）注意事项

• 属性名、字符串等必须用双引号包裹
• JSON 不支持注释/undefined/函数
• JSON 最外层必须是对象或数组格式

（3）JSON 和 JS 转化

• 序列化：var json = JSON.stringify(obj)
• 反序列化：var obj = JSON.parse(json)

（三）封装 Ajax 函数

（四）XMLHttprRequest lv2 新特性

1、XMLHttprRequest

• 缺点
  • 只支持文本数据传输，无法读取和上传文件
  • 传送和接收数据时，没有进度条，仅提示是否完成

2、XMLHttprRequest lv2

• 新功能
  • 可以设置 HTTP 请求时限
  • 可以使用 FormData 对象管理表单数据
  • 支持上传文件
  • 可以获得数据传输进度信息

（1）设置 HTTP 请求时限

• 等待时长：xhr.timeout = n（毫秒）
• 指定回调：xhr.ontimeout = function(event){}

（2）FormData 对象管理表单数据

• 定义：HTML5 新增对象，可以模拟表单操作，方便表单处理
• 提交步骤
  • 新建 FormData 对象
  • 为 FormData 添加表单项
  • 创建 xhr 对象
  • 指定请求类型与 URL 地址
  • 直接提交 FormData 对象，与提交网页表单效果一致
  • onreadystatechange 事件监听

// 1、新建 FormData 对象
var fd = new FormData()
// 2、为 FormData 添加表单项
fd.append('key1','val1')
fd.append('key2','val2')
fd.append('key3','val3')
// 3、创建 xhr 对象
var xhr = new XMLHttpRequest()
// 4、指定请求类型与 URL 地址
xhr.open('POST', 'URL')
// 5、直接提交 FormData 对象，与提交网页表单效果一致
xhr.send(fb)

• 获取步骤
  • 获取表单元素
  • 监听表单元素的 submit 事件
  • 根据 form 表单创建 FormData 对象，自动将表单数据填充到 FormData

// 1、获取表单元素
var form = document.queryselector('form')
// 2、监听表单元素的 submit 事件
form.addEventListener('submit', function(e){
  // 3、根据 form 表单创建 FormData 对象，自动将表单数据填充到 FormData
  e.preventDefault()
  var fd = new FormData(form)
  var xhr = new XMLHttpRequest()
  xhr.open('POST', 'URL')
  xhr.send(fb)
})

（3）上传文件

• 定义 UI 结构
• 验证是否选择文件
• 向 FormData 追加文件
• 使用 xhr 发起上传文件请求

（4）数据上传进度

• xhr.upload.onprogress 事件监听
• 已传输字节：e.loaded
• 需传输字节：e.total
• 百分比进度：Math.ceil((e.loaded / e.total) * 100)

var xhr = new XMLHttpRequest()
xhr.upload.onprogress = function(e){
  if(e.lengthCompuable){
    var percentComplete = Math.ceil((e.loaded / e.total) * 100)
  }
}

（五）jQuery 高级

1、jQuery 实现文件上传

（1）定义 UI 结构

（2）验证是否选择文件

• 将 jQuery 对象转为 DOM 对象，获取选中的文件列表
• 判断是否选择文件

$('button').on('click', function(){
  // 将 jQuery 对象转为 DOM 对象，获取选中的文件列表
  var files = $('file')[0].files
  // 判断是否选择文件
  if(files.length <= 0){
    return alert('请选择图片')
  }
})

（3）向 FormData 追加文件

// 向 FormData 追加文件
var fd = new FormData()
fd.append('avatar', files[0])

（4）使用 xhr 发起上传文件请求

$.ajax({
  method:'POST',
  rul:' ',
  data:fd,
  // 不修改 Content-Type 属性，使用 FormData 默认值 
  content-Type: false,
  // 不对 FormData 中的数据进行 url 编码，而是原样发送服务器
  processData: false,
  success:function(res){}
})

2、jQuery 实现 loading 效果

（1）ajaxStart(callback)

• Ajax 请求开始时执行该函数，callback 中 show() 效果
• $(document).ajaxStart() 函数监听当前文档内所有 Ajax 请求

（2）ajaxStop(callback)

• Ajax 请求结束时执行该函数，callback 中 hide() 效果
• $(document).ajaxStop()

（六）Axios

• 定义：Axios 是专注于网络数据请求的库
• 优点
  • 对比 xhr 更简单易用
  • 对比 jQuery 更轻量化

1、axios 发起 GET 请求

• 语法：axios.get(‘url’, {params: /参数/}).then(callback)

axios.get('url', {params:{key1:val1, key2:val2}}).then(function(res){
  // res.data 是服务器返回数据
  var result = res.data
})

2、axios 发起 POST 请求

• 语法：axios.get(‘url’, {/参数/}).then(callback)

axios.get('url', {key1:val1, key2:val2}).then(function(res){
  // res.data 是服务器返回数据
  var result = res.data
})

3、axios 直接发起请求

• 语法：axios({method:‘GET’/‘POST’, url:‘’,
  data:{/* POST数据 /}, params:{/ GET数据 */}}).then(callback)

axios({
  method:'GET', 
  url:'',
  params:{/* GET数据 */}
}).then(function(res){
  var result = res.data
})

axios({
  method:'POST', 
  url:'',
  data:{/* POST数据 */}
}).then(function(res){
  var result = res.data
})

四、跨域与 JSONP

（一）同源策略和跨域

（1）同源

• 同源：两个 URL 的协议、域名和端口号相同
• 同源策略：浏览器提供的一个安全功能，限制非同源 URL 进行资源交互

（2）跨域

• 跨域：两个 URL 的协议、域名和端口号存在不同
• 跨域拦截：浏览器允许发起跨域请求，但是浏览器拦截跨域响应的数据，无法被页面捕获
• 实现跨域

跨域请求解决方案	JSONP	CORS
本质	临时解决方案	跨域 Ajax 请求根本解决方案
优点	兼容性好	支持 GET 和 POST 请求
缺点	仅支持 GET 请求	不兼容低版本浏览器

（二）JSONP

• 定义：JSON 的一种“使用模式”（JSON with Padding），用于解决浏览器跨域访问的问题

1、JSONP 实现原理

• 实现原理：<script>标签不受浏览器同源策略影响，通过 src 属性请求非同源 JS 脚本，通过函数调用形式接收跨域响应数据
  • 定义回调函数
  • 用<script>标签的 src 属性请求接口，通过查询字符串形式确定调用函数名称
  • 回调函数获取跨域资源

// 1、定义一个 success 回调函数
<script>
function success(data){
  console.log('JSONP获得data数据')
  console.log(data)
}
</script>
// 2、通过<script>标签，请求接口数据
<script src='url?callback=success&key=val'></script>

2、jQuery 中的 JSONP

• jQuery 提供的 $.ajax() 函数，不仅支持真正的 Ajax 数据请求，也支持 JSONP 数据请求

（1）携带参数

• jQuery 发起 JSONP 请求，默认自动携带参数 callback=jQueryxxx（回调函数名称）
  • 自定义参数：jsonp
  • 自定义回调函数名称：jsonpCallback

$.ajax({
  url:'url?key=val',
  // 使用 $.ajax() 发起 JSONP 请求，必须指定 dataType 为 jsonp
  dataType:'jsonp',
  // 发送到服务端的参数名称，默认为 callback
  jsonp:'callback',
  // 自定义回调函数的名称，默认值为 jQueryxxx 格式
  jsonpCallback:'abc',
  success:function(res){}
}) 

（2）jQuery 中 JSONP 实现过程

• jQuery 采用动态创建和移除<script>标签方式，也通过 src 属性实现 JSONP 跨域数据访问
  • 发起 JSONP 请求：动态向 <header>append 一个<script>标签
  • JSONP 请求成功：动态从 <header>移除刚才 append 的<script>标签

（三）防抖和节流

1、防抖

• 定义：事件被触发后，延迟 n 秒后再执行回调，n 秒期间事件再次触发则重新计时
• 优点：有效减少请求次数，节约请求资源
• 应用：输入框

// 1、定义延时器 ID —— 防抖动的 timer
var timer = null
// 2、定义防抖函数
function debounceSearch(keywords){
  timer = setTimeout(function(){
    // 发起 JSONP 请求
    getSuggestList(keywords)
  }, n000)
}
// 3、触发 keyup 事件时，清空 timer
$('input').on('keyup', function(){
  clearTimeout(timer)
  // 其他代码
  debounceSearch(keywords)
})

• 全局缓存
  • 定义全局缓存对象
  • 渲染内容时，将用户输入当做键，返回数据作为值进行缓存
  • 触发事件时，先判断缓存中是否有数据

var cacheOby = {}

cacheObj[k] = res

if(cacheObj[keywords]) {
  return renderSuggestList(cacheObj[keywords])
}

2、节流

• 定义：连续事件在n 秒内仅触发一次
• 优点：减少触发频率，节约 CPU 资源，提升性能
• 应用：图片切换、鼠标事件（跟随、滑动）

$function(){
  // 获取图片元素
  var angel = $('img')
  // 监听文档的 mousemove 事件
  $(document).on('mousemove', function(e){
    // 设置图片位置
    $(angel).css('left', e.pageX + 'px').css('right', e.pageY + 'px')
  })
}

• 节流阀
  • 执行前判断节流阀状态
    • 空：可以执行下次操作
    • 非空：不能执行下次操作
  • 执行后
    • 节流阀重置为空，可以执行下次操作

$function(){
  var angel = $('img')
  // 1、定义节流阀 timer
  var timer = null
  $(document).on('mousemove', function(e){
    // 3、判断节流阀状态
    if(timer) {return}
    timer = setTimeout(function(){
      $(angel).css('left', e.pageX + 'px').css('right', e.pageY + 'px')
      // 2、节流阀重置为空，可以执行下次操作
      timer = null
    },n000)
  })
}

五、HTTP 加强

（一）HTTP 协议

1、通信

• 定义：信息的传递与交换
• 三要素：主体、内容、方式

2、通信协议

• 定义：通信双方采用约定的格式来发送和接收消息

3、HTTP 协议

• 定义：超文本传输协议（HyperText Transfer Protocol），规定客户端与服务器间进行网页内容传输时遵循的传输格式，简称 HTTP 协议
• 交互模型：请求/响应交互模型

（二）HTTP 请求消息

1、HTTP 请求消息

• HTTP 请求：客户端发起的请求
• HTTP 请求消息：客户端发送到服务端的消息，又叫做 HTTP 请求报文

2、HTTP 请求消息组成

• 请求行：请求方式、URL、HTTP 协议版本
• 请求头：描述客户端基本信息，从而提交给服务器（键/值对）
  • User-Agent：浏览器类型
  • Content-Type：发送的数据格式
  • Accept：接收的响应类型
  • Accept-Language：接收语言
• 空行：请求头后面是空行，表示头部至此结束，分隔请求头与请求体
• 请求体：存放通过 POST 方式提交到服务器的数据（ GET 请求没有请求体）

（三）HTTP 响应消息

1、HTTP 响应消息

• HTTP 响应消息：服务器响应给客户端的消息内容，又叫做 HTTP 响应报文

2、HTTP 响应消息组成

• 状态行：HTTP 协议版本、状态码、状态码描述
• 响应头：描述服务器基本信息，从而响应给客户端（键/值对）
• 空行：响应头后面是空行，表示头部至此结束，分隔响应头与响应体
• 响应体：存放服务器响应给客户端的资源内容

（四）HTTP 请求方法

• 作用：表明对服务器资源执行的操作，最常用的请求方法为 GET 和 POST

序号	方法	描述
1	GET	(查询)发送请求获取服务器资源，数据放在协议头
2	POST	(新增)向服务器提交资源（如表单/文件），数据存在请求体
3	PUT	(修改)完整替换更新指定资源数据，没有就新增
4	DELETE	(删除)删除指定资源的数据
5	HEAD	类似 GET，但索要的只是响应头，响应体将不会被返回
6	OPTION	允许客户端查看服务器的支持的http请求方法
7	CONNECT	HTTP 代理，把服务器作为跳板代替用户去访问服务器专访网页
8	TRACE	追踪服务器收到的请求，用于测试或诊断
9	PATCH	PUT 方法的补充，部分更新指定资源的数据

（五）HTTP 响应状态码

• 定义：表识响应状态
• 分类

分类	分类描述
1xx	信息，服务器收到请求，需要请求者继续执行操作
2xx	成功，操作被成功接收并处理
3xx	重定向，需要进一步的操作以完成请求
4xx	客户端错误，请求包含语法错误或无法完成请求
5xx	服务器错误，服务器在处理请求的过程中发生了错误

• 常见状态码

状态码	描述	含义
200	OK	请求成功，已经正常处理完毕
201	Created	已创建，成功请求并创建了新资源，通常用于 POST 或 PUT 请求
301	Moved Permanently	请求永久重定向，转移到其它 URL
302	Found	请求临时重定向
304	Not Modified	未修改，请求被重定向到客户端本地缓存
400	Bad Request	客户端请求存在语法错误
401	Unauthorized	客户端请求没有经过授权
403	Forbidden	客户端的请求被服务器拒绝，一般为客户端没有访问权限
404	Not Found	客户端请求的 URL 在服务端不存在
408	Request Timeout	请求超时
500	Internal Server Error	服务端内部错误
501	Not Implemented	服务器不支持该请求方法
502	Service Unavailable	服务器超载或系统维护