高效便捷构造 Http 请求-Toy模板网

这篇具有很好参考价值的文章主要介绍了高效便捷构造 Http 请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如何构造http请求

对于Get请求:

地址栏直接输入
点击收藏夹
html 中的 link script img a…
form 标签

这里我们重点强调 form 标签构造的 http请求

使用 form 标签构造http请求.

 <!-- 表单标签, 允许用户和服务器之间交互数据 -->
  <form action="https://www.leetcode.com" method="get">
    <input type="text" name="studentName">
    <!--input type="submit" 构造了一个特殊的提交按钮. vlaue 属性描述了按钮中的文本-->
    <!-- 点击这个按钮就会触发 form 表单中的"提交操作" -->
    <input type="submit" value="提交">
  </form>

form 的重要参数:

action: 构造 http 请求的 URL 是什么
method:构造 http 请求的方法是 GET 还是 POST(form 仅支持 GET 和 POST)

input 的重要参数:

type:表示输入框的类型 , text 表示文本 , password 表示密码 , submit 表示提交按钮
name: 表示构造出 http 请求的 query string 里的 key. query string 里的value 就是用户输入框中的内容
value: input 标签的值 , 对于 type 为 submit 类型来说 , value 就对应了按钮上显示的文本.

将构造好的请求提交给 leetcode 服务器(leetcode 不会处理该请求, 因此也不会对该请求作出响应) 高效便捷构造 Http 请求

然后用 fiddler 抓包查看详细过程.

高效便捷构造 Http 请求

再看看post请求的抓包结果:
高效便捷构造 Http 请求

明显可以看到和 GET 请求的报文有所区别:

POST 请求首行没有 query string
POST 请求多了正文(body) , 且query string 在 body 中.

但 form 标签构造请求有其局限性 , 就是只能构造 GET 和 POST 请求 , 因此我们引入Ajax.

使用 Ajax 构造 http 请求

ajax 全称 Asynchronous Javascript And XML , 是一种 JavaScript 给服务器发送 http 请求的方式

特点是可以不需要刷新页面/页面跳转就能进行数据传输

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

Asynchronous 异步是指 , 一行代码执行"发送请求" 操作之后 , 不必等待服务器响应回来 , 就可以立即先往下执行 , 当服务响应回来之后 , 在由浏览器通知到我们代码中.

代码中如果使用 ajax

js 原生的 ajax 的 api , 较为难用
jquery 中提供的 ajax api , 针对原生的 api 的封装 , 简单很多

jquery 的下载网址:

https://www.bootcdn.cn/jquery/

高效便捷构造 Http 请求

引入 jquery 较为方便的办法就是直接复制链接到script 标签中.

 <!-- 引入 jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>

jquery 中 $ 是一个特殊的全局变量.

jquert 中的 api 都是以 $ 方法法形式引出 , 其中只有一个参数 , 是一个 js 对象({} 表示的键值对)

$.ajax();

 <!-- 引入 jquery -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  <script>
    $.ajax({
      type: 'get',
      url: 'http://www.leetcode.com?studentName=zhangsan',
      // 此处 success 就声明了一个回调函数 , 就会在服务器响应返回到浏览器的时候触发该回调
      // 正数此处的 回调 体现了 "异步"
      success: function(data){
        console.log("当服务器返回的响应到达浏览器之后 , 浏览器会触发该回调 , 通知到我们的代码中");
      }
    });
  </script>
 console.log("浏览器立即往下执行后续代码");