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

浏览器和服务器通讯过程

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

  • 浏览器:输入URL地址–>请求
  • 服务器:接收请求并返回对应的资源–>响应
  • 浏览器:接收并解析响应内容
  • 可以在浏览器开发者界面的network分类查看

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

        协议名:

  • http:// ,https://(会加密,安全一些)
  • 协议是网络协议的简称，用来保证通信的双方能读懂彼此发送过来的消息内容。

       主机:(域名)

  • 主机指的是在互联网（局域网）中提供服务的设备，可以通过ip或者域名访问
  • 如果访问的是域名：dns服务器解析–》ip地址
    端口号
  • 端口号是 0 – 65535 之间的整数
  • 计算机内部服务和外部通讯的 虚拟通道
  • 一个端口一次只能被一个服务占用(做核酸?)
  • http默认的端口是80，可以省略不写
  • https默认的端口是443，可以省略不写

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

  • 使用XMLHttpRequest异步对象和服务器通讯。
     
  • 不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

测试:

  • 是否和服务器交互?network页面确认
  • 是否重新加载页面?

接口:

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

ajax
  • ajax请求的服务器一般称之为:接口服务器
  • 接口服务器一般提供操纵服务器数据的一系列方法
  • 调用(请求)接口有点类似于调用后端封装好的函数
  • 工作中接口一般由后端工程师编写，并提供接口文档指导调用

接口文档:

  • 作用：

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

  • 指导前端开发者如何和接口服务器通讯
  • 文档内容：

    服务器地址

    请求的方法

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

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

    接口参数

    返回值格式

    额外的设置等…

  • 服务器地址
  • 请求的方法

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

  • 有了这两个就可以用ajax和服务器交互
  • 根据需求可能会有更多的信息:

    接口参数

    返回值格式

    额外的设置等…

  • 接口参数
  • 返回值格式
  • 额外的设置等… 
<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>

代码解析：

  • 导入了axios网络请求库
  • 在输入框按下回车，并且内容不为空时和服务器交互–>请求

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

  • url地址就是服务器的资源地址
  • 服务器内容响应回来之后触发then–>响应
  • 将获取到的响应内容设置给then中回调函数的参数

axios介绍及get请求

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

  • Ajax是一种技术，可以在不刷新浏览器的情况下和服务器通讯
  • 原生的写法较为繁琐，就有了一些封装好的请求库，可以简化这一操作
  • axios是目前最为流行的请求库，在浏览器端是基于Ajax封装
  • ajax是技术,有原生的写法—>较为繁琐
  • axios–>库,简化ajax的调用

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

  • url?key=value&key2=value2
  • axios.get(‘url’,{params:{key:value}})
————————

浏览器和服务器通讯过程

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

  • 浏览器:输入URL地址–>请求
  • 服务器:接收请求并返回对应的资源–>响应
  • 浏览器:接收并解析响应内容
  • 可以在浏览器开发者界面的network分类查看

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

        协议名:

  • http:// ,https://(会加密,安全一些)
  • 协议是网络协议的简称，用来保证通信的双方能读懂彼此发送过来的消息内容。

       主机:(域名)

  • 主机指的是在互联网（局域网）中提供服务的设备，可以通过ip或者域名访问
  • 如果访问的是域名：dns服务器解析–》ip地址
    端口号
  • 端口号是 0 – 65535 之间的整数
  • 计算机内部服务和外部通讯的 虚拟通道
  • 一个端口一次只能被一个服务占用(做核酸?)
  • http默认的端口是80，可以省略不写
  • https默认的端口是443，可以省略不写

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

  • 使用XMLHttpRequest异步对象和服务器通讯。
     
  • 不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

测试:

  • 是否和服务器交互?network页面确认
  • 是否重新加载页面?

接口:

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

ajax
  • ajax请求的服务器一般称之为:接口服务器
  • 接口服务器一般提供操纵服务器数据的一系列方法
  • 调用(请求)接口有点类似于调用后端封装好的函数
  • 工作中接口一般由后端工程师编写，并提供接口文档指导调用

接口文档:

  • 作用：

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

  • 指导前端开发者如何和接口服务器通讯
  • 文档内容：

    服务器地址

    请求的方法

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

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

    接口参数

    返回值格式

    额外的设置等…

  • 服务器地址
  • 请求的方法

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

  • 有了这两个就可以用ajax和服务器交互
  • 根据需求可能会有更多的信息:

    接口参数

    返回值格式

    额外的设置等…

  • 接口参数
  • 返回值格式
  • 额外的设置等… 
<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>

代码解析：

  • 导入了axios网络请求库
  • 在输入框按下回车，并且内容不为空时和服务器交互–>请求

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

  • url地址就是服务器的资源地址
  • 服务器内容响应回来之后触发then–>响应
  • 将获取到的响应内容设置给then中回调函数的参数

axios介绍及get请求

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

  • Ajax是一种技术，可以在不刷新浏览器的情况下和服务器通讯
  • 原生的写法较为繁琐，就有了一些封装好的请求库，可以简化这一操作
  • axios是目前最为流行的请求库，在浏览器端是基于Ajax封装
  • ajax是技术,有原生的写法—>较为繁琐
  • axios–>库,简化ajax的调用

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

  • url?key=value&key2=value2
  • axios.get(‘url’,{params:{key:value}})