1、认识前后端交互：就是前端和后端的数据通讯。数据是保存在数据库中的，前端不能直接访问数据库，但是可以和服务端进行通讯，之后拿到数据，再之后就是前端的数据渲染。
2、前后端交互使用的技术：ajax（a：async异步的意思；j：javascript；a：and；x：xml是严格意义上的html）
ajax发送请求
=> 第一步: 实例化一个ajax对象
-> 语法: const 变量名(xhr) = new XMLHttpRequest()
=> 第二步: 配置请求信息
-> 语法: xhr.open('请求方式', '请求地址', 是否异步)
+ 请求方式: 严格按照接口文档执行
+ 请求地址: 严格按照接口文档执行
+ 是否异步:
- 默认发送的是异步请求 true
- 选填是false表示的是同步请求
=> 第三步: 发送请求
-> 语法: xhr.send()
=> 第四步: 注册一个响应的函数
-> 语法: xhr.onload = function () {
这里获取后端返回的结果
语法: xhr.responseText
}
注意: 一个ajax实例只能发送一个请求
// ajax默认发送的是异步请求，但是ajax请求不是每一步都是异步的，有的是同步请求。
// 所以之后书写的步骤是 1 2 4 3
// 发送ajax请求
// 第一步: 实例化一个ajax对象
const xhr = new XMLHttpRequest()
// 第二步: 配置请求信息
xhr.open('get','http://localhost:8888/test/first')
// 第四步: 配置一个响应的函数
xhr.onload = function() {
// 获取后端的结果
let res = xhr.responseText
console.log(res);
}
// 第三步: 发送请求
xhr.send()
3、在ajax出现之前，用户的页面上总是点击，页面会全部刷新，然后等待几分钟甚至更长的时间来重新加载资源，有时网络会比较慢，或者在加载页面之初，需要等待很长的时间。为此ajax便出现了，它以发送服务器额外的请求而不重新刷新页面，重新加载全部资源，而减少了网络资源加载请求，这使得请求的资源更少，加载的时间更短，用户等待白屏的时间更短，用户体验更好。无刷新获取数据。
4、ajax状态码：状态码: 0 - 4
状态码
=> 0: 表示的是实例化ajax对象成功
=> 1: 表示的是配置请求信息成功
=> 2: 表示的是接收后端的数据成功
-> 需要一个事件
-> readyStatechange
=> 3: 表示的是正在解析后端的数据 还没有完全解析完毕 只解析了部分数据
=> 4: 表示的是后端返回的数据已经完全解析完毕了
0:声明实例，但是还未调用open方法
1：已调用open方法，未调用send方法
2：已调用send方法，尚未收到响应
3、已收到部分响应
4、已收到所有响应，请求响应完成
5、GET请求和POST请求的区别
=> 语义化不同
-> get是获取的语意
-> post是提交的语意
=> 携带参数的位置不同
-> get会在地址后面携带
-> post会在请求体中携带
=> 携带参数的格式不同
-> get只能携带查询字符串 key=value&key1=value1
-> post可以携带任意数据类型的参数 但是需要做出特殊说明
=> 携带参数的大小不同
-> get一般只能携带 2 KB
-> post理论上是没有要求的 但是我们的服务器会做出限制
=> 安全性
-> get请求相对不安全 因为是明文传输
-> post相对比较安全 因为是暗文传输
6、请求测试
一、带有参数的get请求
// 带有参数的get请求
// 注意: get请求地址和参数之间需要使用?进行连接
// 第一步: 实例化一个Ajax对象
const xhr = new XMLHttpRequest();
// 第二步: 配置请求信息
xhr.open('GET', 'http://localhost:8888/test/third?name=Rose&age=23')
// 第三步: 注册一个响应函数
xhr.onload = function () {
let res = JSON.parse(xhr.responseText)
console.log(res);
}
// 第四步: 发送请求
xhr.send()
二、带有参数的post请求
特殊说明
=> 就是需要我们设置一个请求头
=> 在请求头中书写我们的说明情况
=> setRequestHeader(参数1, 参数2)
-> 参数1:
+ 是一个名称
+ 是一个固定的写法
+ content-type
-> 参数2:
+ 如果是查询字符串: 'application/x-www-form-urlencoded'
+ 如果是json格式字符串: 'application/json'
+ 二进制流的格式: 'multipart/form-data'
// 带有参数的post请求
// 第一步: 实例化个ajax对象
const xhr1 = new XMLHttpRequest()
// 第二步: 配置请求信息
xhr1.open('post', 'http://localhost:8888/test/fourth')
// 第三步: 注册响应事件
xhr1.onload = function () {
let res = JSON.parse(xhr1.responseText)
console.log(res);
}
// 设置一个请求头
xhr1.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 第四步: 发送请求
// xhr1.send(这里就是请求体)
// 在请求体中可以传递任意形式的参数
// xhr1.send('name:Jack&age:30')
// 设置请求体之后可以不设置请求头
xhr1.send('name=Jack&age=30')
// 设置一个请求头
xhr1.setRequestHeader('content-type', 'application/json')
// 第四步: 发送请求
// xhr1.send(这里就是请求体)
xhr1.send('{"name":"Jack","age":30}')
三、get请求携带参数携带请求头
// 第一步: 实例化一个Ajax对象
const xhr = new XMLHttpRequest();
// 第二步: 配置请求信息
xhr.open('GET', 'http://localhost:8888/test/third?name=Rose&age=23')
// 第三步: 注册一个响应函数
xhr.onload = function () {
let res = JSON.parse(xhr.responseText)
console.log(res);
}
// 设置请求头
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
// 第四步: 发送请求
xhr.send()
7、XML的介绍
XML：可扩展标记语言，被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。
8、AJAX的优点：可以无需刷新页面而与服务器端进行通信；允许你根据用户事件来更新部分页面内容
缺点：没有浏览历史，不能回退；存在跨域问题（同源）；SEO不友好
9、http协议
http协议（超文本传输协议），协议详细规定了浏览器和万维网服务器之间相互通信的规则。
10、express框架：是一个第三方，可以使用npm进行下载，是一个node框架，就是对原生node的高度封装，之前使用node能实现的现在使用express也能实现，而且更加的方便。
// 1、导入我们的express
const express = require('express')
// 2、创建一个服务器
const server = express()
// 3、创建路由规则
// request：对请求报文的封装
// response：对响应报文的封装
server.post('/users/login', (req, res) => {
// 注意: express 框架不会自动解析post请求的参数
res.send({
code: 1,
message: '恭喜你登录成功了'
})
})
// 4、监听一个端口号
server.listen(8080, () => console.log('服务器启动成功,成功监听 8080 端口号'))
11、nodemon自动重启工具
可以自动重新启动服务器
npm install -g nodemon
然后使用nodemon就可以了，nodemon serve
12、AJAX-IE缓存问题解决
IE会对ajax的请求结果做一个缓存，那么再次发送请求的时候，它走的是本地缓存，而不是服务器返回的最新数据，对于时效性比较强的场景，会影响正常结果，不能正常显示。
解决方案：?t='+Date.now()'。加一个参数，一般是不需要自己加
13、Ajax请求超时以及网络异常处理
// Ajax请求超时:给服务器设置延迟几秒才返回给用户结果
// 前端发送Ajax请求
// 超时 2S 设置
// 如果超过两秒还没响应结果，那么就取消这个请求
xhr.timeout = 2000
// 超时回调
xhr.ontimeout = function(){}
// 网络异常处理
xhr.onerror = function(){}
14、Ajax取消请求
// 在结果还没有渲染出来，手动取消请求
// abort方法，属于ajax对象的
// 需要注意的是：let有暂时性死区的问题，所以把xhr定义在外面并且不赋值
let xhr = null
xhr.abort()
15、ajax重复发送请求
用户发送很多次请求，这个时候服务器压力大，就会接收到很多次相同的请求
// 加一个标识变量
let isSending = false; // 是否正在发送ajax请求
// 当ajax的状态变为4，说明数据响应完毕
// 那么标志就进行一系列的改变，然后再判断就可以了
16、axios发送ajax请求
[axios中文文档 (javasoho.com)](https://www.javasoho.com/axios/index.html#google_vignette)
axios：可以在node中使用，支持Promise，拦截器机制等等
用axios发送ajax请求.Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
17、axios函数发送ajax请求
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
// 请求体参数
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
}).then(response => {
console.log(response)
console.log(response.status)
})
18、使用fetch函数来发送ajax请求（参考官方文档）
// fetch函数属于全局对象的，可以直接去调用，返回的结果是一个Promise对象
fetch('http://127.0.0.1:8000/fetch-server',{
// 方法
method:'POST',
// 请求头
headers:{
name:'cdscs',
assdfc:111
},
// 请求体：
body:'username=cdscsd&password=adimn'
}).then(response=>{
return response.text()
}).then(response=>{
console.log(response);
})
19、同源策略
同源策略：是一种浏览器的安全机制
同源：协议、域名、端口号三者必须完全相同
ajax 默认遵循同源策略
违背同源策略就是跨域
20、jsonp的实现原理
// jsonp：是一个非官方的跨域解决方案，只支持get请求
// jsonp的工作原理：利用script标签的跨域能力来发送请求的
