了解一些基础网络常识
协议
协议是一种网络约定/规则
http:// 超文本传输协议
https:// 安全的超文本传输协议
file:/// 文件传输协议
IP（域名）
IP是互联网中服务器的地址。（存放资源的地方） 例如：
183.232.231.172
端口
端口是设备与外界通信的出口，通常取值范围：0到65535
5500 vscode插件开启的http服务
80 默认端口（http）
443 默认端口（https）
3306 mysql 服务的端口
网页地址
可以直接渲染图文信息
数据地址 （API）
url: http://localhost:3000/api/userInfo
{"status":403,"msg":"登录已过期,请重新登录"}
本地IP(自己电脑的)
127.0.0.1
局域IP(室内网络)
192.168.137.1
外网IP(一般需要花钱租)
183.232.231.172 数据的前后端交互
是指前端负责编写界面、请求数据、渲染数据（拿到数据并把数据表现出来）
后台负责处理数据、编写接口、响应数据（处理各种请求并响应数据）
静态网页
不存在任何后台的数据请求的网页。图文信息是固定的、不能更新的（不能因为页面放了gif图或者轮播图就说这个是动态网页，不存在数据交互的网页都是静态网页）
动态网页
页面上的数据是可以更新的，可以从后台请求数据、存在数据的前后端交互（注册、登录）
ajax
是什么
ajax是一项创建动态网页的技术。是一门实现数据前后端交互的技术。 Asynchronous Javascript And XML（异步JavaScript和XML）
为什么使用ajax 这项技术
-
ajax可以快速创建动态网页
-
ajax可以读取文档内容
-
ajax可以实现数据的前后端交互
-
ajax可以实现不跳转刷新页面（局部刷新页面），异步请求。
怎么实现数据的前后端交互
- 利用jquery提供的$.ajax(选项)
- 利用网络请求库 axios
- 利用H5新增的fetch API
示例：天气查询
首先编写页面
再检查数据接口，是否正常访问
最后，把获取的数据渲染在页面上
核心代码：
<script src="../jquery/jquery.js"></script>
<script>
// 需求：
// 点击"查询"按钮,获取输入的城市，
// 调用ajax函数，把城市的天气信息获取，并渲染在页面上
// 涉及到数据前后端交互时
// 首先思考的是接口的详细信息（地址，方式，参数，返回结果）
// 然后填写ajax函数的相关选项
// 例如：
// url 接口地址
// type 请求方法
// data 提交的参数
// success 请求和响应成功执行的回调函数 sucess:function(返回结果){}
// error 请求失败执行的回调函数
// 天气查询的接口信息
// 1、接口地址：https://yiketianqi.com/free/day
// 2、请求方式：GET
// 3、参数： 必选参数 appid appsecret
// 可选参数 unescape city
// 4、返回结果：json格式数据
// 编码：
// 获取元素绑定事件
$(".btn").on("click", function () {
// 获取输入框的值
var city = $(".inp").val();
// 判断输入框是否有值
if (city.length == 0) {
console.log("输入框为空，显示当前所在城市的天气信息")
}
// 请求天气查询接口地址
$.ajax({
url: "https://yiketianqi.com/free/day",// 接口地址
type: "get",//请求的方式（由文档来告知开发者）
data: { // 该不该填写参数，填写哪些参数（需要阅读接口文档，因为是后台写的接口）
// 填写你们自己的ID和秘钥
appid: "76991983",
appsecret: "cRC3NNlQ",
unescape: 1,
city: city
},
// 发起请求之前
beforeSend: function () {
// 显示正在加载
$(".loading-box").show();
// 清空信息
$(".info").empty();
},
success: function (res) {//请求完成和响应成功
// console.log(res);//后台响应的结果（响应报文）
// 判断res是否有值
if (res) {
// 定义字符串
var str = `
<div class="item">当前城市: ${res.city}</div>
<div class="item">更新时间: ${res.update_time}</div>
<div class="item"><img src="./assets/${res.wea_img}.png" alt=""></div>
<div class="item">温度：${res.tem}</div>
<div class="item">天气：${res.wea}</div>
<div class="item">风力：${res.win}</div>
<div class="item">空气质量: ${res.air}</div>
`;
// 隐藏正在加载
$(".loading-box").hide();
// 渲染字符串
$(".info").html(str);
// 重置输入框的值
$(".inp").val("");
}
},
// 请求完成(万一请求失败了)
complete: function () {
// 隐藏正在加载
$(".loading-box").hide();
}
})
})
</script>
总结：
1、ajax可以创建动态网页
2、ajax可以无跳转刷新页面
3、ajax 可以提升用户体验（前后端数据交互效果更好）
