目錄

• 前后端如何通信
  • URL . URI . URN
  • 第一部分：傳輸協(xié)議
  • 第二部分：域名
  • 第三部分：端口號(hào)
  • 第四部分：請(qǐng)求資源文件的路徑名稱
  • 第五部分：問號(hào)傳參
  • 第六部分：HASH值

前后端如何通信

前段：客戶端
后端：　服務(wù)器端
所謂的全棧，其實(shí)是你可以實(shí)現(xiàn)客戶端和服務(wù)器端程序的編寫，而且可以實(shí)現(xiàn)倆端之間的通信
　
　客戶端和服務(wù)器端是如何通信的？

自己做一個(gè)技術(shù)博客

本地開發(fā)（當(dāng)前項(xiàng)目可以在本地預(yù)覽）
部署到服務(wù)器上，讓別人可以通過域名或者外網(wǎng)訪問

• 購(gòu)買一臺(tái)服務(wù)器（阿里云獨(dú)立主機(jī)，虛擬服務(wù)器等）https.//wanwang.aliyun.com/
• 購(gòu)買域名
• 把自己做的項(xiàng)目傳到服務(wù)器上
• 讓域名和服務(wù)器關(guān)聯(lián)（DNS解析或是域名解析）
• 在服務(wù)器上發(fā)布或者部署我們的項(xiàng)目（iis，nginx，apache。。。。。）

做一些推廣（SEO推廣。友情鏈接交換，技術(shù)文章持續(xù)更新。。。）

經(jīng)典面試題：當(dāng)我們?cè)跒g覽器地址欄中輸入一個(gè)URL地址，到最后看到頁(yè)面，中間都經(jīng)歷了那些

1.假設(shè)我們?cè)L問的是：https://www.baidu.com/這個(gè)地址，按下ENTER鍵后，我們可以看到百度首頁(yè)面
1）百度頁(yè)面并沒有在我們自己的客戶端本地。我們是輸入地址后，才請(qǐng)求過來(lái)的
2）輸入不同的域名可以看到不同的頁(yè)面
3）有的網(wǎng)址是https，有的是http
4）需要客戶端聯(lián)網(wǎng)才能完成這些事情

----------------------

都經(jīng)歷那些事情
[Request請(qǐng)求階段]
1）首先根據(jù)客戶端輸入的域名，到DNS服務(wù)器上進(jìn)行反解析（通過域名找到對(duì)應(yīng)服務(wù)器的外網(wǎng)ip）
2）通過找到的外網(wǎng)ip。找到對(duì)應(yīng)的服務(wù)器
3）通過在地址欄中輸入的端口號(hào)（沒有輸入是因?yàn)椴煌瑓f(xié)議有自己默認(rèn)的端口號(hào)）找到服務(wù)器上發(fā)布的對(duì)應(yīng)的項(xiàng)目
[Response響應(yīng)階段]
4）服務(wù)器獲取到請(qǐng)求資源文件的地址例如 ：/stu/index.html。把資源文件中的源代碼找到
5）服務(wù)器端會(huì)把找到的源代碼返回給客戶端（通過HTTP等傳輸協(xié)議返回的）
[瀏覽器自主渲染]
6）客戶端接受到源代碼后，會(huì)交給瀏覽器的內(nèi)核（渲染引擎）進(jìn)行渲染，最后由瀏覽器繪制出對(duì)應(yīng)的頁(yè)面

URL . URI . URN

URI：統(tǒng)一資源標(biāo)識(shí)符
URL：統(tǒng)一資源路徑地址(在當(dāng)前頁(yè)面控制臺(tái)輸入：document.location.href)就可以得到當(dāng)前頁(yè)面的URL
URN：統(tǒng)一資源名稱
URI=URL +URN

一個(gè)完整的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é)把客戶和商家的物品來(lái)回傳送
1：客戶端不僅可以向服務(wù)器發(fā)送請(qǐng)求，而且還可以把一些內(nèi)容傳遞給服務(wù)器
2：服務(wù)端也可以把內(nèi)容返回給客戶端
客戶端和服務(wù)端傳輸?shù)膬?nèi)容總稱HTTP報(bào)文，這些報(bào)文信息都是基于傳輸協(xié)議完成傳輸?shù)?#xff0c;客戶端傳遞給服務(wù)器叫做請(qǐng)求（request），服務(wù)器返回給客戶端叫做響應(yīng)（ response），request+response倆個(gè)階段統(tǒng)稱為一個(gè)HTTP事務(wù)（事務(wù)：一件完整的事情）
THTP事務(wù)
1：當(dāng)客戶端向服務(wù)端發(fā)送請(qǐng)求，此時(shí)客戶端和服務(wù)端會(huì)建立一個(gè)傳輸通道（鏈接通道），傳輸協(xié)議就是基于這個(gè)通道把信息進(jìn)行傳輸?shù)?br /> 2：當(dāng)服務(wù)器端接受到請(qǐng)求信息，把內(nèi)容返回給客戶端后，傳輸通道會(huì)自動(dòng)銷毀關(guān)閉

傳輸協(xié)議分類
http:超文本傳輸協(xié)議（客戶端和服務(wù)端傳輸?shù)膬?nèi)容除了文本以外，還可以傳輸圖片，音視頻等文件流[二進(jìn)制編碼/BASE64嗎]，以及傳輸XML格式的數(shù)據(jù)等），是目前市場(chǎng)上應(yīng)用最廣泛的傳輸協(xié)議
http：http SSL，它比http更加安全，因?yàn)閿?shù)據(jù)內(nèi)容的傳輸通道是經(jīng)過SSL加密的（它需要在服務(wù)器端進(jìn)行特殊的處理），所以涉及資金類的網(wǎng)站一般都是https協(xié)議的
FTP：資源文件傳輸協(xié)議：一般用于客戶端把資源文件（不是代碼）上傳到服務(wù)器端，或者從服務(wù)器端下載一些資源文件（FTP傳輸?shù)膬?nèi)容會(huì)比http這類協(xié)議傳輸?shù)膬?nèi)容多）

HTTP報(bào)文

1：起始行

• 請(qǐng)求起始行
• 響應(yīng)起始行

2:首部（頭）

• 請(qǐng)求頭：內(nèi)置請(qǐng)求頭，自定義請(qǐng)求頭
• 響應(yīng)頭：內(nèi)置響應(yīng)頭，自定義響應(yīng)頭
• 通用頭：請(qǐng)求和響應(yīng)都有的

3：主體

• 請(qǐng)求主體
• 響應(yīng)主體

1：請(qǐng)求xxx都是客戶端設(shè)置的信息，服務(wù)器端獲取這些信息 2：響應(yīng)xxx都是服務(wù)端設(shè)置的信息，客戶端用來(lái)接受這些信息 3：在谷歌瀏覽器控制臺(tái)network選項(xiàng)中，我們可以看見當(dāng)前客戶端和服務(wù)器端交互的全部信息

``總結(jié)
客戶端傳遞給服務(wù)器端數(shù)據(jù)

• 1：URL問號(hào)傳遞參數(shù)
• 2：設(shè)置請(qǐng)求頭
• 3：設(shè)置請(qǐng)求主體

服務(wù)器端返回給客戶端

• 1：設(shè)置響應(yīng)頭（例如服務(wù)器時(shí)間）
• 2：設(shè)置響應(yīng)主體

第二部分：域名

設(shè)置域名其實(shí)就是給不好記憶的服務(wù)器外網(wǎng)ip設(shè)置了一個(gè)好記憶的名字

• 頂級(jí)域名（一級(jí)域名）:qq.com
• 二級(jí)域名：www.qq.com v.qq.com .....
• 三級(jí)域名：kbs.sports.qq.com ......
• .....

第三部分：端口號(hào)

在服務(wù)器發(fā)布項(xiàng)目的時(shí)候，我們可以通過端口號(hào)區(qū)分當(dāng)前服務(wù)器上不同的項(xiàng)目

一臺(tái)服務(wù)器的端口號(hào)取值范圍：0~65535之間，如果電腦上安裝了很多程序，有一下端口號(hào)是被占用了

HTTP：默認(rèn)端口號(hào)80
HTTPS：默認(rèn)端口號(hào)443
FTP：默認(rèn)端口號(hào)21

對(duì)于上述三個(gè)端口號(hào)其實(shí)是很重要的，如果被其他程序占用，我們則不能使用了；所以服務(wù)器上一般是禁止安裝其他程序的

第四部分：請(qǐng)求資源文件的路徑名稱

/stu/index.html
在服務(wù)器中發(fā)布項(xiàng)目的時(shí)候，我們一般都會(huì)配置一些默認(rèn)文檔：用戶即使不輸入請(qǐng)求文件的名稱。服務(wù)器也會(huì)找到默認(rèn)文檔（一般默認(rèn)文檔都是index/default...）
我們通常為了做SEO優(yōu)化，會(huì)把一些動(dòng)態(tài)頁(yè)面的地址（xxx.php, xxx.aspx........）進(jìn)行偽URL重寫（需要服務(wù)器處理的）

http://item.jd.com/4325427.html
不可能是有一個(gè)商品，自己就單獨(dú)寫一個(gè)詳情頁(yè)面，肯定是同一個(gè)詳情頁(yè)做的不同處理

1）第一種方案：
由后臺(tái)語(yǔ)音根據(jù)詳情頁(yè)模板動(dòng)態(tài)生成具體的詳情頁(yè)面
2）第二種方案
當(dāng)前頁(yè)面就是一個(gè)頁(yè)面，例如：detail.html/detail.php.....，我們做詳情頁(yè)面的時(shí)候，開發(fā)是按照detail.html?id=4325427來(lái)開發(fā)的，但是這種頁(yè)面不方便做SEO優(yōu)化，此時(shí)我們把真實(shí)的地址進(jìn)行重寫，重寫為我們看到的4325427.html

第五部分：問號(hào)傳參

?name=zf&age=9.....
把一些值通過xxx=xxx的方式，放在一個(gè)URL的末尾，通過問號(hào)傳遞

【作用】
1：在AJAX請(qǐng)求中，我們可以通過問號(hào)傳參數(shù)的方式，客戶端把一些信息傳遞給服務(wù)端，服務(wù)器根據(jù)傳遞信息的不一樣，返回不同的數(shù)據(jù)

//=>$.ajax(url,{}); //=>$.get(url,function(){});對(duì)于AJAX請(qǐng)求的特殊寫法，原理還是基于AJAX方法實(shí)現(xiàn)的 $.post/$.script......$.ajax({ url:'getPersonInfo?id=12' ..... }) //=>當(dāng)前案例，我們傳遞給服務(wù)器的編號(hào)是多少，服務(wù)器端就會(huì)把對(duì)應(yīng)編號(hào)人員信息給返回

2.消除AJAX請(qǐng)求中GET方式緩存

$.ajax({ url:'xxx?_=0.123456', method:'get' }); //=>我們會(huì)在請(qǐng)求URL的末尾追加一個(gè)隨機(jī)數(shù)，_=隨機(jī)數(shù)，保證每一次請(qǐng)求URL都是不一樣的，以此來(lái)消除GET請(qǐng)求遺留的緩存問題

3：通過URL傳遞參數(shù)的方式，可以實(shí)現(xiàn)頁(yè)面之間信息的通信，例如：我們有倆個(gè)頁(yè)面A/B，A是列表頁(yè)面，B是詳情頁(yè)面，點(diǎn)擊A中的某一條信息，進(jìn)入到唯一的詳情頁(yè)B，如何展示不同的信息，這種操作就可以基于URL問號(hào)傳遞參數(shù)來(lái)實(shí)現(xiàn)了
例如：
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471087
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471086
在進(jìn)入到game.htm頁(yè)面的時(shí)候，我們可以獲取URL傳遞的參數(shù)值，根據(jù)傳遞參數(shù)值的不一樣，從服務(wù)器端獲取不同的數(shù)據(jù)展示

在列表頁(yè)面進(jìn)行頁(yè)面跳轉(zhuǎn)的時(shí)候，我們需要記住的是跳轉(zhuǎn)的同時(shí)傳遞不同的參數(shù)值
<a href= 'game.html?mid=xxxx'>

第六部分：HASH值

#xxx
URL末尾傳遞的井號(hào)就是HASH值（哈希值）

作用:
1:頁(yè)面中錯(cuò)點(diǎn)定位
2：前端路由（SPA單頁(yè)面開發(fā)）

轉(zhuǎn)載于:https://www.cnblogs.com/kjz-jenny/p/9418246.html

總結(jié)

以上是生活随笔為你收集整理的前后端如何通信的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。