🍇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>
可以看到当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>
$
是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~~~
