JS基础网络请求

迈不过友情╰ 2023-10-06 21:51 7阅读 0赞

#### 阅读目录 ####

*  基础知识
 *  XMLHttpRequest
 *   *  基本使用
     *  响应类型
     *  响应结果
     *  使用示例
     *  发送表单
     *  封装请求类
 *  FETCH
 *   *  请示步骤
     *   *  响应头解析
         *  响应内容解析
     *  实例操作
     *   *  发送请求 get
         *  发送请求 post

## 基础知识 ##

浏览器天生具有发送HTTP请求的能力，比如在址栏输入内容，提交 FORM 表单等。  
本章来学习通过JS程序来管理HTTP请求的能力。

使用JS脚本发送HTTP请求，不会带来页面的刷新，所以用户体验非常好。

## XMLHttpRequest ##

使用XMLHttpRequest发送请求，是一种存在很久的方案。  
现代浏览器支持使用 `fetch` 的异步请求方式，fetch 基于 promise 异步操作体验更好。

### 基本使用 ###

使用XMLHttpRequest 发送请求需要执行以下几步

*  使用 new XMLHttpRequest 创建 xhr 对象
 *  xhr.open 初始化请求参数
 *  xhr.send 发送网络请求
 *  xhr.onload 监听请求结果
 *  xhr.onerror 请求中断等错误发生时的处理

### 响应类型 ###

通过设置 xhr.responseType 对响应结果进行声明，来对结果自动进行处理。

下面是可以使用的响应类型

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>响应结果为文本</td> 
  </tr> 
  <tr> 
   <td>json</td> 
   <td>响应内容为JSON，系统会自动将结果转为JSON对象</td> 
  </tr> 
  <tr> 
   <td>blob</td> 
   <td>二进制数据响应</td> 
  </tr> 
  <tr> 
   <td>document</td> 
   <td>XML DOCUMENT 内容</td> 
  </tr> 
 </tbody> 
</table>

### 响应结果 ###

xhr.onload 用于处理响应完毕后的处理

使用以下属性来处理结果

1、xhr.status 为HTTP状态码 如 404/422/403等，当为200时为正确响应  
2、xhr.statusText HTTP状态码内容，200时为ok,404 为Not Found  
3、xhr.response 服务器端响应的内容

### 使用示例 ###

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

users.php

<?php
    
    $users = [
        1 => "小明",
        2 => "李四",
        3 => "张三"
    ];
    sleep(5);
    echo $users[$_GET['id']];

### 发送表单 ###

下面来使用 XMLHttpRequest 发送 POST 请求

后台服务  
下面创建 users.php后台脚本（你可以使用你喜欢的后台脚本进行测试）

<?php
    echo $_POST['title'];

前端异步请求

<form action="" id="form">
        <input type="text" name="title" />
        <input type="submit" />
    </form>
    
    <script>
        const form = document.getElementById('form')
    
        form.addEventListener('submit', function () {
        
            //阻止默认提交行为
            event.preventDefault()
    
            post('http://tt.cc/testData/users.php', new FormData(this))
        })
    
        function post(url, data) {
        
            const xhr = new XMLHttpRequest()
            xhr.open('POST', url)
            xhr.send(data)
            xhr.onload = () => {
        
                if (xhr.status == 200) {
        
                    console.log(xhr.response)
                } else {
        
                    console.log(`${
          xhr.status}:${
          xhr.statusText}`)
                }
            }
        }
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]

### 封装请求类 ###

下面结合 Promise 来构建一个 XHR 异步处理类，使异步请求操作的变得更简单。  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

users.php

<?php
    
    echo json_encode($_POST);

## FETCH ##

FETCH是JS升级后提供的更简便的网络请求的操作方法，内部使用 Promise 来完成异步请求。

*  response.json() 接收 JSON 类型数据
 *  response.text() 接收 TEXT 类型数据
 *  response.blog() 接收 Blog 二进制数据

### 请示步骤 ###

使用 fetch 方法发送异步请求需要分以下两步操作

#### 响应头解析 ####

第一步对服务器返回的响应头进行解析，会接到 Response 类创建的对象实例，里面包含以下属性。

*  `status:HTTP`状态码
 *  `ok:`状态码为 200-299 时为 true 的布尔值

#### 响应内容解析 ####

第二步对返回的保存在 `response.body` 中的响应结果进行解析，支持了以下几种方式对结果进行解析。

*  response.json() 接收 JSON 类型数据
 *  response.text() 接收 TEXT 类型数据
 *  response.blog() 接收 Blog 二进制数据

以上方法不能同时使用，因为使用一个方法后数据已经被处理，其他方法就不可以操作了

### 实例操作 ###

下面来体验使用 fetch 发送请求

后台服务

下面创建 users.php 后台脚本（你可以使用你喜欢的后台脚本进行测试）

<?php
    $articles = [
        ['name' => 'wgchen'],
        ['name' => 'ycc'],
        ['name' => 'willem']
    ];
    echo json_encode($articles);

#### 发送请求 get ####

下面使用 FETCH 发送 GET 请求

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]

因为 fetch 结果是 promise 所以也可以使用 `async/await` 操作

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

#### 发送请求 post ####

发送POST请求需要设置请求头 Request header

发送请求

发送的JSON类型需要设置请求头为 `application/json;charset=utf-8`

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]

后台响应

因为前台发送的是非表单数据，而是 JSON 字符串所以后台使用 php://input 来接收数据

<?php
    echo file_get_contents('php://input');

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/7f4a74e4af724320bff9c23356c83085.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/3b6d362e8c9f4ab0923de62ec54ddb58.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/06da4564ed9946cd804aafd70cb2291e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/3859a650725140a6ba98ed0705de31ef.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/9656e3f82b3c46cca823b240c33d61e6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/d4986f3feee445268d7912172f31b87c.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16