前后端如何通信
目錄
- 前后端如何通信
- URL . URI . URN
- 第一部分:傳輸協(xié)議
- 第二部分:域名
- 第三部分:端口號
- 第四部分:請求資源文件的路徑名稱
- 第五部分:問號傳參
- 第六部分:HASH值
前后端如何通信
前段:客戶端
后端: 服務(wù)器端
所謂的全棧,其實是你可以實現(xiàn)客戶端和服務(wù)器端程序的編寫,而且可以實現(xiàn)倆端之間的通信
客戶端和服務(wù)器端是如何通信的?
自己做一個技術(shù)博客
本地開發(fā)(當(dāng)前項目可以在本地預(yù)覽)
部署到服務(wù)器上,讓別人可以通過域名或者外網(wǎng)訪問
- 購買一臺服務(wù)器(阿里云獨立主機,虛擬服務(wù)器等)https.//wanwang.aliyun.com/
- 購買域名
- 把自己做的項目傳到服務(wù)器上
- 讓域名和服務(wù)器關(guān)聯(lián)(DNS解析或是域名解析)
- 在服務(wù)器上發(fā)布或者部署我們的項目(iis,nginx,apache。。。。。)
做一些推廣(SEO推廣。友情鏈接交換,技術(shù)文章持續(xù)更新。。。)
經(jīng)典面試題:當(dāng)我們在瀏覽器地址欄中輸入一個URL地址,到最后看到頁面,中間都經(jīng)歷了那些
1.假設(shè)我們訪問的是:https://www.baidu.com/這個地址,按下ENTER鍵后,我們可以看到百度首頁面
1)百度頁面并沒有在我們自己的客戶端本地。我們是輸入地址后,才請求過來的
2)輸入不同的域名可以看到不同的頁面
3)有的網(wǎng)址是https,有的是http
4)需要客戶端聯(lián)網(wǎng)才能完成這些事情
----------------------
都經(jīng)歷那些事情
[Request請求階段]
1)首先根據(jù)客戶端輸入的域名,到DNS服務(wù)器上進行反解析(通過域名找到對應(yīng)服務(wù)器的外網(wǎng)ip)
2)通過找到的外網(wǎng)ip。找到對應(yīng)的服務(wù)器
3)通過在地址欄中輸入的端口號(沒有輸入是因為不同協(xié)議有自己默認(rèn)的端口號)找到服務(wù)器上發(fā)布的對應(yīng)的項目
[Response響應(yīng)階段]
4)服務(wù)器獲取到請求資源文件的地址例如 :/stu/index.html。把資源文件中的源代碼找到
5)服務(wù)器端會把找到的源代碼返回給客戶端(通過HTTP等傳輸協(xié)議返回的)
[瀏覽器自主渲染]
6)客戶端接受到源代碼后,會交給瀏覽器的內(nèi)核(渲染引擎)進行渲染,最后由瀏覽器繪制出對應(yīng)的頁面
URL . URI . URN
URI:統(tǒng)一資源標(biāo)識符
URL:統(tǒng)一資源路徑地址(在當(dāng)前頁面控制臺輸入:document.location.href)就可以得到當(dāng)前頁面的URL
URN:統(tǒng)一資源名稱
URI=URL +URN
一個完整的URL包含很多部分
http://www.html5train.com/stu/index.html?name=zf&age=9&teacher=zxt#good
第一部分:傳輸協(xié)議
傳輸協(xié)議是用了完成客戶端和服務(wù)端的數(shù)據(jù)(內(nèi)容)傳輸?shù)?#xff0c;類似于快遞小哥,負(fù)責(zé)把客戶和商家的物品來回傳送
1:客戶端不僅可以向服務(wù)器發(fā)送請求,而且還可以把一些內(nèi)容傳遞給服務(wù)器
2:服務(wù)端也可以把內(nèi)容返回給客戶端
客戶端和服務(wù)端傳輸?shù)膬?nèi)容總稱HTTP報文,這些報文信息都是基于傳輸協(xié)議完成傳輸?shù)?#xff0c;客戶端傳遞給服務(wù)器叫做請求(request),服務(wù)器返回給客戶端叫做響應(yīng)( response),request+response倆個階段統(tǒng)稱為一個HTTP事務(wù)(事務(wù):一件完整的事情)
THTP事務(wù)
1:當(dāng)客戶端向服務(wù)端發(fā)送請求,此時客戶端和服務(wù)端會建立一個傳輸通道(鏈接通道),傳輸協(xié)議就是基于這個通道把信息進行傳輸?shù)?br /> 2:當(dāng)服務(wù)器端接受到請求信息,把內(nèi)容返回給客戶端后,傳輸通道會自動銷毀關(guān)閉
傳輸協(xié)議分類
http:超文本傳輸協(xié)議(客戶端和服務(wù)端傳輸?shù)膬?nèi)容除了文本以外,還可以傳輸圖片,音視頻等文件流[二進制編碼/BASE64嗎],以及傳輸XML格式的數(shù)據(jù)等),是目前市場上應(yīng)用最廣泛的傳輸協(xié)議
http:http SSL,它比http更加安全,因為數(shù)據(jù)內(nèi)容的傳輸通道是經(jīng)過SSL加密的(它需要在服務(wù)器端進行特殊的處理),所以涉及資金類的網(wǎng)站一般都是https協(xié)議的
FTP:資源文件傳輸協(xié)議:一般用于客戶端把資源文件(不是代碼)上傳到服務(wù)器端,或者從服務(wù)器端下載一些資源文件(FTP傳輸?shù)膬?nèi)容會比http這類協(xié)議傳輸?shù)膬?nèi)容多)
HTTP報文
1:起始行
- 請求起始行
- 響應(yīng)起始行
2:首部(頭)
- 請求頭:內(nèi)置請求頭,自定義請求頭
- 響應(yīng)頭:內(nèi)置響應(yīng)頭,自定義響應(yīng)頭
- 通用頭:請求和響應(yīng)都有的
3:主體
- 請求主體
- 響應(yīng)主體
``總結(jié)
客戶端傳遞給服務(wù)器端數(shù)據(jù)
- 1:URL問號傳遞參數(shù)
- 2:設(shè)置請求頭
- 3:設(shè)置請求主體
服務(wù)器端返回給客戶端
- 1:設(shè)置響應(yīng)頭(例如服務(wù)器時間)
- 2:設(shè)置響應(yīng)主體
第二部分:域名
設(shè)置域名其實就是給不好記憶的服務(wù)器外網(wǎng)ip設(shè)置了一個好記憶的名字
- 頂級域名(一級域名):qq.com
- 二級域名:www.qq.com v.qq.com .....
- 三級域名:kbs.sports.qq.com ......
- .....
第三部分:端口號
在服務(wù)器發(fā)布項目的時候,我們可以通過端口號區(qū)分當(dāng)前服務(wù)器上不同的項目
一臺服務(wù)器的端口號取值范圍:0~65535之間,如果電腦上安裝了很多程序,有一下端口號是被占用了
HTTP:默認(rèn)端口號80
HTTPS:默認(rèn)端口號443
FTP:默認(rèn)端口號21
對于上述三個端口號其實是很重要的,如果被其他程序占用,我們則不能使用了;所以服務(wù)器上一般是禁止安裝其他程序的
第四部分:請求資源文件的路徑名稱
/stu/index.html
在服務(wù)器中發(fā)布項目的時候,我們一般都會配置一些默認(rèn)文檔:用戶即使不輸入請求文件的名稱。服務(wù)器也會找到默認(rèn)文檔(一般默認(rèn)文檔都是index/default...)
我們通常為了做SEO優(yōu)化,會把一些動態(tài)頁面的地址(xxx.php, xxx.aspx........)進行偽URL重寫(需要服務(wù)器處理的)
http://item.jd.com/4325427.html
不可能是有一個商品,自己就單獨寫一個詳情頁面,肯定是同一個詳情頁做的不同處理
1)第一種方案:
由后臺語音根據(jù)詳情頁模板動態(tài)生成具體的詳情頁面
2)第二種方案
當(dāng)前頁面就是一個頁面,例如:detail.html/detail.php.....,我們做詳情頁面的時候,開發(fā)是按照detail.html?id=4325427來開發(fā)的,但是這種頁面不方便做SEO優(yōu)化,此時我們把真實的地址進行重寫,重寫為我們看到的4325427.html
第五部分:問號傳參
?name=zf&age=9.....
把一些值通過xxx=xxx的方式,放在一個URL的末尾,通過問號傳遞
【作用】
1:在AJAX請求中,我們可以通過問號傳參數(shù)的方式,客戶端把一些信息傳遞給服務(wù)端,服務(wù)器根據(jù)傳遞信息的不一樣,返回不同的數(shù)據(jù)
2.消除AJAX請求中GET方式緩存
$.ajax({ url:'xxx?_=0.123456', method:'get' }); //=>我們會在請求URL的末尾追加一個隨機數(shù),_=隨機數(shù),保證每一次請求URL都是不一樣的,以此來消除GET請求遺留的緩存問題3:通過URL傳遞參數(shù)的方式,可以實現(xiàn)頁面之間信息的通信,例如:我們有倆個頁面A/B,A是列表頁面,B是詳情頁面,點擊A中的某一條信息,進入到唯一的詳情頁B,如何展示不同的信息,這種操作就可以基于URL問號傳遞參數(shù)來實現(xiàn)了
例如:
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471087
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471086
在進入到game.htm頁面的時候,我們可以獲取URL傳遞的參數(shù)值,根據(jù)傳遞參數(shù)值的不一樣,從服務(wù)器端獲取不同的數(shù)據(jù)展示
在列表頁面進行頁面跳轉(zhuǎn)的時候,我們需要記住的是跳轉(zhuǎn)的同時傳遞不同的參數(shù)值
<a href= 'game.html?mid=xxxx'>
第六部分:HASH值
#xxx
URL末尾傳遞的井號就是HASH值(哈希值)
作用:
1:頁面中錯點定位
2:前端路由(SPA單頁面開發(fā))
轉(zhuǎn)載于:https://www.cnblogs.com/kjz-jenny/p/9418246.html
總結(jié)
- 上一篇: 常用的操作系统知识
- 下一篇: springboot之session、c