[JavaScript知识库]前后端交互之网络服务的基本概念

前言

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特定的地方填入特定的内容即可。

示例

    // 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();