前後端如何通信_ZenDei技術網路在線

[TOC] 前後端如何通信前段：客戶端後端：　伺服器端所謂的全棧，其實是你可以實現客戶端和伺服器端程式的編寫，而且可以實現倆端之間的通信客戶端和伺服器端是如何通信的？本地開發（當前項目可以在本地預覽）部署到伺服器上，讓別人可以通過功能變數名稱或者外網訪問購買一臺伺服器（阿裡雲獨立主機，虛擬服務 ...

前後端如何通信

前後端如何通信

前段：客戶端
後端：　伺服器端
所謂的全棧，其實是你可以實現客戶端和伺服器端程式的編寫，而且可以實現倆端之間的通信
　
　客戶端和伺服器端是如何通信的？

自己做一個技術博客

本地開發（當前項目可以在本地預覽）
部署到伺服器上，讓別人可以通過功能變數名稱或者外網訪問

購買一臺伺服器（阿裡雲獨立主機，虛擬伺服器等）https.//wanwang.aliyun.com/

購買功能變數名稱

把自己做的項目傳到伺服器上

讓功能變數名稱和伺服器關聯（DNS解析或是功能變數名稱解析）

在伺服器上發佈或者部署我們的項目（iis，nginx，apache。。。。。）

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

經典面試題：當我們在瀏覽器地址欄中輸入一個URL地址，到最後看到頁面，中間都經歷了那些

1.假設我們訪問的是：https://www.baidu.com/這個地址，按下ENTER鍵後，我們可以看到百度首頁面
1）百度頁面並沒有在我們自己的客戶端本地。我們是輸入地址後，才請求過來的
2）輸入不同的功能變數名稱可以看到不同的頁面
3）有的網址是https，有的是http
4）需要客戶端聯網才能完成這些事情

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

都經歷那些事情
[Request請求階段]
1）首先根據客戶端輸入的功能變數名稱，到DNS伺服器上進行反解析（通過功能變數名稱找到對應伺服器的外網ip）
2）通過找到的外網ip。找到對應的伺服器
3）通過在地址欄中輸入的埠號（沒有輸入是因為不同協議有自己預設的埠號）找到伺服器上發佈的對應的項目
[Response響應階段]
4）伺服器獲取到請求資源文件的地址例如：/stu/index.html。把資源文件中的源代碼找到
5）伺服器端會把找到的源代碼返回給客戶端（通過HTTP等傳輸協議返回的）
[瀏覽器自主渲染]
6）客戶端接受到源代碼後，會交給瀏覽器的內核（渲染引擎）進行渲染，最後由瀏覽器繪製出對應的頁面

URL . URI . URN

URI：統一資源標識符
URL：統一資源路徑地址(在當前頁面控制台輸入：document.location.href)就可以得到當前頁面的URL
URN：統一資源名稱
URI=URL +URN

一個完整的URL包含很多部分
http://www.html5train.com/stu/index.html?name=zf&age=9&teacher=zxt#good

`第一部分：傳輸協議`

傳輸協議是用了完成客戶端和服務端的數據（內容）傳輸的，類似於快遞小哥，負責把客戶和商家的物品來回傳送
1：客戶端不僅可以向伺服器發送請求，而且還可以把一些內容傳遞給伺服器
2：服務端也可以把內容返回給客戶端
客戶端和服務端傳輸的內容總稱HTTP報文，這些報文信息都是基於傳輸協議完成傳輸的，客戶端傳遞給伺服器叫做請求（request），伺服器返回給客戶端叫做響應（ response），request+response倆個階段統稱為一個HTTP事務（事務：一件完整的事情）
THTP事務
1：當客戶端向服務端發送請求，此時客戶端和服務端會建立一個傳輸通道（鏈接通道），傳輸協議就是基於這個通道把信息進行傳輸的
2：當伺服器端接受到請求信息，把內容返回給客戶端後，傳輸通道會自動銷毀關閉

傳輸協議分類
http:超文本傳輸協議（客戶端和服務端傳輸的內容除了文本以外，還可以傳輸圖片，音視頻等文件流[二進位編碼/BASE64嗎]，以及傳輸XML格式的數據等），是目前市場上應用最廣泛的傳輸協議
http：http SSL，它比http更加安全，因為數據內容的傳輸通道是經過SSL加密的（它需要在伺服器端進行特殊的處理），所以涉及資金類的網站一般都是https協議的
FTP：資源文件傳輸協議：一般用於客戶端把資源文件（不是代碼）上傳到伺服器端，或者從伺服器端下載一些資源文件（FTP傳輸的內容會比http這類協議傳輸的內容多）

HTTP報文

1：起始行

請求起始行

響應起始行

2:首部（頭）

請求頭：內置請求頭，自定義請求頭

響應頭：內置響應頭，自定義響應頭

通用頭：請求和響應都有的

3：主體

請求主體

響應主體

1：請求xxx都是客戶端設置的信息，伺服器端獲取這些信息
2：響應xxx都是服務端設置的信息，客戶端用來接受這些信息
3：在谷歌瀏覽器控制台network選項中，我們可以看見當前客戶端和伺服器端交互的全部信息

``總結
客戶端傳遞給伺服器端數據

1：URL問號傳遞參數

2：設置請求頭

3：設置請求主體

伺服器端返回給客戶端

1：設置響應頭（例如伺服器時間）

2：設置響應主體

`第二部分：功能變數名稱`

設置功能變數名稱其實就是給不好記憶的伺服器外網ip設置了一個好記憶的名字

頂級功能變數名稱（一級功能變數名稱）:qq.com

二級功能變數名稱：www.qq.com v.qq.com .....

三級功能變數名稱：kbs.sports.qq.com ......

.....

`第三部分：埠號`

在伺服器發佈項目的時候，我們可以通過埠號區分當前伺服器上不同的項目

一臺伺服器的埠號取值範圍：0~65535之間，如果電腦上安裝了很多程式，有一下埠號是被占用了

HTTP：預設埠號80
HTTPS：預設埠號443
FTP：預設埠號21

對於上述三個埠號其實是很重要的，如果被其他程式占用，我們則不能使用了；所以伺服器上一般是禁止安裝其他程式的

`第四部分：請求資源文件的路徑名稱`

/stu/index.html
在伺服器中發佈項目的時候，我們一般都會配置一些預設文檔：用戶即使不輸入請求文件的名稱。伺服器也會找到預設文檔（一般預設文檔都是index/default...）
我們通常為了做SEO優化，會把一些動態頁面的地址（xxx.php, xxx.aspx........）進行偽URL重寫（需要伺服器處理的）

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

1）第一種方案：
由後臺語音根據詳情頁模板動態生成具體的詳情頁面
2）第二種方案
當前頁面就是一個頁面，例如：detail.html/detail.php.....，我們做詳情頁面的時候，開發是按照detail.html?id=4325427來開發的，但是這種頁面不方便做SEO優化，此時我們把真實的地址進行重寫，重寫為我們看到的4325427.html

`第五部分：問號傳參`

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

【作用】
1：在AJAX請求中，我們可以通過問號傳參數的方式，客戶端把一些信息傳遞給服務端，伺服器根據傳遞信息的不一樣，返回不同的數據

//=>$.ajax(url,{});
//=>$.get(url,function(){});對於AJAX請求的特殊寫法，原理還是基於AJAX方法實現的  $.post/$.script......

$.ajax({
url:'getPersonInfo?id=12'
.....
})
//=>當前案例，我們傳遞給伺服器的編號是多少，伺服器端就會把對應編號人員信息給返回

2.消除AJAX請求中GET方式緩存

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

3：通過URL傳遞參數的方式，可以實現頁面之間信息的通信，例如：我們有倆個頁面A/B，A是列表頁面，B是詳情頁面，點擊A中的某一條信息，進入到唯一的詳情頁B，如何展示不同的信息，這種操作就可以基於URL問號傳遞參數來實現了
例如：
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471087
http://sports.qq.com/kbsweb/game.htm?mid=100000:1471086
在進入到game.htm頁面的時候，我們可以獲取URL傳遞的參數值，根據傳遞參數值的不一樣，從伺服器端獲取不同的數據展示

在列表頁面進行頁面跳轉的時候，我們需要記住的是跳轉的同時傳遞不同的參數值
<a href= 'game.html?mid=xxxx'>

`第六部分：HASH值`

#xxx
URL末尾傳遞的井號就是HASH值（哈希值）

作用:
1:頁面中錯點定位
2：前端路由（SPA單頁面開發）