【前后端交互】Ajax + HTTP

奔跑の大可爱

已于 2023-03-18 10:36:33 修改

阅读量694

点赞数

分类专栏：前后端交互文章标签： ajax http 前端

于 2022-11-10 15:31:55 首次发布

本文链接：https://blog.csdn.net/weixin_64210950/article/details/127788883

版权

前后端交互专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

一、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	服务器`超载或系统维护`