http如何构造请求?

灰太狼 2023-09-27 16:32 25阅读 0赞

![在这里插入图片描述][d09e38ee125b4024babb291a30a9daf8.gif_pic_center]

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

*  构建HTTP请求
 *   *  构建GET请求
     *  构建POST请求
     *  ajax
     *  Postman

## 构建HTTP请求 ##

### 构建GET请求 ###

构建Get请求可以有以下方式：  
1.地址栏输入URL  
2.html中的link，script，img，a  
3.form标签

![在这里插入图片描述][211e1deb271f4f759d9f5d4c9723f007.png]  
![在这里插入图片描述][2e8ecfbc57354e2c827fe66f3bd934ff.png]  
form 代码和 HTTP 请求之间的对应关系：  
![在这里插入图片描述][7705b69c942a488d92e055e1b726ebdc.png]  
form 的 action 属性对应 HTTP 请求的 URL  
form 的 method 属性对应 HTTP 请求的方法  
input 的 name 属性对应 query string 的 key  
input 的 内容 对应 query string 的 value

### 构建POST请求 ###

我们将刚才代码form中method改为POST

![在这里插入图片描述][216bbcb40f424e8a9a63ec546f52a28c.png]  
form 代码和 HTTP 请求之间的对应关系：

![在这里插入图片描述][4888ec9da34f46fdb466d48293e62825.png]  
我们POST和GET请求还是比较相似的，主要有以下区别：  
1.mthod从GET变成POST  
2.数据从query string移动到了body中

form表单只能构造GET和POST请求，无法构造PUT，DELETE，OPTIONS等方法的请求

### ajax ###

前端处理浏览器地址栏能构造GET请求，form表单构造GET和POST之外，还可以通过ajax的方式来构造HTTP请求，功能更加强大

ajax：Asynchronous Javascript And XML, 一种 JavaScript 给服务器发送HTTP 请求的方式，这里是异步的，不需要刷新页面/页面跳转就可以进行数据传输  
![在这里插入图片描述][93df91869c09418e81c92c4e520d03cf.png]  
这就是一种典型应用场景。  
如何使用ajax?  
1.js提供了一组原生的ajax api，但是原生的api比较难用  
2.jquery提供了ajax，是对原生api进行了封装，使用起来相对比较简单

我们首先引入jquery  
![在这里插入图片描述][db84ec3a7c0a46a88ae8b8df3679105a.png]  
![在这里插入图片描述][73687d83612a4a6fa451e1b7773292e2.png]  
![在这里插入图片描述][54da4e15e1a04783811a3b295969190c.png]

jquery中，$是一个特殊的全局对象，jquery都api都是以$方式引入的，$.ajax只有一个参数，是一个js对象

![在这里插入图片描述][02a87b09499b4e80ab98ac3b2a3f566c.png]  
![在这里插入图片描述][1f88f8b711de4616a387cb860be9835d.png]  
此时代码执行，我们只能看到构造的请求，无法获取到正确的响应，因为百度的服务器并没有处理咱们的请求  
![在这里插入图片描述][f69b3e83aba04dfb85b2d0e0967c9402.png]  
ajax与form的区别？  
1.ajax支持put，delete等方法  
2.ajax可以灵活的设置header  
3.ajax的body也是可以灵活设置的

### Postman ###

Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件，经常用于接口测试  
我们首先搜索postman官网  
![在这里插入图片描述][28fe355b510e41d5b5596d9b0c9af653.png]  
![在这里插入图片描述][34ef0cf179344a069c28bfd179a108e1.png]  
如果是第一次使用，我们先注册一个账户

![在这里插入图片描述][fff7a74b350d46d6aa51b40e6565a698.png]  
输入邮箱，账号，密码注册账号  
![在这里插入图片描述][573481f8af8843bcaf4a3f59825885d9.png]  
![在这里插入图片描述][7bab373403e9443aa534be6c19ba74c2.png]  
这就是登录成功的界面  
![在这里插入图片描述][5efa146a88964b2fb53650e0f6ce56ac.png]  
我们首先需要创建一个工作空间，用于测试用例以及将我们的测试数据保存到云端，即使我们切换电脑数据也不会丢失  
![在这里插入图片描述][355aa720725d434b9c20bfb28e712c1f.png]  
![在这里插入图片描述][ce385351e589471db9b3303a7d239dcd.png]  
我们点击加号，添加一个请求  
![在这里插入图片描述][5c7b2b9b85b645ad8f4cbfa390467509.png]

![在这里插入图片描述][e04a769407254a15a9a241ee7fdbef04.png]  
![在这里插入图片描述][06cf02c2bc0f45a5b8464659c806d15b.png]  
我们每次请求数据后，可以按Save或者Ctrl + S将请求保存到云端

[d09e38ee125b4024babb291a30a9daf8.gif_pic_center]: https://img-blog.csdnimg.cn/d09e38ee125b4024babb291a30a9daf8.gif#pic_center
[211e1deb271f4f759d9f5d4c9723f007.png]: https://img-blog.csdnimg.cn/211e1deb271f4f759d9f5d4c9723f007.png
[2e8ecfbc57354e2c827fe66f3bd934ff.png]: https://img-blog.csdnimg.cn/2e8ecfbc57354e2c827fe66f3bd934ff.png
[7705b69c942a488d92e055e1b726ebdc.png]: https://img-blog.csdnimg.cn/7705b69c942a488d92e055e1b726ebdc.png
[216bbcb40f424e8a9a63ec546f52a28c.png]: https://img-blog.csdnimg.cn/216bbcb40f424e8a9a63ec546f52a28c.png
[4888ec9da34f46fdb466d48293e62825.png]: https://img-blog.csdnimg.cn/4888ec9da34f46fdb466d48293e62825.png
[93df91869c09418e81c92c4e520d03cf.png]: https://img-blog.csdnimg.cn/93df91869c09418e81c92c4e520d03cf.png
[db84ec3a7c0a46a88ae8b8df3679105a.png]: https://img-blog.csdnimg.cn/db84ec3a7c0a46a88ae8b8df3679105a.png
[73687d83612a4a6fa451e1b7773292e2.png]: https://img-blog.csdnimg.cn/73687d83612a4a6fa451e1b7773292e2.png
[54da4e15e1a04783811a3b295969190c.png]: https://img-blog.csdnimg.cn/54da4e15e1a04783811a3b295969190c.png
[02a87b09499b4e80ab98ac3b2a3f566c.png]: https://img-blog.csdnimg.cn/02a87b09499b4e80ab98ac3b2a3f566c.png
[1f88f8b711de4616a387cb860be9835d.png]: https://img-blog.csdnimg.cn/1f88f8b711de4616a387cb860be9835d.png
[f69b3e83aba04dfb85b2d0e0967c9402.png]: https://img-blog.csdnimg.cn/f69b3e83aba04dfb85b2d0e0967c9402.png
[28fe355b510e41d5b5596d9b0c9af653.png]: https://img-blog.csdnimg.cn/28fe355b510e41d5b5596d9b0c9af653.png
[34ef0cf179344a069c28bfd179a108e1.png]: https://img-blog.csdnimg.cn/34ef0cf179344a069c28bfd179a108e1.png
[fff7a74b350d46d6aa51b40e6565a698.png]: https://img-blog.csdnimg.cn/fff7a74b350d46d6aa51b40e6565a698.png
[573481f8af8843bcaf4a3f59825885d9.png]: https://img-blog.csdnimg.cn/573481f8af8843bcaf4a3f59825885d9.png
[7bab373403e9443aa534be6c19ba74c2.png]: https://img-blog.csdnimg.cn/7bab373403e9443aa534be6c19ba74c2.png
[5efa146a88964b2fb53650e0f6ce56ac.png]: https://img-blog.csdnimg.cn/5efa146a88964b2fb53650e0f6ce56ac.png
[355aa720725d434b9c20bfb28e712c1f.png]: https://img-blog.csdnimg.cn/355aa720725d434b9c20bfb28e712c1f.png
[ce385351e589471db9b3303a7d239dcd.png]: https://img-blog.csdnimg.cn/ce385351e589471db9b3303a7d239dcd.png
[5c7b2b9b85b645ad8f4cbfa390467509.png]: https://img-blog.csdnimg.cn/5c7b2b9b85b645ad8f4cbfa390467509.png
[e04a769407254a15a9a241ee7fdbef04.png]: https://img-blog.csdnimg.cn/e04a769407254a15a9a241ee7fdbef04.png
[06cf02c2bc0f45a5b8464659c806d15b.png]: https://img-blog.csdnimg.cn/06cf02c2bc0f45a5b8464659c806d15b.png