Ajax及HTTP请求基础 | 青训营

iiru
89 阅读7分钟

Ajax及HTTP请求基础 | 青训营

HTTP协议八股文

超文本 传输协议

（Hyper Text Transfer Protocol，HTTP）是一个简单的

请求 - 响应 协议。

👀为什么需要协议？

如果没有协议，计算机和计算机之间传递信息，就像广东人（粤语）和福建人（闽南语）无法正常交流一样，但是如果都说普通话就不是问题，http就如计算机普通话一样，规定了传递信息的格式，也就是一种协议。

请求头

当你发起一个网络请求时，你应该把你想请求的相关信息按照http的格式写在请求头里面，

它大概长这样

是不是看起来就兴致全无了

其实，我们只用手动添加个别字段，浏览器会帮我们封装好默认字段。

我们现在也不需要了解每一个字段的意义，但是常用的我们得知道。

请求方法

上图圈起来的就是其中一种常用的请求方法，而且我们经常要手动设置，他们有不少...

请求方法描述请求方法描述
GET请求指定的页面信息，并返回实体主体。CONNECTHTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
HEAD类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头OPTIONS允许客户端查看服务器的性能。
POST向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改TRACE回显服务器收到的请求，主要用于测试或诊断。
PUT从客户端向服务器传送的数据取代指定的文档的内容。PATCH是对 PUT 方法的补充，用来对已知资源进行局部更新
DELETE请求服务器删除指定的页面。

请求体

当你的请求方法是POST时

你可以把你想要发送给服务器的数据放在body里面

你发送的数据可以是字符串（json），二进制数据，FormData 对象

详细后面再说

响应头

他们通常长这样

响应头一般是后端的小伙伴设置的，包含着响应的相关信息

响应体

响应体里面就是后端小伙伴返回给前端的数据了。

状态码

上图圈出的200就是常见的表示成功的状态码

状态码表示着响应的状态（成功，失败，报错等等）

状态码描述
100~199信息，服务器收到请求，需要请求者继续执行操作
200~299成功，操作被成功接收并处理
300~399重定向，需要进一步的操作以完成请求
400~499客户端错误，请求包含语法错误或无法完成请求
500~599服务器错误，服务器在处理请求的过程中发生了错误

常见的状态码有

200 ——成功响应

304——缓存

404——未找到响应资源

403——服务器拒绝响应

500——服务端错误

URL

概念

Internet上的每一个网页都具有一个唯一的名称标识，通常称之为URL（Uniform Resource Locator, 统一资源定位器）。它是www的统一资源定位标志，简单地说URL就是web地址，俗称“网址”.

组成

URL 主要由 协议、主机、端口、路径、查询参数、锚点6部分组成！

看一个例子：juejin.cn/post/693523…

  • 协议：https
  • 主机：juejin.cn（这是一个域名映射着一个主机的ip地址）
  • 端口：默认是80，可以省略不写（这里省略了）
  • 路径：/post/6935232082482298911 （应该很明显，后面的一大串数字其实是一个文章id，作为parmas参数）
  • 查询参数：query=123 （传给服务器的参数）
  • 锚点：#heading-2 （标注着在网页的哪个位置）

快速提取

这样就可以获取每一个字段了（当然也可以自己正则）

AJAX

差不多了，让我们正式开始网络请求的环节。

这是网络编程的核心。

概念

英文全称为 Asynchronous JavaScript + XML ，翻译过来就是异步JavaScript和XML。

AJAX 是一种用于创建快速动态网页的思想。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

TIPS

  • 在远古时代我们就算只要一个数据，都不得不重新加载页面，而造成白屏，体验真不行
  • Ajax 是一个概念模型，是一个囊括了众多现有技术的集合，并不具体代指某项技术。
  • 它是用来描述一种使用现有技术集合的“新”方法的，这里的“新”方法主要涉及到: HTML 、CSS、 JavaScript、DOM、BOM，以及“最重要”的XMLHttpRequest。

XMLHttpRequest

  • 以前实现AJAX的核心也是唯一（我是天选，也是唯一）
  • 它逐渐被Fetch替代（等会细说）
  • 它的主要作用就是从服务器拿到数据

这是它的一个最最最简单的例子，先给出来

const xhr = new XMLHttpRequest(); //创建一个xhr对象

    xhr.open("GET", "https://api.github.com/search/users?q=runninglili"); //对xhr进行配置，即请求方法和URL

    xhr.send(); //真正的发起请求

    xhr.onreadystatechange = () => {

      if (xhr.readyState === 4) {

        if (xhr.status === 200) {

          console.log("成功的响应:", JSON.parse(xhr.response)); //这个时候就可以得到成功响应了

          //因为返回的是纯字符串，parse方法可以将其转换成JSON对象

        } else {

          console.log("失败的响应:", JSON.parse(xhr.response)); //各种原因而导致失败的响应

        }

      }

    };

    xhr.onload = function successCallback() {

      document.body.innerHTML = xhr.response; //这个函数里面可以用来做和数据相关的页面更改

    }; //当服务器成功响应后会自动执行successCallback

但是它看起来不是那么简单

这就是它的一个缺点

  • 当你想发送一个简单的请求时，也避免不了复杂的配置

Fetch🤘

Fetch才是众望所归

它是现代实现AJAX的主流方法（非常的重要）

我们用fetch对上例进行重写，看他方便在哪？

fetch("https://api.github.com/search/users?q=runninglili")

    .then(res=>res.text())//第一阶段

    .then(res=>document.body.innerHTML=res)//第二阶段

虽然省了一点东西，但是感觉还是简单一点吧？

let promise = fetch(url[,options])
  • url 请求的url地址（也叫接口）（必选）
  • options是一个配置对象，可以配置请求，例如请求方法，请求体等（默认GET方法）（可选）

在上面的例子中可以看到我们可以调用"then"方法进行下一步操作，可见fetch方法返回的是一个promise对象（相信大家还没有忘吧！）。

第一阶段，当服务器发送了响应头（response header）， fetch 返回的 promise 就使用内建的 Response class 对象来对响应头进行解析。

fetch("https://api.github.com/search/users?q=runninglili")

    .then(res=>console.log(res.status,res.ok)//第一阶段

在这个阶段我们可以读取响应头的状态码,当状态码为200~299时，res.ok为true

第二阶段，为了获取 response body，我们需要使用一个其他的方法调用。

Response 提供了多种基于 promise 的方法，来以不同的格式访问 body：

  • response.text() —— 读取 response，并以文本形式返回 response，
  • response.json() —— 将 response 解析为 JSON 格式，
  • response.formData() —— 以 FormData 对象（ 解释 ）的形式返回 response，
  • response.blob() —— 以 Blob（具有类型的二进制数据）形式返回 response，
  • response.arrayBuffer() —— 以 ArrayBuffer（低级别的二进制数据）形式返回 response，
  • 另外，response.body 是 ReadableStream 对象，它允许你逐块读取 body。
fetch("https://api.github.com/search/users?q=runninglili")

    .then(res=>res.json())//这一步是为了获取响应体

    .then(res=>console.log(res))

这样我们就得到了一个JSON格式的响应体

跨源请求

概念

我们向一个接口发起请求时候，不是你发起，浏览器就帮你发送然后获得数据，浏览器会检测你在哪里发起的请求（地址）和想要访问的接口，默认情况会跨源然后就请求失败。

报错就会像这样。

这里的核心概念是 源（origin） —— 域（hostname）/端口（port）/协议（protocol）的组合。

跨源请求 —— 那些发送到其他域（即使是子域）、协议或端口的请求 —— 需要来自远程端的特殊 header。

这个策略被称为 “CORS”：跨源资源共享（Cross-Origin Resource Sharing）。

为什么需要CORS？有兴趣可以了解一下

怎么解决？

  • 后端设置Access-Control-Allow-Origin请求头
  • 代理服务器
  • JSONP
avatar
文章
阅读
粉丝