第10章 Angular與服務端的交互 1什麼是交互？

什麼是交互？

靜態交互

在搭建完畢頁面UI組件以後，這些資源所展示出的頁面，咱們稱之爲靜態頁面。

在靜態頁面上，咱們已經能夠實現簡單的交互，好比下面的網頁上有一些 李煜的 虞美人詩詞，咱們想添加一句著名愛國詩人林則徐的詩句，能夠這樣作。

然而咱們發現，由於這時列表是由組件中靜態的數據生成，不管對頁面作什麼操做，只要刷新頁面，原來有幾個列表，如今仍是有幾個列表。

若是咱們的網頁只是用於展現一些東西，這樣就很好。但假設，咱們要設計這樣一個日記本網頁，咱們想要在上面記錄天天的學習心得，生活軼事。就要保存數據。
而保存數據就是與服務端的動態交互！

動態交互

提到了服務端，就要說說http請求了。

• 在瀏覽器的地址欄輸入一個地址，敲擊回車，這就是一個http請求。
• 在百度首頁輸入你想要的搜索的動動，而後點擊搜索。這仍是一個http請求。
  • 上面兩個請求的特色是，都發生了頁面的跳轉，前者是從起始頁(假設你剛打開瀏覽器)，後者是從百度首頁，二者都跳轉向一個新的頁面。
• 在某個前輩的博客上看到一篇好文，點擊查看更多，頁面沒有刷新，可是所有文章都顯示出來了。也是一個http請求
• 在淘寶上買東西，點擊查看評論，頁面沒有刷新，但購物者的評論顯示出來了。這仍是一個http請求
  • 上面兩個請求的特色是，都沒發生頁面的跳轉，可是頁面上的數據被更新了。這種局部刷新稱爲ajax請求。他仍舊屬於一個http請求。

看上去，發起一個http請求就是讓網頁總體(跳轉)更新或者局部更新。在這個步驟中，咱們輸入了網址，按下了回車或者點擊鼠標表示發送這個請求。
那麼這個請求發送到哪裏去了呢？
發送到服務器去了。

http請求內容不少，更多內容能夠查閱MDN

假設服務器是一個商人，http請求就是向商人買東西的過程。

• 客戶端發起請求，我要買一瓶雪碧，給你3塊錢(給服務端一個網址)
• 服務端響應請求，收到3塊錢，你要雪碧是吧？給你一瓶雪碧(給你一個網頁)

有一天，我忽然以爲每次要買雪碧都要付錢很麻煩，我在商人那預存30塊，每次直接拿雪碧，不用付錢了。
這時候商人要拿出他的筆記本，記下我提早預付了30塊，而且每次在我取走雪碧後在本子上-3。

很明顯，這個筆記本起到了一個保存數據的做用，商人(服務器)在我要買雪碧的時候，就會去查詢這個筆記本(數據庫)，而後作對應的操做(給我雪碧，或者是告訴我錢不夠了)。

回到詩詞列表網頁上，我想要在網頁上保存一條詩句，而且不會隨着刷新而遺失這條數據，這就須要向服務器發送請求後，服務器查詢數據庫，建立數據，獲得數據庫響應後，將響應內容發回客戶端，客戶端將這個響應添加到頁面上。
這條路徑仍是客戶端=>服務器=>數據庫。

淺刪除是靜態的交互。