🍇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 ery 里面特殊的全局变量, j q u ery 所有的 a p i 都是$ $的方法
在这里插入图片描述

这是回调函数,在服务器返回一个正确的响应的时候,浏览器自动执行
在代码的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>