构造HTTP请求
使用form
form使用如下:
<body><!-- 表单标签,允许用户和服务器之间交互数据 --><form action="https://www.sogou.com" method="get"><!-- 要求提交的数据以键值对的结构来组织 --><input type="text" name="stduentName"><!-- input type=submit 构造了一个特殊的 提交按钮. value 属性描述了按钮中的文本 --><!-- 点击这个按钮就会触发 form 表单的 "提交操作", 也就是构造 http 请求发给服务器 --><input type="submit" value="提交"></form>
</body>运行代码后会出现下面的页面
现在我们在里面输入一些内容后提交,然后进行抓包,查看我们发出去的GET方法请求
提交之后,搜狗页面正常弹出,并无其他异常(因为搜狗的服务器没有处理该请求的响应)
抓包之后,我们可以看到请求中的 URL里面多了query string 并且有一个键值对
接下来我们再发送一个POST方法请求
<body><!-- 表单标签,允许用户和服务器之间交互数据 --><form action="https://www.sogou.com" method="post"><!-- 要求提交的数据以键值对的结构来组织 --><input type="text" name="studentName"><!-- input type=submit 构造了一个特殊的 提交按钮. value 属性描述了按钮中的文本 --><!-- 点击这个按钮就会触发 form 表单的 "提交操作", 也就是构造 http 请求发给服务器 --><input type="submit" value="提交"></form>
</body>抓包后的效果和GET有些许差异,POST里面的URL并没有变化,但是body里面多了一个和GET一样的键值对,如下:
可以看到,对于form发出的POST请求来说,body里面的数据格式和query string非常类似,也是键值对的结构.
但是form标签只能构造GET和POST,无法构造PUT、DELETE等方法.
使用ajax
ajax是浏览器提供的一种通过js构造HTTP请求的方式.
将其翻译过来就是:Asynchronous Javascript And XML
其中Asynchronous 代表的是异步的.
而ajax也是异步进行的.
这里的所谓异步,就是将这一段代码执行"发送请求"操作之后,不必等待服务器响应回来就可以立即往下执行,当服务器的响应回来了之后,再由浏览器通知到代码中.
html中,通过ajax发起HTTP请求,就属于是异步的方式.
在代码中使用ajax有两种方式:
js原生提供的ajax的api (但是原生的api特别难用,此处使用第二种).
jquery提供的ajax api,它针对原生的api进行了封装,更加好用.
如下:
在jquery中,$是一个特殊的全局对象.
jquery的api 都是以$的方法的形式来引出的.
此处之后一个参数,这个参数是一个对象(用大括号表示的键值对)
<body><!-- 引入jquery --><script src="https://code.jquery.com/jquery-3.6.3.min.js"></script><script>$.ajax({type: 'get',url: 'https://www.sogou.com?studentName=zhangsan',//此处success 就声明了一个回调函数, 就会在服务器响应返回到浏览器的时候触发该回调//正是此处的 回调 体现了 "异步"success: function(data) {console.log("当浏览器返回的响应到达浏览器之后,浏览器触发该回调,通知到代码中");}});console.log("浏览器立即往下执行后续代码");</script>
</body>相关的说明都在代码里面提到了.
当运行之后,会先向服务器发出请求,然后继续往下执行代码,当响应收到后,再执行success方法进行回调.只不过此处无法接收正确的回应.
并且如果代码中如果有多个ajax,他们收到的响应并不一定和构造的顺序相同,因为异步的实现基本都要使用多线程的处理,所以出现"后发先至"也是正常的情况.
运行之后,我们查看Console,如下:
可以看到,里面输入了最下面的一个log,之后就都是异常.
不过这里出现异常是因为,搜狗的服务器无法响应我们发出的请求.
和form相比,ajax的功能更强:
支持PUT、DELETE等方法
ajax发送的请求可以灵活设置header
ajax发送的请求的body也可以灵活的设置