想要做好互聯(lián)網(wǎng)產(chǎn)品的設計，就要對一些基本的技術實現(xiàn)原理有所了解，本文將對互聯(lián)網(wǎng)產(chǎn)品的前后臺數(shù)據(jù)交互做一個小的總結。（技術大神輕噴）

HTTP協(xié)議

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

HTTP協(xié)議即超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應用最為廣泛的一種網(wǎng)絡協(xié)議。HTTP是一個客戶端和服務器端請求和應答的標準。

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

關于HTTP協(xié)議只做簡單介紹，知道互聯(lián)網(wǎng)產(chǎn)品的前后端數(shù)據(jù)交互是通過一個通訊協(xié)議（不僅限于HTTP）完成的即可。

接口

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

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

JSON

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

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

{
“姓名”:”流年”

“性別”:”男”

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

}

這就是 JSON鍵/值對。

實例解析1

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

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

（1）banner部分

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

前臺部分：

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

代碼解析：

1. http： #協(xié)議頭，跟后臺交互需要基于HTTP協(xié)議。
2. www.heiheihei.com ?#域名也叫主機名（heiheihei是我亂起的）。
3. /GetPicture.php ?#路徑，也就是能給前臺數(shù)據(jù)的路徑。
4. ？time=”2017-11-23 00:00:00″ ?#參數(shù)，帶著這個參數(shù)給服務器，服務器就會把2017年11月23日零時0分0秒的banner查詢到并且返給前端。

后端部分：

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

代碼解析：

數(shù)據(jù)庫查詢語句，去數(shù)據(jù)庫里面去查找相應的數(shù)據(jù)表，查詢條件就是前端傳遞過來的URL參數(shù)time。

（2）課程種類部分

此部分包含兩部分內容，即圖片和標題。這些內容在后臺數(shù)據(jù)庫表中，后臺只需要設計個URL給前端，讓前端直接發(fā)訪問就可以了：

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

（3）熱門好課部分

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

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

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

實例解析2

這是一個網(wǎng)站的登錄功能，我們通過ajax（可以在不重新加載整個頁面的情況下，與服務器交換數(shù)據(jù)并更新部分網(wǎng)頁）加載服務器數(shù)據(jù)的過程再來體驗一下前后臺數(shù)據(jù)交互的過程。

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

前端代碼（解析）如下：

$.ajax({

‘url’:’login.php’, ?#和之前的URL一樣，前端把參數(shù)傳遞到什么位置

‘data’:{“username”:$(‘#UserName’).val(),”PassWord”:$(‘#password’).val(),}, ?#前端傳遞給后端的數(shù)據(jù)（用戶名和密碼）

‘success’:function(data){

} ??#服務器返回數(shù)據(jù)成功的時候，前端需要如何操作（data中存的就是服務器返回的數(shù)據(jù)）

‘type’:’post’ ?#數(shù)據(jù)傳輸?shù)姆椒?/strong>

‘dataType’:’json’ ?#傳遞數(shù)據(jù)的類型，JSON

}）;