浏览器和服务器通讯过程
以咱们用的最多的浏览器为例,和服务器通讯的过程就像聊微信?
-
浏览器:输入URL地址-->请求
-
服务器:接收请求并返回对应的资源-->响应
-
浏览器:接收并解析响应内容
-
可以在浏览器开发者界面的
network分类查看
URL:这个地址叫做统一资源定位器（URL）是指定在 Internet 上可以找到资源的位置的文本字符串
协议名:
-
http:// ,https://(会加密,安全一些)
-
协议是网络协议的简称，用来保证通信的双方能读懂彼此发送过来的消息内容。
主机:(域名)
-
主机指的是在互联网（局域网）中提供服务的设备，可以通过ip或者域名访问
-
如果访问的是域名：dns服务器解析--》ip地址
端口号
-
端口号是 0 - 65535 之间的整数
-
计算机内部服务和外部通讯的 虚拟通道
-
一个端口一次只能被一个服务占用(做核酸?)
-
http默认的端口是80，可以省略不写
-
https默认的端口是443，可以省略不写
Ajax概念：ajax的特点：不重新刷新页面的情况下与服务器通信，交换数据，或更新页面
- 使用XMLHttpRequest异步对象和服务器通讯。
-
不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。
测试:
-
是否和服务器交互?network页面确认
-
是否重新加载页面?
接口:
使用ajax和服务器通讯时，被请求的URL地址，叫做数据接口(接口，API接口)
-
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地址就是服务器的资源地址
-
-
服务器内容响应回来之后触发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}})