寫在前面：僅供自己學習參考，侵删。
一些概念
網站資料處理一般分為三層
第一層，表示層，這部分可以用HTML代碼，CSS/Javascript代碼來實作等。通過前端代碼可以實作網頁的布局和設計。這層又可以稱為顯示層。也就是你用浏覽器打開能看到的網頁。（前端負責的）
第二層，是業務層，這層是負責處理資料的。常用的後端語言有PHP，Java，Go等。後端将前端傳回的資料進行一系列的業務處理之後，将要回顯的資料發送給前端。（後端負責的）
第三層，是資料層，主要是對資料庫進行操作。當然這裡的資料庫不止有傳統的關系型資料庫mysql等，還有非關系型資料庫，例如：redis、MongoDB、es等（資料庫）
接口
前後端的互動基本都是通過程式接口實作的。
接口就是提供具體能力的一個标準和抽象，是一些預先定義的函數，包括接口位址、傳入參數和傳回參數和資料。
可以簡單了解為，當需要通路某些資料時，正常狀态下向某一路徑傳入正确參數，會收到對應的傳回資料。
前後端互動主要有Json格式、form-data格式等，Json格式為主。
JSON(JavaScript Object Notation)是一種輕量級的資料交換格式，采用完全獨立于程式設計語言的文本格式來存儲和表示資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言，易于閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。
對象格式：是一個無序的“鍵值對”集合，顯示的時候看似有順序，其實就是巧合。
{ "ID": 1001,"name": "張三", "age": 24}
數組格式：是值的有序集合。
["張三","李四","王老五"]
嵌套格式：
[{ "id":1,"name":"張三""age":18,"sex":"男"},{"id":2,"name":"李四","age":30,"sex":"男"}]
Json格式、form-data格式的比較
1.資料格式不同
form-data的資料格式為：a=1&b=2&c=3;
json的資料格式為：{“a”: 1, “b”: 2, “c”: 3};
2.請求頭不同
form-data：Content-Type: application/x-www-form-urlencoded;
json: Content-Type: application/json
3.對于同樣的資料資訊，使用form-data資料量會比使用json的要小一點；
4.對于可讀性來說，json的可讀性要好，因為它簡潔和清晰的層次結構；
5.form-data傳二進制比較友善，如上傳檔案，而使用json則不太合适；
資料都放在伺服器上，伺服器上的大多數資料會放在資料庫中，比如MySQL資料庫。網上是說，部分資料會緩存在檔案中，比如一些配置檔案，以加快響應速度。但經和學姐等人讨論有不同意見，分擔mysql壓力的緩存通常放在記憶體中，檔案io不如直接讀mysql。
有兩個比較有趣的緩存資料cookie和session，他們常常用來記錄請求者的身份，cookie在用戶端，常常加密存在于用戶端裡，session常常存在于服務端上。
前端不能直接操作資料庫，必須通過後端來進行操作。是以，就産生了前後端資料互動的問題。
資料互動的過程可簡單了解為，前端想要獲得某些資料，将傳入參數通過URL接口位址，傳遞給伺服器，伺服器根據傳入的參數了解到前端要獲得什麼資料，去資料庫查詢擷取資料，再将所需資料傳回給前端，前端拿到資料做相應的頁面展示。
資料互動有哪些方式（10個）
1. cookie
通俗的說，cookie是前端能用于存儲資訊的一個技術，這個技術主要的使用目的是為了在跟後端進行資料互動時，讓後端識别前端的身份。
2. 服務端渲染SSR
服務端渲染，是指由服務側（server side）完成頁面的DOM結構拼接，然後發送到浏覽器，為其綁定狀态與事件，成為完全可互動頁面的過程。
3. 用戶端渲染CSR
用戶端渲染，是指由用戶端（client side）中的JS完成頁面和資料的拼接，生成DOM結構再交由浏覽器渲染成頁面的過程。
4. Ajax
Ajax 是指⼀種建立互動式⽹⻚應⽤的⽹⻚開發技術。Ajax 是⼀種在⽆需重新加載整個⽹⻚的情況下，能夠更新部分⽹⻚的技術。Ajax 是⼀種⽤于建立快速動态⽹⻚的技術。
使用Ajax技術網頁應用能夠快速地将增量更新呈現在使用者界面上，而不需要重新加載整個頁面，這使得程式能夠更快地響應使用者的操作。
5. JSONP
可用于解決主流浏覽器的跨域資料通路的問題。
為什麼會出現跨域問題——出于浏覽器的同源政策限制。同源政策是一種約定，它是浏覽器最核心也最基本的安全功能。
在同源政策中，要求域名、協定、端口 3部分都要相同。
6. CROS
CORS是一個W3C标準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它是一種規範化的跨域請求解決方案，安全可靠。
優勢：
可以在服務端控制是否允許跨域，可自定義規則
支援各種請求方式，如get，post等
缺點：
會産生額外的請求，就是接下來我們要提到的預檢請求
CORS請求
簡單請求： 簡單請求就是表單請求，浏覽器沿襲了傳統的處理方式，不把行為複雜化，否則開發者可能轉而使用表單，規避 CORS 的限制，即不使用cors。
非簡單請求：在正式通信之前，增加一次HTTP請求，稱為“預檢”請求。浏覽器會先詢問伺服器，目前網頁所在域名是否在伺服器的許可名單之中，伺服器允許之後，浏覽器才會發出正式的XMLHttpRequest請求，否則會報錯。
即時通訊技術
7. Ajax短輪詢
浏覽器定時向伺服器發送請求，看看有沒有更新的資料。
短輪詢的缺點：消息互動的實時性較低（服務端到用戶端的資料回報效率低）；
實作方式
方式1：設定一個定時器，無論有無結果傳回，時間一到就會繼續發起請求，這種輪詢耗費資源，也不一定能得到想要的資料，這樣的輪詢是不推薦的。
方式2：輪詢就是在第一次請求的時候，如果傳回資料了那麼就在成功的回調裡面再次發起這個請求，就像遞歸一樣，調用本方法。
8. comet
comet:俗稱反轉Ajax或服務端推資料技術。
由于某些特定的業務需求，比如搶票，我們需要有及時的資料更新,我們能夠想到的就是使用setInterval每隔一定時間，比如10s去擷取一次請求，進而做到一些通知更新，但是這并不一種高效的做法，這會增加伺服器的請求數量。
這個時候有了另外一種概念，“反向Ajax”，即由伺服器進行資料推送， Comet能夠讓資訊近乎實時的被推送到頁面上，非常适合要求實時性的擷取的資料的頁面。
實作Comet的方式有兩種：
長輪詢
頁面發起一個到伺服器的請求，然後伺服器一直保持連接配接打開，直到有資料發送。發送完資料之後，浏覽器關閉連接配接，随即又發起一個到伺服器的請求。這一過程在頁面打開期間一直持續不斷。
http流
流在頁面的整個生命周期内隻使用一個HTTP連接配接。具體來說，就是浏覽器向伺服器發送一個請求，而伺服器保持連接配接打開，然後周期性地向浏覽器發送資料。
9. Web Socket
HTML5 WebSocket 設計出來的目的就是要取代輪詢和 Comet 技術，使用戶端浏覽器具備像 C/S 架構下桌面系統的實時通訊能力。
浏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接配接的請求，連接配接建立以後，用戶端和伺服器端就可以通過 TCP 連接配接直接交換資料。
也就是我們可以使用web技術建構實時性的程式比如聊天遊戲等應用。
10. SSE
SSE（Server-Sent Event，服務端推送事件）是一種允許服務端向用戶端推送新資料的HTML5技術。與由用戶端每隔幾秒從服務端輪詢拉取新資料相比，這是一種更優的解決方案。
部分方式詳細講解
SSR （server side render）服務端渲染
優點
前端首屏響應速度變快，盡量不占用前端的資源，前端耗時少。因為後端拼接完了html，浏覽器隻需要直接渲染出來。
有利于SEO。因為在後端有完整的html頁面，是以爬蟲更容易爬取獲得資訊。
SEO（search engine optimization）搜尋引擎優化，利用搜尋引擎的規則提高網站在有關搜尋引擎内的自然排名
缺點
不利于前後端分離，開發效率低。使用伺服器端渲染，則無法進行分工合作，則對于前端複雜度高的項目，不利于項目高效開發。
占用伺服器端資源，加大了伺服器的壓力。
CSR（client side render）用戶端渲染
随着應用複雜性提高，使用者對于界面的要求越來越高，前端互動也越發顯得重要。同時，AJAX的興起把傳統的開發模式帶入到一個新時代：前後端分離式開發，即前端有自己的服務，不依賴于背景，前後端通過AJAX進行資料互動。前端發送請求，通過背景提供的api擷取資料，然後通過前端js進行HTML頁面的生成，展示給浏覽器。
優點
前後端分離。前端專注于前端UI，後端專注于api開發，且前端有更多的選擇性，而不需要遵循後端特定的模闆。
使用者體驗更好，我們将網站做成SPA（單頁面應用）或者部分内容做成SPA，當使用者點選時，不會形成頻繁的跳轉。
缺點
前端響應速度慢，特别是首屏。
不利于SEO，因為用戶端渲染頁面的代碼中隻有一個空代碼（空html），是以對于目前的搜尋引擎爬蟲來說，頁面中沒有任何有用的資訊，自然就無法提取關鍵詞，進行索引。
二者之間的選擇：
如果是企業級網站，主要功能是頁面展示，它沒有複雜的互動，并且需要良好的SEO，那我們應該使用服務端渲染。
如果是後端管理頁面，強調互動性，它不需要考慮到SEO，那我們應該使用用戶端渲染。
具體使用哪種渲染方式也不是絕對的，現在很多網站使用服務端渲染和用戶端渲染結合的方式
前後端分離的優勢與劣勢
優勢：
1.以實作真正的前後端解耦，優化開發流程，劃分職責界限
2.減少後端伺服器的并發負載壓力
3.更友好的錯誤提示
劣勢：
1.前端響應較慢，資源消耗嚴重，在業務複雜的情況下，一個頁面可能要發起多次HTTP請求才能将頁面渲染完畢，且在Json傳回的資料量比較大的情況下，渲染的十分緩慢，會出現頁面卡頓的情況
b.不利于SEO,搜尋引擎的爬蟲無法爬下JS異步渲染的資料
為了解決不足，後續在前後端分離的基礎上衍生出了引入NodeJS作為中間層的進行服務端渲染的架構方案.
同構渲染
首屏使用服務端渲染，其他頁面使用用戶端渲染。
同構渲染，實際上就是把CSR和SSR的優勢結合起來，讓同一套代碼在伺服器上跑一遍，生成首屏内容，然後再在用戶端跑一遍，綁定事件。這樣既提供了更快的首屏速度、更好的SEO支援，也完成了前後端分離，又能避免對伺服器帶來過大的負載。
AJAX（Asynchronous Javascript And XML）異步JS&XML
Ajax 是指⼀種建立互動式⽹⻚應⽤的⽹⻚開發技術。Ajax 是⼀種在⽆需重新加載整個⽹⻚的情況下，能夠更新部分⽹⻚的技術。Ajax 是⼀種⽤于建立快速動态⽹⻚的技術。
傳統的web應用要想與伺服器互動，必須送出一個表單（form），伺服器接收并處理傳來的表單，然後傳回全新的頁面，因為前後兩個頁面的資料大部分都是相同的，這個過程做了很多重複的工作，傳輸了很多備援的資料、浪費了帶寬。于是Ajax技術便應運而生。
Ajax的出現使用戶端與伺服器端傳輸資料少了很多，也快了很多，也滿足了以豐富使用者體驗為特點的web2.0時代初期發展的需要，但是慢慢地也暴露了他的弊端。比如無法滿足即時通信等富互動式應用的實時更新資料的要求。這種浏覽器端的技術畢竟還是基于http協定，http協定要求的請求/響應的模式也是無法改變的。
Ajax 通過在後端與伺服器進⾏少量資料交換，可以使⽹⻚實作異步更新。這意味着可以在不重新加載整個⽹⻚的情況下，對⽹⻚的某部分進⾏更新。
同步：發送⼀個請求，需要等待響應傳回後才能夠發送下⼀個請求，如果該請求沒有響應，不能發送下⼀個請求，用戶端會處于⼀直等待中。
異步：發送⼀個請求，不需要等待響應傳回，随時可以再發送下⼀個請求。
實作
原生js實作
1、定義⼀個XMLHttpRequest核⼼對象xhr
2、通過xhr.open⽅法給目前對象提供通路⽅式、URL等
3、發送目前的請求⾄指定的URL
4.後端可用servlet接收傳回值并處理
JQuery實作
JS版的Ajax僅做為了解，我們重點學習jQuery版的Ajax，jQuery是⼀個優秀的js架構，對JS原⽣的Ajax進⾏了封裝，封裝後的Ajax的操作⽅法更簡潔，功能更強⼤，，文法結構簡單，代碼可讀性好，也是程式員最普遍使⽤的一種資料互動方式。在這裡順便提一下axios，axios是現在最流行的一種第三方庫，建議大家去熟悉了解一下它的使用方法等。
與Ajax操作相關的經常使⽤的jQuery⽅法
Ajax請求
Get請求
Post請求
相同點： 都是jQuery封裝的⽅法，實作了異步的資料互動。
不同點： $.ajax()是jQuery的第⼀次封裝，使⽤時稍顯麻煩，但是功能強⼤，覆寫了get和post請求，有錯誤調試能⼒，寫法順序可以改變。
$.post()和$.get()是jQuery Ajax的第⼆次封裝，由于$.Ajax()寫法過于臃腫，簡化為$.post()和$.get()，功能是相同的沒有差別。但是寫法要求更⾼，順序不能改變。
cookie
前端通過登入來存儲cookie資訊，後端可以通過 req.cookies() 來擷取存儲的cookie資訊
我們在浏覽器上登陸上自己的賬号後，隻要浏覽器不關閉，随便我們浏覽網頁，我們的賬号始終都是處于登陸狀态的。這用到的就是cookie，我們把我們的賬号資訊儲存在了浏覽器的cookie上了
原生js實作
jQuery實作
1).expires: 7
定義cookie的有效時間，值可以是一個數字（從建立cookie時算起，以天為機關）或一個Date 對象。如果省略，那麼建立的cookie是會話cookie，将在使用者退出浏覽器時被删除。
2).path: ‘/’
預設情況：隻有設定cookie的網頁才能讀取該cookie。
3).secure: false
預設值：false。如果為true，cookie的傳輸需要使用安全協定（HTTPS）。
預設值：建立 cookie的網頁所擁有的域名。
4).raw: false
預設值：false。
預設情況下，讀取和寫入 cookie 的時候自動進行編碼和解碼（使用encodeURIComponent 編碼， decodeURIComponent 解碼）。要關閉這個功能設定 raw: true 即可。
jsonp
可用于解決浏覽器的跨域資料通路的問題。
利用的就是script的src标簽沒有跨域限制來實作的。
最大特點就是簡單适用，相容性好，缺點是隻支援get請求，不支援post請求。
核心思想：網頁通過添加一個<script>元素，向伺服器請求 JSON 資料，伺服器收到請求後，将資料放在一個指定名字的回調函數的參數位置傳回來。
原生js實作
jQuery實作