[TOC] # Ajax ### 1.步驟 <br> >[warning]1、創建 AJAX 對象； `let ajax= new XMLHttpRequest()` 2、設置請求路徑，請求方式(get ,post)等； ` ajax.open('GET', '/get_data');` 3、綁定監聽狀態改變的處理函數，在處理函數可獲取響應數據； ` ajax.onreadystatechange = ()=>{ // 獲取響應回來的數據 } };` 4、發送請求。 `ajax.send()` ***** **創建Ajax對象會有兼容性的問題** ``` function createAjax() { var ajax; try { // 非 IE ajax = new XMLHttpRequest(); } catch (e) { // IE ajax = new ActiveXObject('Microsoft.XMLHTTP'); } return ajax; } ``` <br> ### 2.特點 **異步請求，局部刷新**。 >同步是指：發送方發出數據后，等接收方發回響應以后才發下一個數據包的通訊方式。 > >異步是指：發送方發出數據后，不等接收方發回響應，接著發送下個數據包的通訊方式。 > >局部刷新指刷新頁面部分內容。 **注意** **注意事項**： >>ajax 這門技術，必須要在網絡協議環境下才可以使用。不能把網頁直接拖入到瀏覽器執行，必須在 web 服務器模式下訪問。 >> >>總結：ajax對我們來講就是**書寫一段js代碼來向服務器發送請求(異步)**。 ### 3.ajax對象的屬性 AJAX 對象有 4 個屬性： ***** * readyState 總共有 5 個狀態值，分別為 0 ~ 4，每個值代表了不同的含義：onreadystatechange * 0：初始化，AJAX 對象還沒有完成初始化 * 1：載入，AJAX 對象開始發送請求 * 2：載入完成，AJAX 對象的請求發送完成 * 3：解析，AJAX 對象開始讀取服務器的響應 * 4：完成，AJAX 對象讀取服務器響應結束 * status 表示響應的 HTTP 狀態碼，常見狀態碼如下： * 200：成功 * 302：重定向 * 404：找不到資源 * 500：服務端錯誤 * responseText 獲得字符串形式的響應數據。 * responseXML 獲得 XML 形式的響應數據。 ***** <br> **總結** >[danger]在狀態改變的處理函數一般針對** readyState == 4 且 status == 200** 的情況才處理，再根據后臺返回的數據類型決定從 responseText 或者 responseXML 獲取服務器響應回去來的數據。 <br> ### 4.避免緩存的方法 **避免緩存問題的寫法**： AJAX 能提高頁面載入的速度主要的原因是通過 AJAX 減少了重復數據的載入，也就是說在載入數據的同時將數據緩存到內存中，一旦數據被加載其中，只要我們沒有刷新頁面，這些數據就會一直被緩存在內存中，當我們提交的 URL 與歷史的 URL 一致時，就不需要提交給服務器，也就是不需要從服務器上面去獲取數據，雖然這樣降低了服務器的負載提高了用戶的體驗，但是我們不能獲取最新的數據。為了保證我們讀取的信息都是最新的，我們就需要禁止他的緩存功能。解決方式有以下幾種： * 在 URL 后面加上一個隨機數：Math.random()。 * 在 URL 后面加上時間搓：new Date().getTime()。 * 在使用 AJAX 發送請求前加上 ajax.setRequestHeader('Cache-Control', 'no-cache')。