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

HTTP協議

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

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

HTTP協議簡單（屬于TCP協議族），使得HTTP服務器的程序規模小，因而通信速度很快?？蛻粝蚍掌髡埱蠓諘r，只需傳送請求方法和路徑。而且，HTTP允許傳輸任意類型的數據對象。

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

接口

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

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

JSON

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

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

{
“姓名”:”流年”

“性別”:”男”

“興趣愛好”:”聽音樂”

}

這就是 JSON鍵/值對。

實例解析1

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

1. banner部分
2. 課程種類部分
3. 熱門好課部分

（1）banner部分

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

前臺部分：

#前端得到的URL
URL:http://www.heiheihei.com/GetPicture.php
#需要傳遞給后端帶參數的URL
或者http://www.heiheihei.com/GetPicture.php?time=”2017-11-23 00:00:00″

代碼解析：

1. http： #協議頭，跟后臺交互需要基于HTTP協議。
2. www.heiheihei.com ?#域名也叫主機名（heiheihei是我亂起的）。
3. /GetPicture.php ?#路徑，也就是能給前臺數據的路徑。
4. ？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給前端，讓前端直接發訪問就可以了：

URL:http://www.heiheihei.com/LessonType.php

（3）熱門好課部分

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

#前端得到的URL
URL:http://www.heiheihei.com/goodLesson.php
#需要傳遞給后端帶參數的URL
或者http://www.heiheihei.com/goodLesson.php?time=”2017-11-23 00:00:00&clases=””

總結來說：所有前端請求的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年互聯網產品設計經驗。

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