构造http请求

野性酷女 2024-03-26 19:20 87阅读 0赞

#### 文章目录 ####

*   *  相关概念
     *  一、通过 form 表单构造 HTTP 请求
     *   *  构造get请求
         *  构造post请求
     *  二、通过 ajax 构造 HTTP 请求 【重点掌握】
     *   *  代码中如何使用ajax
         *  form构造和ajax构造对比

### 相关概念 ###

***异步等待（asynchronized）与同步等待(synchronized)***

假设A和B需要协作做一件事，A的接下来与之有关的处理需要依赖于B的当前事务处理的返回结果。

那么A现在面临两种选择，一是就一直等待B的结果，其他啥也不干，而是给B返回结果留出位置，但是同时一边干自己其他的事情（时间管理大师），等待B的召唤，两者再进行交接。

那么这里的的选择一就是同步等待，选择二就是异步等待。

简而言之，同步不同步就是看关于两者干一件事中间其中一方有没有去处理别的，若处理了就是异步，反之就是同步。

***接口***

接口一般来讲分为两种：

*  **程序内部的接口**：*方法与方法、模块与模块之间的交互，程序内部抛出的接口*，如登录发帖，发帖就必须要登录，如果不登录不能发帖，发帖和登录这两个模块之间就要有交互，就会抛出一个接口，进行内部系统调用。
 *  **系统对外的接口**：从别人的网站或服务器上获取资源或信息，对方不会提供数据库共享，*只能提供一个写好的方法来获取数据*，如购物网站和第三方支付之间，购物网站支付时可选择第三方支付方法，但*第三方不会提供自己的数据库给购物网站，只会提供一个接口，供购物网站进行调用*。

*常用的接口*

*  http接口走http协议，通过路径来区分调用方法，请求报文一般是key-value形式的，返回报文一般是json串，常用的是get和post方法来请求。
 *  webservice接口走的soap协议，通过http传输，请求报文和返回报文都是xml格式的。

*接口关键信息*

*  **协议类型**：http/htts
 *  **请求URL/IP**：如：网址：https://www.baidu.com/；ip：127.0.0.1
 *  **端口**：http默认端口：80，https默认端口：443或自定义端口
 *  **请求方式**：如post/get/put/delete
 *  **表头信息**:如内容类型Content-Type:application/json
 *  **请求参数**：注意参数的传参类型如json；参数的属性如名称、类型、是否必填，参数的个数；
 *  **响应结果**：注意输出内容的类型如json
 *  **返回状态 描述**
    
    1xx 请求已被成功接收、理解、接受
    
    2XX 成功，操作被成功接收并完成响应
    
    3xx 重定向–要完成请求必须进行更进一步的操作
    
    4xx 客户端错误–请求有语法错误或请求无法实现
    
    5xx 服务器端错误–服务器未能实现合法的请求

***接口自动化测试工具***

*  postman
 *  Jmeter
 *  SoapUI
 *  ……

### 一、通过 form 表单构造 HTTP 请求 ###

这里边有两个重要的属性需要注意：action和method

*  action: 构造的 HTTP 请求的 URL 是什么
 *  method: 构造的 HTTP 请求的 方法 是 GET 还是 POST
    
    **(form 只支持 GET 和 POST)**.

这是关于它的“轮廓”，那具体我们**请求的内容怎么组织**呢？

因为请求头要求以键值对的形式来组织：所以这里我们构造使用input标签进行组织，用户输入（文本输入框）与我们预先设定构成一对键值对，最后设置一个input标签，type色设置成submit，value设置成提交。

#### 构造get请求 ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IpGiScbR-1678270506280)(F:\\typora插图\\image-20230308170959010.png)\]][img-IpGiScbR-1678270506280_F_typora_image-20230308170959010.png]

#### 构造post请求 ####

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3C8g5Wxo-1678270506281)(F:\\typora插图\\image-20230308170646118.png)\]][img-3C8g5Wxo-1678270506281_F_typora_image-20230308170646118.png]

### 二、通过 ajax 构造 HTTP 请求 【重点掌握】 ###

> 从前端角度, 除了浏览器地址栏能构造 GET 请求, form 表单能构造 GET 和 POST 之外, 还可以通过 ajax（音译：阿加克斯）的方式来构造 HTTP 请求. 并且功能更强大
> 
> ajax 全称 Asynchronous Javascript And XML, 是 2005 年提出的一种 JavaScript 给服务器发送HTTP 请求的方式

在 JavaScript 中可以通过 ajax 的方式构造 HTTP 请求

那么问题就来了，我们怎么在js代码中使用ajax？

#### 代码中如何使用ajax ####

1.  js原生提供的ajax，但是原生api不好用。【此方案pass】
2.  jquery提供的ajax，api提供原生api的封装【√】

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MOwfABwP-1678270506282)(F:\\typora插图\\image-20230308174142830.png)\]][img-MOwfABwP-1678270506282_F_typora_image-20230308174142830.png]

上边便是基本架构，但是这里代码直接执行，抓包时只能看到构造的请求，但是没办法获取到正确的响应。

因为服务器对于我们的请求并没有处理。别人都不知道返回什么。。

所以这部分代码执行之后，除了抓包抓不到响应外，浏览器（开发者控制台）还会报错。。

> 请求发送涉及的多线程问题：
> 
> 1.当多个ajax同时被构造，执行顺序时自上而下，收到响应顺序不确定。（网络通信存在后发先至）
> 
> 2.发送请求时出现异常了，剩下的代码会不会继续执行？若在主线程则会，反之不会。
> 
> 3.js关于多线程的问题怎么解决的？js本身不可直接控制os的线程，不和java一样有对应的包装类对接。但是由于浏览器在实现ajax时在内部实现了多线程，所以还是涉及到了的，有应对方案的，具体细节略。

#### form构造和ajax构造对比 ####

总的来说，ajax功能更强，具体体现在下边几个方面

*  支持put,delete，trace等方法
 *  发送的请求可以灵活设置header
 *  发送的请求body可以灵活设置

之后测试的时候，一般不会使用这两种方法，而是使用接口自动化测试工具，例如postman。

至于使用方法，之后再进行了解。

> 慢慢来就好

[img-IpGiScbR-1678270506280_F_typora_image-20230308170959010.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f9716610ae814bbb8247d31e34d71811.png
[img-3C8g5Wxo-1678270506281_F_typora_image-20230308170646118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/5a678b01a3f9437b92a42d83b5e0b3ae.png
[img-MOwfABwP-1678270506282_F_typora_image-20230308174142830.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/f46b4abb21b44c43a5a611b072670cb6.png