前后端交互_bs架构 前后端的数据通信

前后端交互

一、前后端交互基本概念

网络应用的分类

网络应用分为BS架构和CS架构这两类。BS架构指Browser+Server，浏览器+服务器的组合。CS架构指Client+Server，客户端+服务器的组合。

服务器：

从硬件的角度来说服务器是在互联网上的一台（一群）远程计算机。从软件角度来说服务器是运行在计算机上的服务端程序。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0iPfD69M-1663896962966)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220708094908775.png)]

客户端:

狭义上的的客户端指安装在客户机（手机、电脑、平板）上的应用程序。

浏览器:

通过在浏览器上运行的网页与服务端程序进行数据交互

CS：Client端展示数据、收集数据 Server端存储数据、传输数据。

BS：Broswe端展示数据、收集数据 Server端存储数据、传输数据。

广义上的客户端指用户使用的程序。

网络传输协议

客户端与服务器要进行数据交互依赖通讯协议。在WEB应用中广泛使用的是HTTP协议。HTTP协议是应用层协议。HTTP协议底层是TCP/IP协议。

TCP/IP：协议明确了计算机之间要进行数据传输的基本条件。

• 进行数据交互两台计算机必须在同一个网络中（互联网或局域网）。
• 每一台计算机在网络中都有一个唯一的网络地址（IP地址）
• IP地址分为外网地址和内网地址。在同一个内网中的计算机可以使用内网地址找到对方。
• 在计算机中有6万多个端口，每一个网络应用在运行时都可以和某一个端口进行绑定。我们向某一台计算机上的应用发送数据，其实是在向这台计算机的某一个端口发送信息。

HTTP协议：HTTP是一种应用层协议，它对数据传输的细节、数据的含义、数据的格式进行了规范。

HTTP中有两个重要的术语：请求和响应。

请求指客户端程序向服务端程序发送数据的过程。

响应指服务端程序向客户端程序发送数据的过程。

目前的WEB程序基本都是请求+响应这种数据交互模型。

如何向服务器发送请求？

客户端需要通过接口地址向服务器发送请求。接口地址的组成：http://IP:端口/接口名称。

向服务器发送请求时需要发送哪些数据？

• 请求方式method (get/post/put/patch/delete)

• 请求类型contentType(form/data、json)

• 请求参数方式：发送给服务器的业务数据（地址栏参数、请求体参数）

• **请求参数的格式：**服务要求传哪些数据必须传哪些数据。

  具体采用何种方式、何种类型、参数使用什么传递方式由服务器决定，作为前端只需要按照服务器的要求发送请求就行。后端会为前端开发人员提供接口文档，文档中会详细的说明一个接口的请求方式、请求类型以及参数发送方式。

服务器响应给客户端的数据有哪些？

服务器会响应HTTP请求状态到客户端。该状态代表了本次请求的执行状态。

常见状态如下：

200：表示成功，服务器收到了客户端的请求并成功的响应了数据。

401：表示传输的参数格式不满足服务器的要求。

404：表示发送请求的地址不存在

500：表示服务器出现错误

服务器还会将本次请求的业务数据（JSON）响应到客户端。

当我们在进行增删改操作时，服务器只需要响应本次增删改的执行结果。

当我们在执行查询操作时，服务器除了响应本次的执行结果之外，还会将查询的数据一起响应。

二、AJAX

客户端首先需要向服务器发送请求，服务器被动的向发送请求的客户端响应数据。

AJAX的全称 Asynchronous Java Script And XML(异步的javascript和XML)。是js中的一种异步的使用了HTTP作为通讯协议的前后端数据交互技术。

例如要通过Ajax访问和风天气接口，接口文档如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VvS0VJo5-1663896962968)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220708141807762.png)]

从文档中我们发现如下信息：

请求地址：https://devapi.qweather.com/v7/weather/now?[请求参数]

请求方式：get

请求参数：地址栏参数

参数内容：key和location，key是密钥、location城市经纬度或者城市ID

编码实现过程

//1.创建XMLHttpRequest对象
let xhr=new XMLHttpRequest();
//2.设置请求方式和请求地址
xhr.open("GET","https://devapi.qweather.com/v7/weather/now?key=3676a20663e243ebb45d5d24ec313519&location=101040100");
//3.添加onreadystatechange事件监听ajax请求状态的变化(状态发生改变事件触发)
xhr.onreadystatechange=function(){
   
    //ajax请求状态为4 HTTP请求状态为200表示服务器正确的响应了数据
    if(xhr.readyState==4&&xhr.status==200){
   
    	let text=xhr.responseText;
        let data=JSON.parse(text);
    }
}
//4.发送请求
xhr.send();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Jquery的Ajax编码实现过程

$.ajax({
   
    url:"https://devapi.qweather.com/v7/weather/now?key=3676a20663e243ebb45d5d24ec313519&location=101040100",//请求地址,默认是当前页面地址
    type:"GET",//请求方式
    //data:传递给服务器的数据
    dataType:"JSON",//确定服务器响应的数据类型,Jquery便于转换
    success:function(data){
   //回调函数,Juqery在服务器响应数据以后调用该回调
        //data表示的是服务器响应到客户端的数据
    }
});
1
2
3
4
5
6
7
8
9
10
11

除了Ajax函数之外，Jquery还提供了get和post的API。

AJax的异步

Ajax的异步指请求在发出以后，程序不会就此阻塞，而是会继续向下执行，在这种情况下我们无法在ajax的请求发出以后立刻去获取数据的。异步优势是效率高，劣势是当我们多个ajax请求之间有依赖关系时（发送第二个AJAX请求需要第一个请求拿到的数据），Ajax要通过嵌套的形式来编写。

let key = "3676a20663e243ebb45d5d24ec313519";
        $("#search").click(function () {
   
            let id;
            let city = $("#city").val();
            //查询城市代号
            let searchCity = `https://geoapi.qweather.com/v2/city/lookup?key=${
     key}&location=${
     city}`;
            $.ajax({
   
                url: searchCity,
                type: "GET",
                dataType: "json",
                success: function (cityInfo) {
   
                    id = cityInfo.location[0].id;
                	 //查询城市天气
            let searchWeather = `https://devapi.qweather.com/v7/weather/now?key=${
     key}&location=${
     id}`;
            $.ajax({
   
                url: searchWeather,
                type: "GET",
                dataType: "json",
                success: function (weatherInfo) {
   
                    $("#img").prop("src", `../icons/${
     weatherInfo.now.icon}.svg`);
                    $("#weather").html(weatherInfo.now.text);
                    $("#temp").html(weatherInfo.now.temp);
                    $("#sd").html(weatherInfo.now.humidity);
                    $("#wind").html(weatherInfo.now.windDir);
                }
            });
                }
            });
        });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

​ Ajax嵌套Ajax会造成回调地狱问题，Jquery的Ajax提供了一个可选参数,async，将其设置为false,则可以将异步Ajax设置为同步,在服务器响应数据之前,后面的代码会处于阻塞状态。

let key = "3676a20663e243ebb45d5d24ec313519";
        $("#search").click(function () {
   
            let id;
            let city = $("#city").val();
            //查询城市代号
            let searchCity = `https://geoapi.qweather.com/v2/city/lookup?key=${
     key}&location=${
     city}`;
            $.ajax({
   
                url: searchCity,
                type: "GET",
                dataType: "json",
                async: false,
                success: function (cityInfo) {
   
                    id = cityInfo.location[0]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17