前后端交互

什么是前后端交互

其实就是一个前后端通讯, 是我们开发中, 必不可少的一个技能

目前我们用到的技术是 ajax

如何实现

流程为在前端开发中, 在某一个时刻(页面首次打开渲染的时候, 或点击下一页需要更新的数据的时候)

此时通过 ajax 向后端(服务器)发送一个请求, 拿到所谓的数据,发送请求需要传一些参数, (就是告诉后端需要什么东西), 如果不知道, 那么就去查'接口文档'.

Ajax的使用

流程:

第一步创建一个 Ajax 对象

const xhr = new XMLHttpRequest()

第二步配置 Ajax 对象

xhr.open('请求方式(不区分大小写)', '请求地址', 是否异步)

第三步发送请求

xhr.send()

第四步接收响应

xhr.onload(){}

案例:

        //1.创建一个 Ajax 对象
       const xhr = new XMLHttpRequest()

       //2.配置 Ajax 对象
       //xhr.open('请求方式'(不区分大小写) , '请求地址' , '一个布尔值')
       xhr.open('GET' , 'http://localhost:8888/test/first' , true)

       //3.发送请求
       xhr.send()

       //4.接收响应
       xhr.onload = function(){
        // console.log('现在后端已经给我们返回了, 我们想要的数据')
        console.log(xhr.responseText)
       }

Ajax的异步问题

Ajax是否异步为第二步配置的第三个参数决定的，也就是那个布尔值

默认为true 代表的是开启异步，如果传选的是false代表关闭异步开启同步

同步和异步的差别

运行流程

创建一个Ajax对象（同步代码)

配詈对象（同步代码,但是第三个参数次定了下一步是否为异少)

发送请求（根据上一步的配置，才能看出是否为异步)

接受响应（同步代码)

如果传递的是true或者没有传递，那么为异步，此时的运行流程

创建一个对象

配置置对象

发送请求

接收响应

响应完成了

如果传递的是false,那么为同步,此时的运行流程为

创建一个对象

配置对象

发送一个请求,等待请求完成后,执行后面代码

接收响应(前面三步已经把这个请求完全运行结束了,所以不可能再触发这个函数了)

解决方法

1.创建一个对象

2.配置对象

4.接收响应,等待请求完成时候,会触发

3.发送一个请求,等待请求完成后,执行后面代码

如果传递的是异步,,可以通过1234 的顺序书写(1243也可以)如果传递的是同步,,必须按照1243的流程书写所以在开发时,为了方便,都采用1243

例:

只有异步时可以使用

          //1.创建一个 Ajax 对象
           const xhr = new XMLHttpRequest()

           //2.配置 Ajax 对象
           xhr.open('GET' , 'http://localhost:8888/test/first' , true)

           //3.发送请求
           xhr.send()

           //4.接收响应
           xhr.onload = function(){
            console.log(xhr.responseText)
           }

异步同步都可以使用

        //我是同步时的情况

        //1.创建一个 Ajax 对象
        const xhr = new XMLHttpRequest()

        //2.配置 Ajax 对象
        xhr.open('GET', 'http://localhost:8888/test/first', false)

        //4.接收响应
        xhr.onload = function () {
            // console.log('现在后端已经给我们返回了, 我们想要的数据')
            console.log(xhr.responseText)
        }

        //3.发送请求
        xhr.send()
        
        
        //我是一个分界线==================================================================
        
        
        //我是异步时的情况
        
        //1.创建一个 Ajax 对象
        const xhr = new XMLHttpRequest()

        //2.配置 Ajax 对象
        //xhr.open('请求方式'(不区分大小写) , '请求地址' , '一个布尔值')
        xhr.open('GET', 'http://localhost:8888/test/first', true)

        //4.接收响应
        xhr.onload = function () {
            // console.log('现在后端已经给我们返回了, 我们想要的数据')
            console.log(xhr.responseText)
        }

        //3.发送请求
        xhr.send()

http 的传输协议

根据传输协议规定 , 必须由前端向后端发送请求 , 发送请求时如果要携带一些参数 , 必须是字符串格式

1. 建立连接

浏览器和服务端建立一个链接

2.发送请求

要求前端必须以 '请求报文' 的形式发送

请求报文 : 由浏览器进行组装 , 我们只需要提供对应的信息即可

比如说 : 请求方式, 请求地址 , 请求需要的字母

3.接收响应

要求后端必须以 '响应报文' 的形式返回

响应报文内有一个东西叫做响应状态码

4.断开连接

浏览器和服务端断开

响应状态码

100~199 表明链接还在继续

200~299 表明链接各种成功 , 但现在只会返回一个 200

300~399 表明请求重定向

400~499 表明请求失败但现在只会看到一些 403 404 401 400 一般 4 开头的是前端问题(仔细检查自己书写的代码)

500~599 表明服务端出错跟前端无关, 是后端的问题.

ajax 的状态码

通过一个数字 , 表明 ajax 当前运行到哪一步了

语法: Ajax变量名.readyState

0 : Ajax 创建成功

1 : 当前 Ajax 配置成功

2 : 当前 Ajax 发送成功

3 : 当前浏览器正在解析服务端返回给我们的包容
如果返回的 内容少 这一步基本能接收完

如果返回的 内容很多 这一步是接收不完整的
4 : 表明浏览器已经把服务端返回内容全部解析完毕

ajax 请求方式的区别

get : 偏向于获取语义 (常用于:商品列表数据 , 用户详情 , 商品详情)

delete : 偏向于获取语义 (常用于:删除某一个内容)

post : 偏向于修改语义 , (常用于:修改用户名 , 修改密码)

put : 偏向于修改语义 (常用于:修改库存 , 修改收藏数量)

等等.....

现在市面公司公司中常用的方式只有两种 , get / post

请求方式不同 , 会导致传参的方式不同, 除此之外对我们前端没有区别.

get

直接将需要传递地的参数拼接在路径后面即可 , 注意使用 ? 间隔.(多个参数之间使用 & 连接)

http://localhost:8888/test/first?key=value

        //1.创建一个 Ajax 对象
        const xhr = new XMLHttpRequest()

        //2.配置 Ajax 对象
        xhr.open('GET', 'http://localhost:8888/test/third?name=zhangsan&age=18')

        //4.接收响应
        xhr.onload = function () {
            const res = JSON.parse(xhr.responseText)
            console.log(res)
        }

        //3.发送请求
        xhr.send()

pout

也是需要传递字符串,只不过不是放在路径后 , 而是放在请求体内书写(xhr.send())

xhr.send('key=value&key=value&....')

在传参的时候需要配置一个请求头中的属性 content-type

设置请求头:

content-type 赋值时, 还要区分我们传递的是普通字符串还是json格式

普通字符串: xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

json字符串: xhr.setRequestHeader('content-type','application/json')


        //普通字符串
        
        //创建 Ajax 对象
        const xhr = new XMLHttpRequest()

        //2.配置 Ajax 对象
        xhr.open('POST', 'http://localhost:8888/test/fourth')

        //4.接收响应
        xhr.onload = function () {
            const res = JSON.parse(xhr.responseText)
            console.log(res)

            // console.log(xhr.responseText)
        }

        //3.1 post 请求传参时需要配置 content-type(请求头部)

         xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

        //3.2发送请求
        xhr.send('name=张三&age=18')
        
        
        
        //我是一个分界线=================================================================
        
        
        
       //json格式
       
       //创建 Ajax 对象
        const xhr = new XMLHttpRequest()

        //2.配置 Ajax 对象
        xhr.open('POST', 'http://localhost:8888/test/fourth')

        //4.接收响应
        xhr.onload = function () {
            const res = JSON.parse(xhr.responseText)
            console.log(res)

            // console.log(xhr.responseText)
        }

        //3.1 post 请求传参时需要配置 content-type(请求头部)

        xhr.setRequestHeader('content-type','application/json')

        //3.2发送请求
        xhr.send('name=张三&age=18')

封装一个简单的 Ajax

思路:

参数:

1.请求方式 : 选填 , 默认为 get; 形参名: type;

2.请求地址: 必填: 形参名:url

3.请求为同步/异步 : 选填: 默认值为 true 形参名 : async

4.请求需要携带的参数: 选填, 默认为 '' 形参名 : data

返回值:

需要返回一个 promise 对象 , 后续可以通过 . then 或者 async与await 去使用.

        //创建一个函数用来封装 Ajax
       function myAjax(options){
       
        //1.验证参数中 url 必传
        if(options.url === undefined){
        
            //返回一个报错(报错提示信息)
            throw new Error('参数中缺少必要信息')
        }
        
        //参数格式验证

        //如果传输的 type 的值不是undefined 或者 string 这两种类型运行下方代码
        if(!(options.type === undefined || typeof(options.type) === 'string')){
            throw new Error('参数 type 值的类型不符合要求')
        }
        
        //如果传输的 async 的值不是true 或者 false 运行下方代码
        if(!(options.async === true || options.async === false)){
            throw new Error('参数 async 值的类型不符合要求')
        }

        //如果传输的 data 的值不是undefined 或者 string 这两种类型运行下方代码
        if(!(options.data === undefined || typeof(options.data) === 'string')){
            throw new Error('参数 data 值的类型不符合要求')
        }
        
        //封装默认值
        const _options = {
            url : options.url,
            type : options.type ||'get',
            data : options.data ||'',
            
            //空值检测符 ?? (特点:只会在左侧的值为 空值 时,返回 右侧)
            async : options.async ?? true 
        }
        
        //创建一个 Ajax 对象
        const xhr = new XMLHttpRequest()
        
        //配置 Ajax 对象
        xhr.open(_options.type , _options.url , _options.data)

        //接收响应
        xhr.onload = function(){
            console.log(xhr.responseText)
        }

        //发出请求
        xhr.send()
       }
       
       //调用函数
       myAjax({
        url : 'http://localhost:8888/test/first',
        async : false,
        data : 'name=zhangsan',
       })

js中的前后端交互 --- Ajax