目录
HTTP全称超文本传输协议,是一种应用广泛的应用层协议。HTTP往往是基于传输层TCP协议实现的。一个HTTP协议由首行(方法名+url+版本号),请求头(header),空行,正文(body)组成。如果是GET请求,没有body,如果是POST请求,一般有body(习惯用法,get也可以有body)。
URL(统一资源定位符)就是我们常说的网址,互联网上的每一个文件都有唯一的URL,它包含的信息指出了文件的位置及浏览器如果处理。
在HTTP协议中,有许多是程序员自定义的。
- URL路径
- URL的query string
- header中的键值对
- headert中的cookie键值对
- body
方法
在实际开发中,最常见的是GET和POST方法。
GET
在浏览器中直接输入URL,html中的Link,script,img都是get请求。
使用Fiddler抓包工具,并访问B站,获取请求B站主页的请求:
可以看到,第一行为首行,其余为header。
header这里是一些键值对,由HTTP事先定义好,具有特点含义的。
POST
POST请求常见的是登录,上传文件。
POST请求如下:
第一行为首行,接下来为Header,空行,正文。
GET和POST并没有本质区别,只存在使用习惯上的区别。
GET给服务器传递信息,习惯用法放在query string内;POST传递信息是习惯用法是通过body。
GET请求一般用于从服务器获取数据,POST一般用于服务器提交数据。
GET通常会被设计成幂等(相同输入,结果确定 );POST不要求幂等。
GET幂等所以可以被缓存,POST一般不能被缓存。
Header属性
- Host:www.bilbil.com 描述了服务器的地址和端口,用来描述最终要访问的目标,大多数情况下与URL一致。
- Content-Length(字节) 和 Content-Type 用来描述body中的数据格式,如果是GET请求,由于没有body,则没有这两个字段。
- User-Agent 描述了浏览器和操作系统的版本。目前主要用来区分PC和移动。
- Referer 描述当前页面的来源。HTTP明文传输,容易被获取以及篡改。
- Cookie 浏览器给网页提供的本地存储数据机制,通过键值对的方式组织数据。网页默认是无法访问硬盘的,而cookie是做了一层封装存于硬盘,浏览器可以访问cookie,但无法访问硬盘的其他资源。(Cookie中的数据来源于服务器,服务器通过HTTP响应的报头Set-Cookie字段决定存什么;Cookie存在与硬盘,按照浏览器+域名进行细分,不同浏览器,存不同cookie,同一浏览器不同域名,存不同cookie;客户端通过cookie保存当前用户使用中间状态,客户端访问浏览器,会自动把cookie的内容写入请求,带回给服务器,cookie存在过期时间。 )
响应
响应也分为4个部分。
- 首行 HTTP/1.1(版本号) 200(状态码) OK(状态码描述,200 OK表示访问成功)。
- Header
- 空行 表示header结束标记。
- body HTML页面内容。
HTTP状态码表述了响应是否成功。200--成功;404--访问的资源不存在;403--访问没有权限;302--临时重定向(302响应报文中,会在header里带location属性,通过这个属性描述跳转到哪个新的网址,301永久重定向);500--服务器内部错误;504--gateway timeout(响应超时)。
重定向涉及两次服务器客户端交互,客户端发送请求,服务器返回302响应报文,中间带有新的location,客户端发送访问location的请求,服务器返回location的响应。
响应的报头中的Content-Type更加丰富text/html,text/css,application/javascript,application/json。
构造HTTP请求
对于GET请求,直接在浏览器地址栏输入,点击收藏夹,html中的link,script,img,form标签都可以构造出GET请求。
使用FORM
写一个form表单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log</title>
</head>
<body>
<!--表单标签,允许用户和服务器之间交互数据-->
<form action="https://www.sogou.com/" method="get">
<input type="text" name="username">
<input type="submit" value="提交">
<br>
</form>
</body>
</html>
使用fiddler抓取GET请求:
首行的url就是form的action中的地址,url中的querystring-zhangsan就是输入的username。form标签只能构造GET和POST两个请求,但仍然是常用的构造请求方法。
使用ajax
ajax(Asynchronous Javascript And XML)是浏览器提供的一种构造http请求的方法。在HTML中,通过ajax发起HTTP请求,属于异步方式,代码执行发送请求后,不需要等待服务器响应,就可以立即往下执行,当响应回来后,由浏览器通知到代码。
如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Log</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$.ajax({
type: 'get',
url: 'https://www.sogou.com?username=zhangsan',
//此出success声明了回调函数,响应到达浏览器触发回调
//此处的回调体现了异步
success: function(data){
console.log("响应达到");
}
});
console.log("发送get请求,继续执行");
</script>
</body>
</html>
和form相比,ajax功能更强,支持put,delete等方法;ajax发送的请求可以灵活设置header;ajax发送的请求的body也可以灵活设置。
以上就是本文的全部内容了。