學(xué)習(xí)前端到一個(gè)階段镊讼，必定會(huì)碰到一個(gè)不可避免的問(wèn)題排宰，即前端跟后端之間到底是怎么進(jìn)行數(shù)據(jù)交互的?那么針對(duì)這個(gè)問(wèn)題，我們來(lái)討論一下以下三種方法：
1宴树、form表單
2策菜、ajax
3、websocket（不討論）

首先酒贬，最原始的，通過(guò)form表單以post/get方式提交數(shù)據(jù)翠霍。

當(dāng)你點(diǎn)擊submit按鈕時(shí)锭吨，瀏覽器會(huì)默認(rèn)把你在input里面輸入的數(shù)據(jù)，以post或get的方式提交到form表單中的action這個(gè)地址寒匙。相當(dāng)于你提交表單時(shí)零如，就會(huì)向服務(wù)器發(fā)送一個(gè)請(qǐng)求，然后服務(wù)器會(huì)接受并處理提交過(guò)來(lái)的form表單锄弱，最后返回一個(gè)新的網(wǎng)頁(yè)考蕾。你可以結(jié)合以下代碼來(lái)理解這段話。

<form action="/form.html" method="post/get">
    <input type="text" name="username" placeholder="username">
    <input type="password" name="password" placeholder="password">
    <input type="submit">
  </form>

【補(bǔ)充】
1会宪、get提交數(shù)據(jù)：請(qǐng)求參數(shù)（一般為input里的值）拼裝成url肖卧，相當(dāng)于向服務(wù)器發(fā)url請(qǐng)求。
2掸鹅、post提交數(shù)據(jù)：直接向服務(wù)器發(fā)請(qǐng)求塞帐，參數(shù)直接發(fā)給后臺(tái)。
但是巍沙，這種方法會(huì)導(dǎo)致幾個(gè)問(wèn)題：
1葵姥、在提交時(shí)，頁(yè)面會(huì)發(fā)生跳轉(zhuǎn)或刷新句携，導(dǎo)致用戶體驗(yàn)不好榔幸。
2、單項(xiàng)提交，把數(shù)據(jù)提交給后臺(tái)削咆，但是不知道后臺(tái)會(huì)給出怎樣的響應(yīng)牍疏，因?yàn)樘峤缓箜?yè)面就發(fā)生跳轉(zhuǎn)了。比如：用戶登錄态辛，那么就不知道到底是注冊(cè)成功了還是失敗了麸澜。
3、浪費(fèi)寬帶奏黑。因?yàn)榍昂髢蓚€(gè)頁(yè)面中的大部分HTML代碼往往是相同的炊邦。但由于每次應(yīng)用的交互都需要向服務(wù)器發(fā)送請(qǐng)求，應(yīng)用的響應(yīng)時(shí)間就依賴于服務(wù)器的響應(yīng)時(shí)間熟史，這就導(dǎo)致了用戶界面的響應(yīng)比本地應(yīng)用慢的多馁害。

為了解決上述問(wèn)題，2005年出現(xiàn)了Ajax蹂匹。

一碘菜、什么是Ajax
1、Ajax的全稱是Asynchronous JavaScript and XML限寞，即異步JavaScript+XML忍啸。
2、它是一種技術(shù)方案履植，但并不是一種新技術(shù)计雌。
3、它依賴的是現(xiàn)有的CSS/HTML/Javascript玫霎，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對(duì)象凿滤。這個(gè)對(duì)象為向服務(wù)器發(fā)送請(qǐng)求和解析服務(wù)器響應(yīng)提供了流暢的接口，使得瀏覽器可以發(fā)出HTTP請(qǐng)求與接收HTTP響應(yīng)庶近，實(shí)現(xiàn)在頁(yè)面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互翁脆。
【補(bǔ)充】Ajax和XMLHttpRequest 兩者的關(guān)系：我們使用XMLHttpRequest對(duì)象來(lái)發(fā)送一個(gè)Ajax請(qǐng)求。
二鼻种、怎么實(shí)現(xiàn)在頁(yè)面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互?
1反番、XMLHttpRequest對(duì)象
2、fecth（不討論）

XMLHttpRequest對(duì)象

為了便于我們理解怎么使用XMLHttpRequest對(duì)象實(shí)現(xiàn)在頁(yè)面不刷新的情況下和服務(wù)端進(jìn)行數(shù)據(jù)交互普舆，我們先來(lái)看下下面的代碼恬口。

<script>
  var xhr = new XMLHttpRequest()  //創(chuàng)建一個(gè)對(duì)象
  xhr.open('GET','/helloAjax.json',false)  //設(shè)置ajax，.open()方法里面的三個(gè)參數(shù)分別是：要發(fā)送的請(qǐng)求類型沼侣、請(qǐng)求的url祖能、表示是否異步發(fā)送請(qǐng)求的布爾值
  xhr.send()  //發(fā)出請(qǐng)求
  var data = xhr.responseText  //當(dāng)請(qǐng)求到來(lái)時(shí)，讀取請(qǐng)求中的數(shù)據(jù)
  console.log(data)  //輸出
</script>

這樣就是一個(gè)使用XMLHttpRequest對(duì)象發(fā)送的Ajax請(qǐng)求了蛾洛，現(xiàn)在我們來(lái)分析分析這段代碼养铸。
首先雁芙，XMLHttpRequest構(gòu)造函數(shù)通過(guò)new的方式構(gòu)造一個(gè)XHR對(duì)象，并將這個(gè)對(duì)象賦值給xhr（可取任意名字）
然后钞螟，調(diào)用XMLHttpRequest對(duì)象的方法open與send兔甘。

XMLHttpRequest對(duì)象的兩個(gè)重要方法

但多數(shù)情況下季惯，我們還是要發(fā)送異步請(qǐng)求，才能讓JavaScript繼續(xù)執(zhí)行而不必等待響應(yīng)臀突。為了更好的理解ajax發(fā)送異步請(qǐng)求勉抓，我們來(lái)看以下代碼

   <script>
        var xhr = new XMLHttpRequest()
        //請(qǐng)求響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段
        xhr.onreadystatechange = function(){
            console.log('readyState:',xhr.readyState)
        }
        xhr.open('GET','hello.json',true)
        xhr.send()
        //監(jiān)聽(tīng)請(qǐng)求狀態(tài)
        xhr.onload = function(){             //onload相當(dāng)于readyState=4
            console.log(xhr.status)
            if((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304){
                console.log(xhr.responseText)
            }else{
                console.log(error)
            }
        }
    </script>

上述代碼中，XHR對(duì)象的readyState屬性候学，表示請(qǐng)求響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段藕筋。該屬性可取的值如下：

• 0：未初始化。尚未調(diào)用open()方法梳码。
• 1：?jiǎn)?dòng)隐圾。已經(jīng)調(diào)用open()方法，但尚未調(diào)用send()方法掰茶。
• 2：發(fā)送暇藏。已經(jīng)調(diào)用send()方法，但尚未接收到響應(yīng)濒蒋。
• 3：接收盐碱。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)把兔。
• 4：完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)瓮顽，而且已經(jīng)可以在客戶端使用了县好。//onload表示readyState = 4
  【注意】
  1、只要readyState屬性的值由一個(gè)值變成另一個(gè)值暖混，就會(huì)觸發(fā)一次readystatechange事件
  2缕贡、必須在調(diào)用open()方法之前指定readystatechange事件處理程序才能確保跨瀏覽器兼容性拣播。

GET請(qǐng)求/POST請(qǐng)求

• 與 POST 相比晾咪，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用诫尽。
• 然而禀酱，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
  1牧嫉、無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）
  2剂跟、向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）
  3、發(fā)送包含未知字符的用戶輸入時(shí)酣藻，POST 比 GET 更穩(wěn)定也更可靠
• GET請(qǐng)求/POST請(qǐng)求使用方法

一個(gè)簡(jiǎn)單的 GET 請(qǐng)求

xhr.open('GET','lazyLoad.html',true)
xhr.send()

如果希望通過(guò) GET 方法發(fā)送信息曹洽，可以向 URL 末尾添加字符串參數(shù)

xhr.open('GET','/login?username=Iris&password=12345',true)
xhr.send()

一個(gè)簡(jiǎn)單的 POST 請(qǐng)求

xhr.open('POST','/login',true)
xhr.send('username=Iris&password=12345')

如果向send()里面?zhèn)鬟f一個(gè)對(duì)象，可以用函數(shù)將該對(duì)象拼接成字符串形式

        xhr.open('POST','/login',true)
        xhr.send(makeUrl({             //step3辽剧、這個(gè)時(shí)候send()里面就不用發(fā)字符串了送淆，直接發(fā)傳遞的對(duì)象就好了
            username:'Iris',
            address:'ChangSha',
            age:21
        }))

        //step2、用戶傳遞的是一個(gè)對(duì)象時(shí)   (實(shí)參是用戶傳遞的這個(gè)對(duì)象)
        makeUrl({
            username:'Iris',
            address:'ChangSha',
            age:21
        })
        //step1怕轿、將拼接的過(guò)程寫成一個(gè)函數(shù)偷崩，向函數(shù)makeUrl()里面?zhèn)鬟f一個(gè)形參
        function makeUrl(obj){
            var arr = []           //遍歷這個(gè)對(duì)象
            for(var key in obj){
                arr.push(key + '=' + obj[key])
            }
            return arr.join('&')
        }