????????本人才疏學(xué)淺，該文章就談一下我對(duì)前后端交互的理解喂链，如果那些寫得不對(duì)的返十，請(qǐng)各位大神指出來，大家交流學(xué)習(xí)椭微！

一.什么是前后端交互洞坑？

? ? ? ?了解什么是前后端交互之前，我們先了解一下前后端交互有什么作用蝇率。一個(gè)網(wǎng)站不僅僅是只有前端迟杂，還有在后端的數(shù)據(jù)庫和服務(wù)器（網(wǎng)站構(gòu)成如下圖所示），前端頁面上的數(shù)據(jù)不可能完全寫死的本慕，所以前端需要從服務(wù)器動(dòng)態(tài)地獲取數(shù)據(jù)排拷，以便保證前端的靈活性，此時(shí)便需要前后端的交互间狂。

所謂前后端交互攻泼，即前后端交互為前端和后端的互動(dòng)，也可以理解為數(shù)據(jù)交互鉴象。前端需要獲取（GET）的數(shù)據(jù)獲取上傳（POST）的數(shù)據(jù)何鸡，要通過 請(qǐng)求 來完成的纺弊，前端發(fā)送請(qǐng)求，后端接收到請(qǐng)求后骡男，便進(jìn)行對(duì)數(shù)據(jù)庫的操作淆游，返回前端所需要的數(shù)據(jù)，即可完成來一次前后端的交互隔盛。前后端交互的大致流程如下：

二.實(shí)現(xiàn)前后端交互

? ? ? ?接下來犹菱，則用代碼來實(shí)現(xiàn)前后端交互的過程。該過程用到的工具如下：（1）服務(wù)器我用的是MAMP（我的電腦為Mac吮炕，所以用MAMP腊脱，如果為Windows操作系統(tǒng)則為WAMP），該軟件集成來apache+mysql龙亲，可以很方便搭建服務(wù)器（點(diǎn)我下載MAMP或WAMP）陕凹。（2）我用的編譯軟件是Visual Studio Code，可自行根據(jù)自己的個(gè)人習(xí)慣選擇編譯器鳄炉，我是習(xí)慣使用這個(gè)杜耙。（3）本次實(shí)現(xiàn)用到的是原生的Ajax請(qǐng)求，PHP寫服務(wù)器拂盯。

? ? ? ?1.下載好MAMP或WAMP后佑女，打開軟件，點(diǎn)擊 Start Server?按鈕啟動(dòng)服務(wù)，Apache Server和Mysql Server都是綠色的則表明啟動(dòng)成功团驱，如下圖：

啟動(dòng)成功會(huì)自動(dòng)打開摸吠，如看到下圖也說明啟動(dòng)成功了

這時(shí)在瀏覽器直接輸入localhost或者127.0.0.1即可訪問了。

*注意：在開啟MAMP或者WAMP之前店茶，如果自己的電腦之前有安裝過apache或者mysql的蜕便，先去把服務(wù)停掉，不然可能會(huì)因?yàn)槎丝跊_突而造成啟動(dòng)不成功贩幻。

? ? ? ?2.注：這里只是用最簡(jiǎn)單的代碼來演示轿腺。在htdocs或者WWW文件夾（下面一段有介紹）里面新建一個(gè)index.html文件，里面發(fā)送一個(gè)ajax請(qǐng)求丛楚，下面貼出script部分代碼：

<script>

? ? ? ? var xhr = new XMLHttpRequest();//創(chuàng)建ajax對(duì)象

? ? ? ? xhr.open('GET','./server/connect.php');//配置請(qǐng)求信息

? ? ? ? xhr.send();//發(fā)送請(qǐng)求

? ? ? ? xhr.onload = function(){

? ? ? ? ? ? console.log(JSON.parse(xhr.responseText));//接收響應(yīng)

? ? ? ? }

</script>

3.去服務(wù)器的根目錄創(chuàng)建一個(gè)connect.php文件族壳，Mac的在/Applications/MAMP/htdocs這個(gè)路徑下，win的則可以點(diǎn)擊設(shè)置按鈕在里面找到WWW這個(gè)文件夾趣些，htdocs和WWW是默認(rèn)的根目錄仿荆，在不修改的前提下，PHP的文件必須放到這里面坏平，不然無法訪問拢操。PHP的代碼如下：

<?php

? ? //解決中文亂碼

? ? header('content-type:text/html;charset:utf-8;');

? ? //創(chuàng)建連接

? ? $link = mysqli_connect('localhost','root','root','php_demo');

? ? //查詢數(shù)據(jù)庫

? ? $res = mysqli_query($link,'select * from `user`');

? ? //解析結(jié)果

? ? $data = mysqli_fetch_all($res,MYSQLI_ASSOC);

? ? //打印結(jié)果

? ? print_r(json_encode($data));

? ? //關(guān)閉連接

? ? mysql_close($link);

?>

msyqli_connect()里面各個(gè)參數(shù)的含義，（1）第一個(gè)參數(shù)舶替，就是服務(wù)器地址令境，填'localhost'或者'127.0.0.1'。（2）第二個(gè)參數(shù)顾瞪，本地?cái)?shù)據(jù)庫的用戶名舔庶，默認(rèn)是root。（3）第三個(gè)參數(shù)陈醒，本地?cái)?shù)據(jù)庫的密碼惕橙，默認(rèn)也是root。（4）第四個(gè)參數(shù)钉跷，是你要操作的小倉庫弥鹦。如下圖：

4.在瀏覽器中輸入localhost，回車尘应，然后點(diǎn)擊里面的index.html文件惶凝，便會(huì)發(fā)送ajax請(qǐng)求了，這時(shí)可以按下F12案件犬钢，去到控制臺(tái)查看network苍鲜，就看到發(fā)送的connect.php的請(qǐng)求，并且是成功的玷犹，如下圖：

同時(shí)可以看到后端返回來的數(shù)據(jù)混滔，如下圖：

至此，就完成了一次前后端的交互了。當(dāng)然坯屿，這是最簡(jiǎn)單的一次演示油湖，目的就是看清楚前后端是如何交互的，例子當(dāng)然是簡(jiǎn)單明了的好领跛。

三.總結(jié)

? ? ? ?以上就是B/S (Browser/Server)模式下前后端交互的整個(gè)流程啦乏德，在操作的過程中，我以上提到要注意的地方都要特別留意吠昭，按照我寫的來做喊括，就基本上不會(huì)有問題了。好了矢棚，這次就先寫到這里郑什。