前后端交互之网络服务的基本概念

前言

async javascript and xml 异步的javascript和xml

• async 异步
• sync 同步

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3] 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

ajax最早是通过XMLHttpRequest对象生成的，后来在ES6提出了Fetch进行请求。但是一般我们使用ajax时，不会自己封装Ajax，会直接使用现成的ajax库——axios。

网络服务

在我们进行前后端数据交互时，一般使用ajax或者axios，在我们进行请求时，需要请求网络上的url。这里有几个概念

method 请求方法

GET、POST、PUT、PATCH、DELETE、OPTION

GET //一般用于向服务器请求我们需要的数据，该操作对原数据无影响。

POST //一般用于向服务器发送数据，该操作会改变数据的种类等资源；

PUT //与post相似都是向服务器发送数据，一般用于更新数据；

DELETE //该操作与其含义一样，一般用于删除数据；

剩余的一些方法基本用不到所以这里我就不说了，感兴趣可以自己去查询

状态码

状态码即发起请求后服务器返回的状态，成功失败等等，可以根据它去判断我们的请求是否成功以及失败原因

常见状态码

          200 请求成功

          300 重定向

          400 请求问题

          401 认证失败

          403 没有权限

          404 url错误

          500 服务器

URL 请求地址

要请求的地址，www.baidu.com就是个URL地址

请求参数

我们通过传递不同的参数，获得到不同的资源。具体参数的作用是什么，则需要和后台沟通。

以上的三个东西，都是由后台提供好的文档，我们只需要在ajax特定的地方填入特定的内容即可。

ajax实例示例

其他方法请看前端常用请求方法极简示范_object not found的博客-CSDN博客这是一个别人封装好的http请求库，使用时需要我们引入才能够使用。因为个人比较喜欢用这种方法请求数据所以放到第一位。ES6中出现的替代xhr对象进行异步请求的一个对象。它默认是基于promise解决异步操作。fetch的用法很简单。我们获取到的response是一个JSON字符串，使用时需要将其转换为JSON对象。要发起ajax请求有很多方法，原生xhr或者fetch都可以，我们先了解xhr。以上两种为常用方法，剩下的很少用到所以这里我就不多巴巴了，详情参考官方文档。https://blog.csdn.net/qq_45547094/article/details/126858617

    // 1 生成xhr对象
      let xhr = new XMLHttpRequest();
      console.log(xhr);
 
      // 2 绑定事件
      xhr.onreadystatechange = function () {
        console.log(xhr.status);
        if (xhr.readyState === 4 && xhr.status === 200) {
          // 这里的代码不固定
          console.log(JSON.parse(xhr.response));
          /* 
          JSON 字符串
        */
        }
      };
 
      // 3 调用open方法填写相关数据 open里的参数不固定
      xhr.open(
        "GET",
        "https://sspai.com/api/v1/article/index/page/get?limit=10&offset=0&created_at=1663030905"
      );
 
      // 4 发起请求
      xhr.send();