學習前端到一個階段，必定會碰到一個不可避免的問題，即前端跟后端之間到底是怎么進行數(shù)據(jù)交互的?那么針對這個問題，我們來討論一下以下三種方法：
1、form表單
2、ajax
3、websocket（不討論）

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

當你點擊submit按鈕時，瀏覽器會默認把你在input里面輸入的數(shù)據(jù)，以post或get的方式提交到form表單中的action這個地址。相當于你提交表單時，就會向服務器發(fā)送一個請求，然后服務器會接受并處理提交過來的form表單，最后返回一個新的網頁。你可以結合以下代碼來理解這段話。

<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>

【補充】
1、get提交數(shù)據(jù)：請求參數(shù)（一般為input里的值）拼裝成url，相當于向服務器發(fā)url請求。
2、post提交數(shù)據(jù)：直接向服務器發(fā)請求，參數(shù)直接發(fā)給后臺。
但是，這種方法會導致幾個問題：
1、在提交時，頁面會發(fā)生跳轉或刷新，導致用戶體驗不好。
2、單項提交，把數(shù)據(jù)提交給后臺，但是不知道后臺會給出怎樣的響應，因為提交后頁面就發(fā)生跳轉了。比如：用戶登錄，那么就不知道到底是注冊成功了還是失敗了。
3、浪費寬帶。因為前后兩個頁面中的大部分HTML代碼往往是相同的。但由于每次應用的交互都需要向服務器發(fā)送請求，應用的響應時間就依賴于服務器的響應時間，這就導致了用戶界面的響應比本地應用慢的多。

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

一、什么是Ajax
1、Ajax的全稱是Asynchronous JavaScript and XML，即異步JavaScript+XML。
2、它是一種技術方案，但并不是一種新技術。
3、它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象。這個對象為向服務器發(fā)送請求和解析服務器響應提供了流暢的接口，使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應，實現(xiàn)在頁面不刷新的情況下和服務端進行數(shù)據(jù)交互。
【補充】Ajax和XMLHttpRequest 兩者的關系：我們使用XMLHttpRequest對象來發(fā)送一個Ajax請求。
二、怎么實現(xiàn)在頁面不刷新的情況下和服務端進行數(shù)據(jù)交互?
1、XMLHttpRequest對象
2、fecth（不討論）

XMLHttpRequest對象

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

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

這樣就是一個使用XMLHttpRequest對象發(fā)送的Ajax請求了，現(xiàn)在我們來分析分析這段代碼。
首先，XMLHttpRequest構造函數(shù)通過new的方式構造一個XHR對象，并將這個對象賦值給xhr（可取任意名字）
然后，調用XMLHttpRequest對象的方法open與send。

XMLHttpRequest對象的兩個重要方法

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

   <script>
        var xhr = new XMLHttpRequest()
        //請求響應過程的當前活動階段
        xhr.onreadystatechange = function(){
            console.log('readyState:',xhr.readyState)
        }
        xhr.open('GET','hello.json',true)
        xhr.send()
        //監(jiān)聽請求狀態(tài)
        xhr.onload = function(){             //onload相當于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對象的readyState屬性，表示請求響應過程的當前活動階段。該屬性可取的值如下：

• 0：未初始化。尚未調用open()方法。
• 1：啟動。已經調用open()方法，但尚未調用send()方法。
• 2：發(fā)送。已經調用send()方法，但尚未接收到響應。
• 3：接收。已經接收到部分響應數(shù)據(jù)。
• 4：完成。已經接收到全部響應數(shù)據(jù)，而且已經可以在客戶端使用了。//onload表示readyState = 4
  【注意】
  1、只要readyState屬性的值由一個值變成另一個值，就會觸發(fā)一次readystatechange事件
  2、必須在調用open()方法之前指定readystatechange事件處理程序才能確?？鐬g覽器兼容性。

GET請求/POST請求

• 與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
• 然而，在以下情況中，請使用 POST 請求：
  1、無法使用緩存文件（更新服務器上的文件或數(shù)據(jù)庫）
  2、向服務器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）
  3、發(fā)送包含未知字符的用戶輸入時，POST 比 GET 更穩(wěn)定也更可靠
• GET請求/POST請求使用方法

一個簡單的 GET 請求

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

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

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

一個簡單的 POST 請求

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

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

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

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