一、前后端

前端：定制app开发用户可以看见的界面，定制app开发我们一般浏览网页时看到的界面，定制app开发展现网页数据给用户看的地方。

后端：定制app开发要将前端的数据存储到数据库中，定制app开发并且把数据库的数据传递给前端。

数据库：定制app开发存储数据的地方。

：定制app开发前端将数据传递给服务端，定制app开发并且能够从服务端接收到返回的数据的过程。

二、前后端接口

前端与后端进行数据交互的统称，也叫做，指前端通过HTTP(ajax)请求获取到的数据或者执行的某项操作。为确保前后端(工程师)的协作沟通，一般由前端和后端一起来定义接口的规范，规范的内容一般包含接口的地址，接口的输入参数和输出的数据格式(结构), 最终由后端来实现这些规范，为前端提供符合规范的接口。

接口文档：一个文本，详细写了服务器的一些信息，包括请求信息，请求方式，携带参数，响应数据等。前端需要按照进行开发。

（详见：）

三、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 的区别
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：请求完成以后，我们需要做些什么？

根据后端返回的信息，进行一些后续的操作。如果后端返回的是登录成功，那么我们进行页面跳转；如果后端返回的是登录失败，那么我们提示用户错误。

代码详见文章：

文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?share_source=copy_web