前端网络请求详细介绍

📖 前言

之前我们做的页面都是一些没有数据的静态页面(虽然你可能写了一些动画效果，可它却仍然是个静态页面)。那么，啥叫动态页面呢？这就是前端跟网络请求的关系了，如果一个网页在你使用的过程中，向服务器发出了某些网络请求，并接收到了从服务器返回来的数据（当然也可能请求失败），那么，这样的网页才叫做动态页面。也就是说，这里的动态指的是你的浏览器（客户端）和服务器（服务器端）的数据交换。

作为一个真正的前端，所做的事就是负责从客户端获取用户的数据（像是你填写的用户名和密码），然后，把这些数据组织起来，发给服务器端，然后等待服务器端处理完数据（至于服务器接收到数据怎么处理，就是后端的问题了），接收返回的数据，并对这些返回的数据进行不同的处理（比如展示在页面上或者储存起来之类的）。也就是说，写出一个漂亮的页面展示给别人只是前端工作的一部分。

介绍前端网络请求方法之前我们先来学习一些前置知识：

JSON

JavaScript Object Notation(JavaScript 对象表示法)是一种轻量级的数据交换格式。

首先， JSON 的本质是一种数据的格式，取代的是 XML 。那么，这哥俩的作用是啥呢？其实就是一个传输功能，也就是在网络请求的传输过程中，数据的格式必须是 JSON 格式。所以， JSON 不止是前端要用的东西，后端在向前端传输数据的时候，同样也得先把数据格式转化成 JSON 格式，再进行传输。至于为啥要取代以前的 XML 格式，很好理解， JSON 格式简单呗。

下面给一个 json 实例：

{
   
  "data": [
    {
   
      "id": 1,
      "name": "wjx",
      "age": 19
    },
    {
   
      "id": 2,
      "name": "xjw",
      "age": 20
    },
    {
   
      "id": 3,
      "name": "jwx",
      "age": 21
    }
  ],
  "info": "success",
  "status": 10000
}

js 中解析 JSON 的方法

• JSON.stringify(obj) js 对象转 json,返回一个 json 格式字符串
• JSON.parse(json) json 转 js 对象，返回一个对象

URL

统一资源定位符（Uniform Resource Locator，缩写为 URL），又叫做网页地址，是互联网上标准的资源的地址（Address）。

比如说 www.baidu.com 就是一个简单的 url

URL 组成

• protocol 协议，常用的协议是 HTTP、HTTPS、ftp

• hostname 主机地址，域名或者IP，比如baidu.com

• port 端口，http 协议默认端口是 80 端口，https 协议默认 443 端口

• path 路径，网络资源在服务器中的指定路径

• query 查询字符串，如果需要从服务器那里查询内容，在这里编辑,多个 query 参数用&符号连接

• hash 片段，网页中可能会分为不同的片段，如果想访问网页后直接到达指定位置，可以在这部分设置

URL 和 URI

URI, 全称为(Uniform Resource Identifier), 也就是统一资源标识符，它的作用很简单，就是区分互联网上不同的资源。

但是，它并不是我们常说的网址, 网址指的是 URL, 实际上 URI 包含了 URN 和 URL 两个部分，由于 URL 过于普及，就默认将 URI 视为 URL 了。

了解 HTTP

HTTP 协议（HyperText Transfer Protocol，超文本传输协议）是因特网上应用最为广泛的一种网络传输协议，所有的 WWW 文件都必须遵守这个标准。

方法

• GET：获取资源

• POST：传输实体主体，主要目的是传输

• PUT：传输文件，保存到指定的位置

• HEAD：获得报文首部

• DELETE：删除文件

• OPTIONS：查询支持的方法

• TRACE：追踪路径

• CONNECT：要求使用隧道协议连接代理

常见状态码

• 2XX 成功

  • 200 OK：请求成功

  • 204 No Content：请求处理成功，但没有资源可返回

• 3XX 重定向

  • 301 Moved Permanently：永久重定向

  • 302 Found：临时重定向

  • 304 Not Modified：服务端资源未改变，可使用缓存（和重定向无关）

• 4XX 客户端错误

  • 400 Bad Request：请求报文语法错误

  • 401 Unauthorized：请求需认证

  • 403 Forbidden：不允许访问资源

  • 404 Not Found：服务器无请求资源

• 5XX 服务器错误

  • 500 Internal Server Error：服务器端在执行请求时发生错误

  • 503 Service Unavaiable：服务器超负载

HTTP 报文

用于 HTTP 协议交互的信息被称为 HTTP 报文，客户端的叫做请求报文，服务端的叫做响应报文。

请求报文和响应报文的结构

结构主要是报文首部、空行（CR+LF）、报文主体。如图所示，清楚明了。

其中请求报文和响应报文是有一定区别的

请求报文的请求行长这样

GET /home HTTP/1.1

包含了请求方法 + URL + HTTP 版本

而响应报文的状态行长这样

HTTP/1.1 200 OK

包含 HTTP 版本 + 状态码 + 原因短语

请求报文和响应报文实例

上面这些都是未经过处理的形式，浏览器会自动帮我们解析为方便查看的格式

我们主要关注的就是请求url，请求方法以及状态码

头部字段非常的多，这里不一一列举，只介绍一下头部字段的格式

• 字段名不区分大小写
• 字段名不允许出现空格，不可以出现下划线_
• 字段名后面必须紧接着 :

🛫AJAX

Ajax全称Asynchronous JavaScript + XML（用 JavaScript 执行异步网络请求）。它的本质就是用来向服务器端发出网络请求的一种方法。

比如说下面就是一个 ajax 的实例

在Ajax出现之前，web程序是这样工作的：

这种交互的的缺陷是显而易见的，任何和服务器的交互都需要刷新页面，用户体验非常差，Ajax的出现就解决了这个问题。

Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的XMLHttpRequest是实现Ajax最重要的对象（IE6以下使用ActiveXObject，别用 IE😥）。

尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。

原生 AJAX 的使用

我们先来对XMLHttpRequest对象常用的的函数、属性、事件进行分析。

先甩张图出来

函数

open

用于初始化一个请求，用法：

xhr.open(method, url, async)

• method：请求方式，如get、post
• url：请求的url
• async：是否为异步请求 默认为 true