整體流程

一個(gè)用戶打開一個(gè)網(wǎng)頁，到看到一個(gè)網(wǎng)頁，經(jīng)歷的流程：
前端接收用戶請(qǐng)求---》前端請(qǐng)求服務(wù)器---》后端接收前端請(qǐng)求---》后端找到負(fù)責(zé)處理的程序---》后端處理程序找到要傳輸給用戶的前端頁面---》后端將該前端頁面留出位置---》后端到數(shù)據(jù)庫取數(shù)據(jù)---》后端把數(shù)據(jù)放在前端留出來的位置上---》結(jié)合成真正用戶看到的html文件---》傳輸給前端---》用戶看到界面。

后臺(tái)與數(shù)據(jù)庫交互 --也就是對(duì)數(shù)據(jù)的“增刪查改”等
前臺(tái)$http.get （參數(shù)1,function(){}）; （參考查找關(guān)鍵字：JavaScript，ajax）來與后臺(tái)交互，后臺(tái)接受
后端對(duì)前端簡(jiǎn)單地來說，就是能處理數(shù)據(jù)然后將數(shù)據(jù)返回給前端，供前端使用
前端與后臺(tái)的交互原理:
關(guān)注點(diǎn):接口地址、前端請(qǐng)求的參數(shù)、后端返回的參數(shù)。調(diào)一下接口，看一下返回的數(shù)據(jù)。
前端請(qǐng)求參數(shù)的形式
GET和POST兩種方式
GET從指定的服務(wù)器中獲取數(shù)據(jù)，POST提交數(shù)據(jù)給指定的服務(wù)器處理

傳統(tǒng)的向后端發(fā)送請(qǐng)求方法：

1.使用<form>標(biāo)簽的action屬性可以向后端發(fā)送請(qǐng)求，這種方法在特殊的場(chǎng)景下會(huì)用到。

<form method="發(fā)送請(qǐng)求所使用的方法" action="向后臺(tái)發(fā)送請(qǐng)求的url(訪問的地址)">
    <input type="hidden" name="訪問后臺(tái)API需要傳的參數(shù)" value="參數(shù)的值"/>
</form>

2.使用WebSocket進(jìn)行通信，這是一種比較新型的方法，大家可以自行搜索，也只是簡(jiǎn)單地調(diào)用API(使用提供的方法)。

3.fetch()方法，這也是一種很新的方法，但目前兼容的瀏覽器有限，所以也不是很常用。

4.ajax，這是一種很常用很方便的方法，關(guān)于ajax的介紹可以自行百度。說到ajax，就得分JavaScript的ajax和jQuery的ajax:

• 1）原生js的ajax是基于一個(gè)名為XMLHttpRequest的對(duì)象。有關(guān)ajax的都是基于這個(gè)對(duì)象。
• 2）jQuery是一種JavaScript的封裝庫，封裝了許多常用簡(jiǎn)便的方法，以此為例:

$.ajax({

    type: 'GET',                                                     // 請(qǐng)求的方式

    url: 'https://free-api.heweather.com/s6/weather/now?parameters', // 請(qǐng)求的地址（和風(fēng)天氣開放API）

    data: {                                                          // 請(qǐng)求所需要填的參數(shù)

        location: '中山,廣東',                                        // 需要查詢的城市或地區(qū)

        key: '9da*********************95bcb82f'                      // 用戶認(rèn)證key    },

    success: function(data) {                                        // 請(qǐng)求成功后，接收到data

        console.log(data); // 打印獲取到的數(shù)據(jù)

        // 對(duì)獲取到的數(shù)據(jù)稍作處理

        var basic = data.HeWeather6[0].basic;        var now = data.HeWeather6[0].now;

        console.log(basic);

        console.log(now);
    }
})

一、 服務(wù)器端主要完成的功能

• 接受前臺(tái)提交的數(shù)據(jù)
• 對(duì)前臺(tái)提交的數(shù)據(jù)進(jìn)行處理
• 服務(wù)器向前端返回?cái)?shù)據(jù)
• 存儲(chǔ)數(shù)據(jù)

二、數(shù)據(jù)傳送方式

GET - 從指定的服務(wù)器中獲取數(shù)據(jù) POST - 提交數(shù)據(jù)給指定的服務(wù)器處理
GET和POST兩種基本請(qǐng)求方法的區(qū)別

• get方式：
  使用get方法時(shí)，查詢字符串（鍵值對(duì)）被附加在URL地址后面一起發(fā)送到服務(wù)器：/test/demo_form.jsp?name1=value1&name2=value2

不安全；
get數(shù)據(jù)有限制；
get是通過url提交數(shù)據(jù)參數(shù)

• post方式：
  使用POST方法時(shí)，查詢字符串在POST信息中單獨(dú)存在，和HTTP請(qǐng)求一起發(fā)送到服務(wù)器：
  POST /test/demo_form.jsp HTTP/1.1
  Host: w3schools.com
  name1=value1&name2=value2

post數(shù)據(jù)理論上沒有限制
post數(shù)據(jù)是在http請(qǐng)求頭的主體部分發(fā)送的
相對(duì)安全

三、數(shù)據(jù)提交方式

1. 在鏈接地址上使用?提交 ， 只有g(shù)et一種傳送方式。

2. form表單方式

• 可以實(shí)現(xiàn)POST與GET兩種數(shù)據(jù)傳送方式
• 可以跨域提交數(shù)據(jù)
• 使用iframe方式實(shí)現(xiàn)局部刷新（iframe）不支持跨域

3. 通過script標(biāo)簽的src屬性

• 只能使用get方式
• 獨(dú)立的實(shí)現(xiàn)局部刷新
• 支持跨域
• JSON與JSONP

4 .XHR對(duì)象，XMLHttpRequest

• 創(chuàng)建對(duì)象： var xhr = new XMLHttpRequset();
• 方法：xhr.open(); 三個(gè)參數(shù)(GET/POST,url,同步|異步)
• 事件：onreadyStateChange: 當(dāng)XHR狀態(tài)發(fā)生變化的時(shí)候會(huì)執(zhí)行
  onload: 數(shù)據(jù)接收完畢互執(zhí)行
• 屬性：responseText : 服務(wù)器返回的數(shù)據(jù)
  readyState XHR的執(zhí)行狀態(tài)，有五種狀態(tài)：

0 - 初識(shí)狀態(tài)
1 - 創(chuàng)建鏈接
2 - 發(fā)送數(shù)據(jù)
3 - 服務(wù)器開始返回?cái)?shù)據(jù)
4 - 數(shù)據(jù)接受完畢

5. FormData 模擬表單提交

創(chuàng)建表單對(duì)象：var formData = new FromData();
添加數(shù)據(jù)方法： append

6. jquery Ajax封裝

常用的四種方法：

1. $.ajax()
2. $load()
3. $get()
4. post()