一、什麼是Ajax
1、Ajax的全稱是Asynchronous JavaScript and XML，即非同步JavaScript+XML。
2、它是一種技術方案，但並不是一種新技術。
3、它依賴的是現有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest物件。這個物件為向伺服器傳送請求和解析伺服器響應提供了流暢的介面，使得瀏覽器可以發出HTTP請求與接收HTTP響應，實現在頁面不重新整理的情況下和服務端進行資料互動。
【補充】Ajax和XMLHttpRequest 兩者的關係：我們使用XMLHttpRequest物件來發送一個Ajax請求。
二、怎麼實現在頁面不重新整理的情況下和服務端進行資料互動?

XMLHttpRequest物件

為了便於我們理解怎麼使用XMLHttpRequest物件實現在頁面不重新整理的情況下和服務端進行資料互動，我們先來看下下面的程式碼。

<script>
  var xhr = new XMLHttpRequest()  //建立一個物件
  xhr.open('GET','/helloAjax.json',false)  //設定ajax，.open()方法裡面的三個引數分別是：要傳送的請求型別、請求的url、表示是否非同步傳送請求的布林值
  xhr.send()  //發出請求
  var data = xhr.responseText  //當請求到來時，讀取請求中的資料
  console.log(data)  //輸出
</script>
 

這樣就是一個使用XMLHttpRequest物件傳送的Ajax請求了，現在我們來分析分析這段程式碼。
首先，XMLHttpRequest建構函式通過new的方式構造一個XHR物件，並將這個物件賦值給xhr（可取任意名字）
然後，呼叫XMLHttpRequest物件的方法open與send。

XMLHttpRequest物件的兩個重要方法

呼叫send方法之後請求被髮往伺服器，由於這次請求是同步的，JS程式碼會在xhr.send()這個步驟暫停掉，一直等到伺服器根據請求生成響應（Response），傳回給XHR物件，再繼續執行。
最後，在收到響應後相應資料會填充到XHR物件的屬性。有四個相關屬性會被填充：
1、responseText——從伺服器程序作為響應主體被返回的文字。
2、responseXML——從伺服器程序返回的DOM相容的文件資料物件。
3、status——響應的HTTP狀態。即從伺服器返回的數字程式碼，如404（未找到）和200（已就緒）。
4、statusText——HTTP狀態的說明。伴隨狀態碼的字串資訊。

但多數情況下，我們還是要傳送非同步請求，才能讓JavaScript繼續執行而不必等待響應。為了更好的理解ajax傳送非同步請求，我們來看以下程式碼

   <script>
        var xhr = new XMLHttpRequest()
        //請求響應過程的當前活動階段
        xhr.onreadystatechange = function(){
            console.log('readyState:',xhr.readyState)
        }
        xhr.open('GET','hello.json',true)
        xhr.send()
        //監聽請求狀態
        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：傳送。已經呼叫send()方法，但尚未接收到響應。
• 3：接收。已經接收到部分響應資料。
• 4：完成。已經接收到全部響應資料，而且已經可以在客戶端使用了。//onload表示readyState = 4
  【注意】
  1、只要readyState屬性的值由一個值變成另一個值，就會觸發一次readystatechange事件
  2、必須在呼叫open()方法之前指定readystatechange事件處理程式才能確保跨瀏覽器相容性。