淺析前後端數據交互

想要做好網際網路產品的設計，就要對一些基本的技術實現原理有所了解，本文將對網際網路產品的前後臺數據交互做一個小的總結。（技術大神輕噴）

HTTP協議

前後臺交互的協議不只有HTTP協議，本文僅以HTTP協議為例。

HTTP協議即超文本傳輸協議，是網際網路上應用最為廣泛的一種網絡協議。HTTP是一個客戶端和伺服器端請求和應答的標準。

HTTP協議簡單（屬於TCP協議族），使得HTTP伺服器的程序規模小，因而通信速度很快。客戶向伺服器請求服務時，只需傳送請求方法和路徑。而且，HTTP允許傳輸任意類型的數據對象。

關於HTTP協議只做簡單介紹，知道網際網路產品的前後端數據交互是通過一個通訊協議（不僅限於HTTP）完成的即可。

接口

在網際網路領域裡面，這個詞在不同場景下都會出現 ，經常聽到工程師說「 讓後臺給我提供一個接口，我直接調用這個接口 」「 這裡你設計一個接口，我來實現 」，接口就是提供具體能力的一個標準和抽象，是一些預先定義的函數，包括接口地址、傳入參數和返回參數和數據。可以簡單理解為，當需要訪問某些數據，正常狀態下傳入合格參數，會收到該數據範圍內的返回參數。前後臺的交互基本都是通過程序接口實現的。

數據交互的過程可簡單理解為，前臺想要獲得某些數據，將傳入參數通過URL接口地址，傳遞給伺服器，伺服器根據傳入的參數了解到前臺要獲得什麼數據，去資料庫查詢獲取數據，然後將所需數據返回給前臺，前臺拿到數據做相應的頁面展示。

JSON

JSON(JavaScript Object Notation,) 是一種輕量級的數據交換格式，採用完全獨立於程式語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易於閱讀和編寫，同時也易於機器解析和生成，並有效地提升網絡傳輸效率。

前後端交互時傳遞數據的格式，就是JSON格式的，當然也有XML格式。JSON數據格式很好理解，舉個例子：

{ 「姓名」:」流年」「性別」:」男」「興趣愛好」:」聽音樂」}這就是 JSON鍵/值對。

實例解析1

這是一個APP的頁面，前端會把它分為3個部分去分別請求數據，即：

banner部分課程種類部分熱門好課部分

（1）banner部分

前臺需要今天產品的最新圖片地址。URL中的參數主要是根據後臺需要，如果後臺需要前端傳遞一個時間戳才能夠查詢到具體的圖片信息，那麼前端在數據請求時請求參數就應該包含時間的參數，代碼如下：

前臺部分：

代碼解析：

http： #協議頭，跟後臺交互需要基於HTTP協議。www.heiheihei.com #域名也叫主機名（heiheihei是我亂起的）。/GetPicture.php #路徑，也就是能給前臺數據的路徑。？time=」2017-11-23 00:00:00″ #參數，帶著這個參數給伺服器，伺服器就會把2017年11月23日零時0分0秒的banner查詢到並且返給前端。

後端部分：

select 「輪播圖片」 from picture where time = 「2017-11-23 00:00:00」

代碼解析：

資料庫查詢語句，去資料庫裡面去查找相應的數據表，查詢條件就是前端傳遞過來的URL參數time。

（2）課程種類部分

此部分包含兩部分內容，即圖片和標題。這些內容在後臺資料庫表中，後臺只需要設計個URL給前端，讓前端直接發訪問就可以了：

（3）熱門好課部分

此部分也是包含圖片和標題。前端把這些信息告知後臺，後臺看到這些信息後，會去相對應的資料庫去查詢，如果這些數據後臺很容易獲取到，會直接給個URL給前端。否則就需要前端通過URL來傳遞一些參數。比如：

總結來說：所有前端請求的URL後面的參數，都是輔助後臺數據查詢的。如果不需要參數，那麼後臺就會直接給個URL給前端。

實例解析2

這是一個網站的登錄功能，我們通過ajax（可以在不重新加載整個頁面的情況下，與伺服器交換數據並更新部分網頁）加載伺服器數據的過程再來體驗一下前後臺數據交互的過程。

我們先給登錄名和登錄密碼的文本框起兩個名字，即UserName，PassWord。

前端代碼（解析）如下：

$.ajax({『url』:』login.php』, #和之前的URL一樣，前端把參數傳遞到什麼位置『data』:{「username」:$(『#UserName』).val,」PassWord」:$(『#password』).val,}, #前端傳遞給後端的數據（用戶名和密碼）『success』:function(data){} #伺服器返回數據成功的時候，前端需要如何操作（data中存的就是伺服器返回的數據）『type』:』post』 #數據傳輸的方法『dataType』:』json』 #傳遞數據的類型，JSON}）;

我們不用關心function（data）函數中具體的代碼，無非就是：前端頁面展示用戶的用戶名、頁面狀態變為已登錄、展示用戶相關數據等。

後端代碼過於複雜，我就不展示了，總之後端要做的處理就是：拿到前端傳遞過來的數據（用戶名和密碼）和資料庫中用戶信息做比對，如果一致則返回給前臺一個狀態，並且返回用戶的相關數據（暱稱、個人信息、購物車信息、收藏的商品等等），這些數據同樣是以JSON的形式傳回給前端。如果用戶名或密碼不一致，也返回給前端一個狀態。前端根據得到的狀態做出頁面的相應效果：登錄按鈕變為退出、顯示用戶暱稱、顯示購物車信息、顯示收藏信息、登錄框隱藏等，如果用戶名密碼不匹配則顯示相應的提示信息。

以上就是網站通過ajax技術完成的前後端數據交互過程。

你學會了嗎？

作者：流年，網際網路產品設計師，4年網際網路產品設計經驗。

本文由 @流年 原創發布於人人都是產品經理。未經許可，禁止轉載。