目录
一、前后端
二、前后端接口
三、Ajax
1. ajax接口步骤
2. 返回为json格式
四、请求方式
五、案例：登录
一、前后端
前端：用户可以看见的界面，我们一般浏览网页时看到的界面，展现网页数据给用户看的地方。
后端：要将前端的数据存储到数据库中，并且把数据库的数据传递给前端。
数据库：存储数据的地方。
前后端交互：前端将数据传递给服务端，并且能够从服务端接收到返回的数据的过程。
二、前后端接口
前端与后端进行数据交互的统称， 也叫做数据接口， 指前端通过HTTP(ajax)请求获取到的数据或者执行的某项操作。 为确保前后端(工程师)的协作沟通， 一般由前端和后端一起来定义接口的规范， 规范的内容一般包含接口的地址， 接口的输入参数和输出的数据格式(结构), 最终由后端来实现这些规范， 为前端提供符合规范的接口。
接口文档：一个文本，详细写了服务器的一些信息，包括请求信息，请求方式，携带参数，响应数据等。前端需要按照接口文档进行开发。
（详见：https://github/f2e-journey/treasure/blob/master/api.md）
三、Ajax
1. ajax接口步骤
1. 创建 ajax 对象
var xhr = new XMLHttpRequest()
2. 配置本次请求信息
xhr.open(请求方式，请求地址，是否异步)
请求方式：按照接口文档进行书写
请求地址：按照接口文档书写，基准地址+请求地址
是否异步：默认是 true 表示异步请求，选填为false，表示同步请求
3. 注册请求完成事件
xhr.onload = function () {}
请求完成：本次请求发送出去，服务器接收到了我们的请求，并且服务器返回的信息已经回到浏览器。
如何拿到后端返回的数据？ 语法：xhr.responseText
4. 把请求发送出去
xhr.send()
例如：
<script>
//1. 创建一个ajax 对象
var xhr = new XMLHttpRequest()
//2.配置本次请求信息
//请求方式：按照接口文档进行书写
//请求地址：按照接口文档书写，基准地址+请求地址
//是否异步：默认是 true 表示异步请求，选填为false，表示同步请求
xhr.open('GRT', 'http://localhost:8080/test/first', true)
//3. 配置一个请求完成后触发的事件
//请求完成：本次请求发送出去，服务器接收到了我们的请求，并且服务器返回的信息已经回到浏览器
xhr.upload = function () {
//如何拿到后端返回的数据
//语法：xhr.responseText
console.log(xhr.responseText)
console.log('请求完成')
}
//4. 把本次请求发送出去
xhr.send()
</script>2. 返回为json格式
当后端返回的是json 格式的数据的时候，我们需要进行单独的解析
语法：JSON.parse(xhr.responseText)
返回值：解析好的 js 格式的数据
<script>
//1. 创建一个ajax 对象
var xhr = new XMLHttpRequest()
//2. 配置本次的请求信息
xhr.open('GRT', 'http://localhost:8080/test/scend', true)
//3. 配置一个请求完成后触发的事件
xhr.upload = function () {
//解析json格式
var res = JSON.parse(xhr.responseText)
console.log(res)
}
//4. 把本次请求发送出去
xhr.send()
</script>四、请求方式
| GET | POST |
| 偏向获取的语义化 | 偏向提交的语义化 |
| 参数是查询字符串 | 参数格式多样，但是需要特殊说明 |
| 大小有限制 2KB 左右 | 理论上没有限制 |
| 参数位置在地址后面 | 参数位置在请求体内 |
//1. Get请求
var xhr = new XMLHttpRequest()
//需要携带参数
//get请求，直接写在地址后面进行参数的书写
xhr.open('GET','http://localhost:8080/test/third?name=小张小张啊&name=19', true)
xhr.onload = function () {
console.log(JSON.parse(xhr.responseText))
}
xhr.send()
//2. POST请求
var xhr = new XMLHttpRequest()
//需要携带参数
//post请求，不用写在地址后面进行参数的书写
xhr.open('POST','http://localhost:8080/test/third', true)
xhr.onload = function () {
console.log(JSON.parse(xhr.responseText))
}
//注意：当发送POST请求时，并且需要携带参数时，需要进行特殊说明
//语法:xhr.setRequestHeader('content-type',你传递参数的格式)
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
//send后面（）内书写请求体的位置
xhr.send('name=小张小张啊&name=19')五、案例：登录
分析需求：
问题1： 什么时候进行发送请求？
点击登录按钮的时候，需要给 form 标签绑定一个表单提交事件。
问题2：需要拿到哪些信息？
需要拿到用户填写的用户名和密码。
问题3：需要如何发送给后端？
按照接口文档的规范进行发送。
问题4：请求完成以后，我们需要做些什么？
根据后端返回的信息，进行一些后续的操作。如果后端返回的是登录成功，那么我们进行页面跳转；如果后端返回的是登录失败，那么我们提示用户错误。
代码详见文章：JavaScript案例（六）：前后端交互-登录案例_小张小张啊的博客-CSDN博客
文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili/video/BV1W54y1J7Ed?share_source=copy_web
更多推荐
JavaScript 学习笔记（八）前后端交互；Ajax进行前后端交互
发布评论