认识http协议---3

本文介绍了HTTP协议的基础知识,包括常见的HTTP状态响应码,如200、404、403、500和504等,并通过比喻解释了301和302重定向。详细讲解了如何通过地址栏、HTML标签(如form表单)、AJAX以及Postman工具构造HTTP请求,特别讨论了GET和POST请求的区别以及异步概念。此外,还提到了跨域问题和Postman作为无代码构造HTTP请求的工具。
摘要由CSDN通过智能技术生成

在这里插入图片描述

hi,大家好,今天为大家带来http协议的相关知识

🍇1.http状态响应码

🍇2.构造http请求

1.直接在地址栏里输入一个URL

2.html的一些特殊标签,触发get请求

3.提交form表单,可以触发get请求和post请求

4.使用ajax

🍇3.再次谈同步和异步

🍇4.使用postman构造http请求

🧁1.http状态响应码

HTTP 状态码由三个十进制数字组成,第一个十进制数字定义了状态码的类型。响应分为五类:信息响应(100–199),成功响应(200–299),重定向(300–399),客户端错误(400–499)和服务器错误 (500–599)
在这里插入图片描述
http的状态码是非常多,我们就挑经常见到的来讲解

第一个就是200,它代表的意思是请求成功

第二个是404 Not Found,它代表的意思是要访问的资源不存在

第三个是403 Forbidden,它代表的意思是访问被拒接(没有权限)

第四个是 500 Internal Server Error 服务器内部错误,无法完成请求

第五个是504 Gateway Time-out,服务器访问超时了

第六个是302 Move Temporarily 临时重定向。与301类似。但资源只是临时被移动。客户端应继续使用原有URL

第七个是301 Moved
Permanently 永久重定向。请求的资源已被永久的移动到新URL,返回信息会包括新的URL,浏览器会自动定向到新URL。今后任何新的请求都应使用新的URL代替

针对301和302,可以给大家举个例子

就拿谈对象来说,小明和小红谈对象,有一天小明看到一个更喜欢的女孩,小芳,便抛弃小红,就去找小芳,和小芳谈了一会,觉得还是小红好,就去找小红,小明摇摆不定的状态就叫做"临时重定向",相反,小明不受外界干扰,对小红始终如一,这就是"永久重定向"

最后说一个有意思的状态码:418,又叫做彩蛋
在这里插入图片描述

这就是百度的一个彩蛋,在搜索页搜索黑洞,就会有这样的效果

🧁2.构造http请求

🍎1.直接在地址栏输入URL

在这里插入图片描述

🍎2.html的一些特殊标签,触发get请求

link标签,script标签,img标签,a标签等

在写博客系统前端页面的时候,比如页面有一个img标签,当页面被加载好,浏览器会根据img的标签的src属性给服务器发起一个get请求,来获取到图片内容,当然前提是图片内容得是网络资源

🍎3.提交form表单,可以触发get请求和post请求

使用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>form  表单的使用</title>
</head>
<!-- action里面写的是要访问的URL -->
<body>
    <form action="http://www.sougou.com/abc/def" method="get">
        <input type="text" name="aaa">
        <input type="text" name="bbb">
        <input type="submit" value="提交">
        
    </form>
</body>
</html>

点击运行
在这里插入图片描述随意输入,点击提交
在这里插入图片描述
可以看到这样的界面,是会报404的错误的,为啥呢,因为搜狗不存在我们要访问的资源,抓个包来看看
在这里插入图片描述
我们要搞懂这个请求和form表单代码还有浏览器页面的关系

画个图
在这里插入图片描述
这就是对应关系,下面再用文字来讲解一下
先看图里面绿色的线

第一个input标签对应浏览器的第一个输入框
第二个input标签对应浏览器的第二个输入框
第三个input标签对应浏览器的提交那个框
再来看GET对应的是method那里 URL对应的是代码里那段地址
query string那里面的aaa对应的是代码里name=“aaa”,也就是说标签里的name 写成啥,query string的key就是啥,bbb同理.
value=111或者222取决于用户在输入框输入啥

以上就是对应关系,这是get请求的
=================================================我们再来说post请求的

<!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>form  表单的使用</title>
</head>
<!-- action里面写的是要访问的URL -->
<body>
    <form action="http://www.sougou.com/abc/def" method="post">
        <input type="text" name="aaa">
        <input type="text" name="bbb">
        <input type="submit" value="提交">
        
    </form>
</body>
</html>

在这里插入图片描述
抓包可以看到这是一个post请求
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
可以看到当Content-Type的形式变成这样,就会对应这样的body格式(键值对格式),post请求的URL不在首行,跑到body里面了

我们同样搞清楚个请求和form表单代码还有浏览器页面的关系
画图
在这里插入图片描述
实和get请求的区别就是URL跑到body里面了,仅此而已

但是form只支持get和post方法put,delete,options等其他的http方法.form都不支持

🧁4.ajax构造HTTP请求

ajax是现在最主流的前后端交互方式之一
全称Asynchronous javascript and xml
ajax是前端和后端,异步交互的一种方式
js提供了原生的ajax的api,但是我们不用,因为不好用,我们采用jquery里面提供的ajax的api
在代码里要先引入jquery这个库

<!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>ajax</title>
    <!-- 引入ajax -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
    <script>
        $.ajax({
            url:"https://www.sougou.com",//表示的是要访问的域名
            type:"post",//http方法类型,这里很灵活,啥都行
           
            success: function(body){
                //写处理响应的代码
                console.log(body);
            }
        });
    </script>
</body>
</html>

$ 是 j q u e r y 里面特殊的全局变量 , j q u e r y 所有的 a p i 都是 是jquery里面特殊的全局变量, jquery 所有的api都是 jquery里面特殊的全局变量,jquery所有的api都是$的方法
在这里插入图片描述

这是回调函数,在服务器返回一个正确的响应的时候,浏览器自动执行
在代码的js中,请求发出就不管了,继续执行后续代码,一直到响应回来,浏览器把这个响应给我们的代码(回到success回调函数,执行处理响应逻辑),也就是说我发出请求,这个consle.log(body)先不打印,先往后执行,等响应回来,我再打印!
🍧🧊🍹🍸🍭
我们也可以构造一个post请求

<!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>ajax</title>
    <!-- 引入ajax -->
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
</head>
<body>
    <script>
        $.ajax({
            url:"https://www.sougou.com",//表示的是要访问的域名
            type:"post",//http方法类型,这里很灵活,啥都行
           data:"这是body",
           contentType:"text/plain",
            success: function(body){
                //写处理响应的代码
                console.log(body);
            }
        });
    </script>
</body>
</html>

执行结果

在这里插入图片描述
打开控制台检查
在这里插入图片描述
这个错误是ajax非常典型的问题:跨域问题
为什么会有这样的问题?

我们现在运行的ajax代码的域名是一个域名:这个是location的,location就是我们自己运行的ajax代码的域名
在这里插入图片描述
这个orign写的就是运行ajax代码的域名

ajax里面的请求,访问的域名是另一个域名,在这个代码里面访问的就是https://www.sougou,com
我们可以抓包看到
在这里插入图片描述

两个域名不一致,就会导致跨域问题
这个问题不是bug,是浏览器为了限制安全问题,引入的保护机制
防止甲网站访问乙网站的数据

(不过form 允许跨域)

form 和ajax有啥区别?
form没有跨域问题,ajax有跨域问题
form只支持get,post方法,ajax支持各种方法,更加灵活

🧁3.再谈同步和异步

异步:Asynchronous
同步:synchronized
计算机中,一个术语可能有多种含义

在加锁中:
同步: 多个线程同时访问同一资源,等待资源访问结束,就是一个资源每次都是被一个线程访问的,其他线程在这个时候一直处于一个阻塞状态,要等到其他线程释放该资源才可以继续执行
异步:其他线程在等待的这个过程中,可以去做其他事情,不是一直阻塞在这里

==================================================在IO中:
同步:请求的发起者自行获取响应(主获取结果)
异步:请求者发起响应,不关心结果,被请求的一方计算出结果,推送给发起者(被动获取结果)

举例

我来到商城看衣服,我看上了一件T恤,我可以选择自己把衣服拿下来试穿,也可以选择等服装店老板拿下来给我 第一个做法就是主动获取,就是同步
第二个做法就是被动获取,就是异步

🧁4.使用post构造http请求

我们已经学习了四种构造http请求的方法,那么可以采用不写代码也能构造的办法,那就是使用postman
用法非常简单,只要熟悉http报文格式
在这里插入图片描述
就是这个软件
写几个请求
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
今天的讲解就到这里,我们下期再见,886~~~
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值