什么是 AJAX ？

Ajax 的全稱是 Asynchronous JavaScript And XML（異步 JavaScript 和 xml）
通俗理解：在網頁中利用 XMLHttpRequest 對象和服務器進行數據交互的方式，就是Ajax。
突出的特點：當前網頁沒有刷新、沒有跳轉。

通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）如果需要更新內容，必需重載整個網頁面。
既然ajax有這么多好處，我們要怎樣使用ajax呢？代碼說話

原聲AJAX

-所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。原聲請求分為POST和GET兩種方式，GET的參數是通過url？后以鍵值對的形式傳送給服務器的，POST是通過XMLHttpRequest中send方法傳遞過去的，與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

POST請求方式：

//首先創建一個XMLHttpRequest對象
          let xhr = new XMLHttpRequest();
          //open向服務器發送請求
           xhr.open('POST', url);
          //告知服務器post請求報文的格式
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
          //發送請求
            xhr.send(fd);
          //判斷相應是否成功，并將服務器響應數據賦值
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let res = JSON.parse(xhr.responseText);
                    if (res.status !== 200) return alert(res.message);
                    console.log(res);
                }
            }

GET請求方式：

//首先創建一個XMLHttpRequest對象
          let xhr = new XMLHttpRequest();
          //open向服務器發送請求
           xhr.open('GET', url?'key:value');
          //發送請求
            xhr.send();
          //判斷相應是否成功，并將服務器響應數據賦值
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    let res = JSON.parse(xhr.responseText);
                    if (res.status !== 200) return alert(res.message);
                    console.log(res);
                }
            }

jQuery中的AJAX

由于XMLHttpRequest對象用法比較復雜
jQuery中為我們封裝了XMLHttpRequest對象提供了一系列的Ajax相關的函數
jQuery中發起 Ajax 請求最常用的三個方法如下：

• $.get() get方式請求，用于獲取數據
• $.post() post方式請求，用于提交數據
• $.ajax() 比較綜合，既可以獲取數據，又可以提交數據

$.get()

$.get(url,[data],[callback])

image.png

$.post()

$.post(url,[data],[callback])

image.png

$.ajax()

$ajax的基本語法

image.png

Axios

Axios 是專注于網絡數據請求的庫。
相比于原生的 XMLHttpRequest 對象，axios 簡單易用。
相比于 jQuery，axios 更加輕量化，只專注于網絡數據請求。

axios.get

axios.get('url', { params: { /參數/ } }).then(callback)

// 請求的 URL 地址
var url = ''
// 請求的參數對象
var paramsObj = { name: 'zs', age: 20 }
// 調用 axios.get() 發起 GET 請求
axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服務器返回的數據
     var result = res.data
     console.log(res)
})

axios.post

axios.post('url', { /參數/ }).then(callback)

// 請求的 URL 地址
var url = ''
// 要提交到服務器的數據
var dataObj = { location: '北京', address: '順義' }
// 調用 axios.post() 發起 POST 請求
axios.post(url, dataObj).then(function(res) {
     // res.data 是服務器返回的數據
     var result = res.data
     console.log(result)
})

axios

axios 也提供了類似于 jQuery 中 $.ajax() 的函數，語法如下：

axios({
 method: '請求類型',
 url: '請求的URL地址',
 data: { /* POST數據 */ },
 params: { /* GET參數 */ }
}).then(callback)