浏览器和服务器之间的通信 ajax axios 接口 接口文档

浏览器和服务器通讯过程

以咱们用的最多的浏览器为例,和服务器通讯的过程就像聊微信?

  1. 浏览器:输入URL地址-->请求

  2. 服务器:接收请求并返回对应的资源-->响应

  3. 浏览器:接收并解析响应内容

  4. 可以在浏览器开发者界面的network分类查看

URL:这个地址叫做统一资源定位器（URL）是指定在 Internet 上可以找到资源的位置的文本字符串

        协议名:

  1. http:// ,https://(会加密,安全一些)

  2. 协议是网络协议的简称，用来保证通信的双方能读懂彼此发送过来的消息内容。

       主机:(域名)

    1. 主机指的是在互联网（局域网）中提供服务的设备，可以通过ip或者域名访问

    2. 如果访问的是域名：dns服务器解析--》ip地址

      端口号

      1. 端口号是 0 - 65535 之间的整数

      2. 计算机内部服务和外部通讯的 虚拟通道

      3. 一个端口一次只能被一个服务占用(做核酸?)

      4. http默认的端口是80，可以省略不写

      5. https默认的端口是443，可以省略不写

Ajax概念：ajax的特点：不重新刷新页面的情况下与服务器通信，交换数据，或更新页面

    • 使用XMLHttpRequest异步对象和服务器通讯。

       

    • 不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

测试:

  1. 是否和服务器交互?network页面确认

  2. 是否重新加载页面?

 

接口:

使用ajax和服务器通讯时，被请求的URL地址，叫做数据接口(接口，API接口)

  1. ajax请求的服务器一般称之为:接口服务器

  2. 接口服务器一般提供操纵服务器数据的一系列方法

  3. 调用(请求)接口有点类似于调用后端封装好的函数

  4. 工作中接口一般由后端工程师编写，并提供接口文档指导调用

 

接口文档:

  1. 作用：

    1. 指导前端开发者如何和接口服务器通讯

  2. 文档内容：

    1. 服务器地址

    2. 请求的方法

      1. 有了这两个就可以用ajax和服务器交互

    3. 根据需求可能会有更多的信息:

      1. 接口参数

      2. 返回值格式

      3. 额外的设置等...

<body>
    <input type="text" class="ipt" placeholder="请输入查询的城市" />

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
      document.querySelector('.ipt').onkeyup = function (e) {
        // 限制回车触发
        if (e.keyCode !== 13) return
        const city = this.value.trim()
        // 内容非空判断
        if (!city) {
          return alert('请输入查询的城市')
        }
        // ajax前后端交互
        axios({
          url: `http://ajax-api.itheima.net/api/weather?city=${city}`,
          method: 'get',
        }).then((res) => {
          console.log(res)
          if (res.data.data.errcode === 100) {
            alert('该城市未得到天气预报')
          } else {
            alert(res.data.data.data[0].wea)
          }
        })
      }
    </script>
  </body>

 

代码解析：

  1. 导入了axios网络请求库

  2. 在输入框按下回车，并且内容不为空时和服务器交互-->请求

    1. url地址就是服务器的资源地址

  3. 服务器内容响应回来之后触发then-->响应

  4. 将获取到的响应内容设置给then中回调函数的参数

 

axios介绍及get请求

概念:axios是一个网络请求库，浏览器端是基于ajax封装的

  1. Ajax是一种技术，可以在不刷新浏览器的情况下和服务器通讯

  2. 原生的写法较为繁琐，就有了一些封装好的请求库，可以简化这一操作

  3. axios是目前最为流行的请求库，在浏览器端是基于Ajax封装

    1. ajax是技术,有原生的写法--->较为繁琐

    2. axios-->库,简化ajax的调用

 

get请求如果要传递参数，是拼接在url的末尾 或者在params{}中写

  1. url?key=value&key2=value2

  2. axios.get('url',{params:{key:value}})

posted @ 2022-11-30 13:54  噢噢噢J  阅读(185)  评论(0)  编辑  收藏  举报