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

HTTP協(xié)議

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

HTTP協(xié)議即超文本傳輸協(xié)議，是互聯(lián)網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)協(xié)議。HTTP是一個(gè)客戶端和服務(wù)器端請(qǐng)求和應(yīng)答的標(biāo)準(zhǔn)。

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

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

接口

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

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

JSON

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

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

{
“姓名”:”流年”

“性別”:”男”

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

}

這就是 JSON鍵/值對(duì)。

實(shí)例解析1

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

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

（1）banner部分

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

前臺(tái)部分：

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

代碼解析：

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

后端部分：

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

代碼解析：

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

（2）課程種類部分

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

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

（3）熱門好課部分

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

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

總結(jié)來說：所有前端請(qǐng)求的URL后面的參數(shù)，都是輔助后臺(tái)數(shù)據(jù)查詢的。如果不需要參數(shù)，那么后臺(tái)就會(huì)直接給個(gè)URL給前端。

實(shí)例解析2

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

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

前端代碼（解析）如下：

$.ajax({

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

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

‘success’:function(data){

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

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

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

}）;