关于家养猿类和野生猿类的套路,之前已经简单的讲过一些了。今天我们开始转入从一个正常人类进化成一只猿类的具体步骤。纳尼?有木有搞错,居然讲的是反向进化!是的,我们开始从学习如何变成一只猿类,嗯,没错,进化成一只程序猿。
从一个正常人类进化为一只程序猿,最常规的途径是经过几年的系统学习,成本较高,且枯燥无趣,过去一段时间,有一些初学者在问,有没有快点儿的的办法,工厂君思索良久,决定自创猿人进化系列,希望能帮助到大家。
换个姿势上网
![9d702969cf62141a3b0c66f84c57f0a9.png](https://i-blog.csdnimg.cn/blog_migrate/a8082cae27b4d65d9a879ab0913c7e8c.jpeg)
三和大神的成神之路其实同样适合猿类的进化。这个世界上有好多好多的站点,内容丰富多彩,一根根网线的背后,套着无数web程序猿的脑袋。嗯,想要成为猿类的第一步,尤其是web程序猿,还是
![118fb18e72a4cd8899e39479c0b75978.png](https://i-blog.csdnimg.cn/blog_migrate/7c4a9ce4658c76e1da975fb315a4610b.jpeg)
首先,我们打开firefox浏览器,如果没有安装的同学,可以到官网上安装。输入一个地址http://www.baidu.com.我们看到了这样一个界面:
![09d4209842375306a18901a69e9aefe1.png](https://i-blog.csdnimg.cn/blog_migrate/6ac9d47208017e7d949b99cefc250b60.jpeg)
是哒,这就是百度(也称度娘)的页面了。嗯,绝大多数情况下,输入内容,百度一下,绝大多数情况下可以得到想要看到的内容。
今天呢,我们就不要先百度了,直接右键,另存为一下。发现多了一个文件和一个文件夹:
![c731270f062f71ff9c8d56b0eb44f143.png](https://i-blog.csdnimg.cn/blog_migrate/d25d8ad3840be7abd9a8d8ad233850d0.jpeg)
右键以浏览器的方式打开“百度一下,你就知道.html”,和我们浏览器访问到的http://www.baidu.com的内容一致,有木有?
这是为什么呢?双击进入“百度一下,你就知道_files”文件夹,看到以下内容
![5ec17876726dd5f027421b6f67294639.png](https://i-blog.csdnimg.cn/blog_migrate/4836cd8343debe3a4caabc593f3e7e7f.jpeg)
这都是些什么鬼?嗯,png和gif还是勉强认识的,打开看看,好像有网页上的图片有些相似,但略微不同…… 还有一些.js.css结尾的又是些什么鬼?用记事本打开“百度一下,你就知道.html”
![c06f56ab546d04bac0de5087bc45cb32.png](https://i-blog.csdnimg.cn/blog_migrate/0a213c4626e427238902a28057f8b0a2.jpeg)
我勒个去!灵魂三连击!
![e6c1c6bf73a20be033ee3b50024b9a04.png](https://i-blog.csdnimg.cn/blog_migrate/d38a67dc59d168a0f6d76182b62804d7.jpeg)
这是哪国语言?辣眼睛得很?都是些什么鬼?
不急不急,要搞懂这些鬼画符,慢慢来,我们先把.css结尾的文件删除,再用浏览器打开“百度一下,你就知道.html”:
![3091d8f3f3b79bc2ce824b98bfaea7b3.png](https://i-blog.csdnimg.cn/blog_migrate/bdceb676b11cfce2294920f6043c30dc.jpeg)
页面变得好丑陋,我们再把.js文件和图片删掉,刷新浏览器
我们再把所有的文件删除掉,刷新页面:
![f973156b8a13661e5a4bd731b6e196b1.png](https://i-blog.csdnimg.cn/blog_migrate/95abfe2f140d3333743cc8416e654a62.jpeg)
页面变得更加丑陋无比!!!
![f8b2473518f7d3eed1756b0bc34fd167.png](https://i-blog.csdnimg.cn/blog_migrate/18efac9484c7b2516442a474cca99496.jpeg)
等等,你这波骚操作是搞什么鬼?猿人工厂君只是带着大家简单的地做了下小实验,告诉大家几个道理罢了:
我们用浏览器访问站点,其实是用浏览器打开了一个远程的html文件。
html文件是写给浏览器看的,浏览器可以将html文件转换为人类可以识别的网页。
css文件和图片还有js文件是和html有关联的,没有了他们,浏览器打开的内容不再完整,html负责组织css和js的内容,让网页的表现形式丰富多彩。
换个姿势继续上网
我们继续用打开浏览器,敲击键盘的F12按钮,点击“网络”,
![053881e1451b91b316cc307313470fbf.png](https://i-blog.csdnimg.cn/blog_migrate/a7d467fb2ae3f7e83b87559070785a4b.jpeg)
在浏览器上再次输入http://www.baidu.com,继续访问,我们看到了好多东西:
![7beb516c3365cff52646d140b4d4f666.png](https://i-blog.csdnimg.cn/blog_migrate/d22ce1b33f877a2eb3e49f82db43def9.jpeg)
仔细的观察文件这一栏,发现有的文件名,和之前保存过的文件名是一致的,还有一些新的东西是之前木有见过的。我们随便找一个东西,点击下看看:
![ecfc5fa5e040e2fdb7974f8561561e94.png](https://i-blog.csdnimg.cn/blog_migrate/14304e8c4561cbbcee8e1f1c58e82399.jpeg)
右边多了好多东西啊,这些是什么意思呢?哈哈,这些当你成为一只web工程猿的时候,也许会鄙视工厂君的浅薄,工厂君现在这里安利一波:
其实这一栏描述的是一次请求的信息,方法显示的是GET,表示的是一次GET方式的请求,服务器傻乎乎的,用户要看什么东西需要浏览器告诉它,它再把用户需要的东西返回给浏览器。
我们看看“响应头”,响应头是服务器返回给客户端(咱们用浏览器访问站点,浏览器就是我们的客户端了)的一些信息,这些信息都是什么意思呢?哈哈,点前面那个问号就知道了。比如,cache-control:
![70c837ea96dfddaddb872d4114843f33.png](https://i-blog.csdnimg.cn/blog_migrate/2c47011148818bbcbcd38e08a399c1fd.jpeg)
保持好奇心,也是进化为猿类的条件之一噢。
我们在看看“请求头”,请求头是客户端发给服务器的数据,篇幅有限,我们就不再一一点问号了,猿人工厂君直接安利吧:
Accept:浏览器可接受的MIME类型。
Accept-Encoding:浏览器能够进行解码的数据编码方式,比如gzip。Servlet能够向支持gzip的浏览器返回经gzip编码的HTML页面。许多情形下这可以减少5到10倍的下载时间。
Accept-Language:浏览器所希望的语言种类,当服务器能够提供一种以上的语言版本时要用到。
Cookie:服务器写在客户端的数据,往往加密,用做身份认证。
Host:我们访问的域名。
Referer:表示用户从哪个页面发起的请求。
User-Agent:浏览器类型,告诉服务端是用什么方式来访问网页的。
我们还发现有一个叫做请求网址的东西:
https://www.baidu.com/home/page/data/pageserver?errno=7008&errurl=http%3A%2F%2Fdj1.baidu.com%2Fv.gif%3F&_t=1583642568129
这个玩意儿看起来好复杂,有?还有&符号,这又是什么东西呢?我们点击参数一栏看看:
![1f7682aaec6faa72f7eca2b1721e489f.png](https://i-blog.csdnimg.cn/blog_migrate/c735190959c1112673fcacf61f747e13.jpeg)
有木有发现?后面的内容,使用&分隔的东西和我们截图里的看到的东西比较一致?errno=7008,就是告诉服务器,我有一个叫errno的参数,参数的值是7008!像这样的东西还有errurl,_t噢。
GET请求是有多个参数的,在url后面增加一个?号,然后参数名=参数值的形式,多个参数以&符号分隔。由于浏览器对url的支持是1024字节,所以get请求的参数长度是有限的,最多不超过1024字节。
接下来我们点击百度的登录:
![be13282323df7f4a9d815f81628dacb8.png](https://i-blog.csdnimg.cn/blog_migrate/1b68ab095f89197a96c02db2e4b520a8.jpeg)
随便输入一个手机号码和密码(不用正确),F12打开工具点击登录
我们看到方法这一栏有一个post.这个post是什么东西呢?点上去看看:
![39c154245b5e29a17ddae26609a4cb92.png](https://i-blog.csdnimg.cn/blog_migrate/84ca9cd78b72cf06b17a1a1427ec7632.jpeg)
熟悉的东西又回来了,有木有?
其实POST也是一种客户端向服务端发起的请求,url如下:
https://passport.baidu.com/v2/api/?login
嗯。。。url上没有参数。。。那刚才输入用户名和密码干什么?哈哈,我们点击下参数,
![eaaca919b739aeeffa46f004360cbf8b.png](https://i-blog.csdnimg.cn/blog_migrate/4e81c9685b576893e5bb8acb5a4e355f.jpeg)
除了这些呢?还有其他的东西,好长好长
![e70c007ef8fbaef4a110684ad27d9f2a.png](https://i-blog.csdnimg.cn/blog_migrate/500f78612ff997f9177bead8d52098ce.jpeg)
我勒个去,好多数据啊,1024字节放不下吧?
是的,post也是一种客户端向服务端的请求方式,数据不会出现在url里,而且长度无限制!
通过以上两个小实验我们似乎又搞明白了以下几个事情:
1. 浏览器和服务器之间的交互是通过请求/响应来完成的,浏览器通过url请求服务器的资源,服务器给与浏览器响应,浏览器将服务端的响应展示在页面上。
2. 服务器主要的作用是处理浏览器发起的请求,客户端的请求方式主要有两种方式,get和post.
换一个网站继续上网
我们打开一个站点https://news.baidu.com/ 。
![852ea7fab2170cf2e4bc8a276b164002.png](https://i-blog.csdnimg.cn/blog_migrate/1cc4d1fc533bbdf49fc7236f311d0cfc.jpeg)
站点里有很多的新闻,新闻也有分类,国内、国际、军事、等等。
我们点击不同的分类,随着url的不断变化,我们看到了不一样的内容。
![393cc5b3c0cc6bd9db0e1127fa3cf8c2.png](https://i-blog.csdnimg.cn/blog_migrate/bb28c6a2c0129961527464b022623325.jpeg)
我们点击具体的新闻标题,看到了不同的新闻内容。
这些内容很多,还可能实时变化。那么有一个问题?这些内容都是从哪里获取的?都是以什么方式存储的?
我好像听过一个专门用来分门别类的存取数据的一个软件——数据库。
好吧,我就当你知道了,这些东西暂时都是从数据库里拿到的吧。
通过刚才的那一波操作,我们似乎又发现了一些事情:
1. 随着url的变化,服务端响应给了浏览器不同的内容。
2. 这些内容分门别类的存放在数据库中。
3. 服务器在响应不同的url时,可能根据url的不同,从数据库中获取不同的数据。
4. 服务器将这些数据组织起来,以浏览器请求的数据格式(大多数时候是html),返回给浏览器。
5. 浏览器接收到服务器返回的数据之后,解析数据,将数据渲染成人类可以识别的页面!
通过上面的几个小实验,关于如何进化成一只web猿类,至少需要哪些技能,不需要猿人工厂君总结,相信大家已经知道一些了:
1. 必须先换个姿势上网(不管你说是不是,必须先强行达成共识)
![48ce9595f8b09ecf9d2608028e5baeec.png](https://i-blog.csdnimg.cn/blog_migrate/66d7bf4c13c1b6030e78e19f4b23aee9.jpeg)
2. html浏览器最终识别的就是它了。
3. CSS让页面产生很多格式和效果。
4. JavaScript控制页面动作,改变页面结构,和服务端做数据交互
5. web服务器,一个用来处理和响应浏览器发出的请求的软件工具(不求会编写,但求会使用)
6. 数据库软件,用于分门别类的存取数据。
7. 一门服务端编程语言,用于和web服务器配合处理浏览器发起的请求,用于和数据库交互,这里推荐的是java,毕竟各大站点都在使用它,发展成熟需求量大,资料齐全,便于学习,不想学java或者觉得java没前途的同学,可以点右上角的x,只当是听了一席废话。