傳統開發的缺點，是對於瀏覽器的頁面，全部都是全域性重新整理的體驗。如果我們只是想取得或是更新頁面中的部分資訊那麼就必須要應用到區域性重新整理的技術。
區域性重新整理也是有效提升使用者體驗的一種非常重要的方式。
Ajax技術是基於js語言的擴充套件，能夠通過將請求傳送給後臺，並從後臺取得相關資料，然後將資料在頁面做區域性重新整理的重要技術。
本教程會通過對ajax的傳統使用方式，結合json操作的方式，結合跨域等高階技術的方式，對ajax做一個全面的講解。
線上觀看：https://www.bilibili.com/video/BV15k4y167XM
資料下載：http://www.bjpowernode.com/javavideo/118.html
什麼是Ajax？
AJAX = Asynchronous JavaScript and XML（非同步的 JavaScript 和XML）。
AJAX 是一種在無需重新載入整個網頁的情況下，能夠更新部分頁面內容的新方法
AJAX 不是新的程式語言，而是使用現有技術混合使用的一種新方法。ajax 中使用的技術有JavaScript, html , dom , xml ,css 等。主要是JavaScript , XML.
JavaScript: 使用指令碼物件XMLHttpRequest 傳送請求， 接收響應資料XML: 傳送和接收的資料格式，現在使用json
AJAX 不單需要前端的技術，同時需要後端（伺服器）的配合。伺服器需要提供資料，資料是AJAX 請求的響應結果。
_ueditor_page_break_tag_
全域性重新整理和區域性重新整理
B/S 結構專案中， 瀏覽器（Browse）負責把使用者的請求和引數通過網路傳送給伺服器（Server）,服務端使用 Servlet（多種服務端技術的一種）接收請求，並將處理結果返回給瀏覽器。
瀏覽器在html，jsp 上呈現資料，混合使用css， js 幫助美化頁面，或響應事件。
全域性重新整理
登入請求處理：
index.jsp 發起登入請求--------LoginServlet result.jsp
發起請求request 階段：
瀏覽器現在記憶體中是index 頁面的內容和資料 ：
伺服器端應答結果階段：
sevlet 返回後把資料全部覆蓋掉原來index 頁面內容， result.jsp 覆蓋了全部的瀏覽器記憶體資料。 整個瀏覽器資料全部被重新整理。重新在瀏覽器視窗顯示資料，樣式，標籤等
全域性重新整理原理：
1) 必須由瀏覽器親自向服務端傳送請求協議包。
2) 這個行為導致服務端直接將【響應包】傳送到瀏覽器記憶體中
3) 這個行為導致瀏覽器記憶體中原有內容被覆蓋掉
4) 這個行為導致瀏覽器在展示資料時候，只有響應資料可以展示
區域性重新整理
瀏覽器在展示資料時，此時在視窗既可以看到本次的響應資料， 同時又可以看到瀏覽器記憶體中原有資料
區域性重新整理原理：
1) 不能由瀏覽器傳送請求給服務端
2) 瀏覽器委託瀏覽器記憶體中一個指令碼物件代替瀏覽器傳送請求.
3) 這個行為導致導致服務端直接將【響應包】傳送指令碼物件記憶體中
4) 這個行為導致指令碼物件內容被覆蓋掉，但是此時瀏覽器記憶體中絕大部分內容沒有收到任何影響
5) 這個行為導致瀏覽器在展示資料時候,同時展示原有資料和響應資料
AJAX 實現區域性重新整理的一種技術。
非同步請求物件:
在區域性重新整理，需要建立一個物件，代替瀏覽器發起請求的行為，這個物件存在記憶體中。
代替瀏覽器發起請求並接收響應資料。這個物件叫做非同步請求物件。
全域性重新整理是同步行為， 區域性重新整理是非同步行為[瀏覽器資料沒有全部更新] 這個非同步物件用於在後臺與伺服器交換資料。XMLHttpRequest 就是我們說的非同步物件。
XMLHttpRequest 物件能夠：
在不重新載入頁面的情況下更新網頁
在頁面已載入後向伺服器請求資料
在頁面已載入後從伺服器接收資料
所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 物件。通過一行簡單的 JavaScript 程式碼，我們就可以建立 XMLHttpRequest 物件
建立 XMLHttpRequest 物件的語法（xhr）： var xmlhttp=new XMLHttpRequest();
AJAX 中的核心物件就是XMLHttpRequest
_ueditor_page_break_tag_
AJAX 非同步實現步驟
XMLHttpRequest 物件介紹
（1） 建立物件方式
var xmlHttp = new XMLHttpRequest();
（2） onreadstatechange 事件
當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。每當readyState 改變時，就會觸發 onreadystatechange 事件。此事件可以指定一個處理函式function。
通過判斷XMLHttpReqeust 物件的狀態，獲取服務端返回的資料。
語法：
xmlHttp.onreadystatechange= function() {
if( xmlHttp.readyState == 4 && xmlHttp.status == 200){
處理伺服器返回資料
}
}
下面是 XMLHttpRequest 物件的三個重要的屬性：
屬性說明：
onreadystatechange 屬性：一個 js 函式名 或 直接定義函式，每當readyState 屬性改變時，就會呼叫該函式
readyState 屬性：
存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
• 0: 請求未初始化，建立非同步請求物件 var xmlHttp = new XMLHttpRequest()
• 1: 初始化非同步請求物件， xmlHttp.open(請求方式，請求地址，true)
• 2: 非同步物件傳送請求， xmlHttp.send()
• 3: 非同步物件接收應答資料 從服務端返回資料。XMLHttpRequest 內部處理。
• 4: 非同步請求物件已經將資料解析完畢。 此時才可以讀取資料。
status 屬性：
200: "OK"
404: 未找到頁面
（1） 初始化請求引數：
方法：
open(method,url,async) ： 初始化非同步請求物件
引數說明：
method：請求的型別；GET 或 POST
url：伺服器的servlet 地址
async：true（非同步）或 false（同步）
例如 :
xmlHttp.open(“get”,”http:192.168.1.20:8080/myweb/query”,true)
（2） 傳送請求
xmlHttp.send()
（3） 接收伺服器響應的資料
如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的responseText 或 responseXML 屬 性 。
responseText：獲得字串形式的響應資料responseXML：獲得 XML 形式的響應資料
_ueditor_page_break_tag_
AJAX 例項
全域性重新整理計算 bmi
需求：計算某個使用者的BMI。 使用者在jsp 輸入自己的身高，體重；servlet 中計算BMI，並顯示 BMI 的計算結果和建議。
BMI 指數（即身體質量指數，英文為BodyMassIndex，簡稱 BMI），是用體重公斤數除以身高米數平方得出的數字，是目前國際上常用的衡量人體胖瘦程度以及是否健康的一個標準
成人的 BMI 數值：
1）過輕：低於 18.5
2）正常：18.5-23.9
3）過重：24-27
4）肥胖：28-32
5）非常肥胖,高於 32
_ueditor_page_break_tag_
開發步驟：
1. 在idea 中建立新的工程，名稱：ch01-bmi-ajax
2. 配置tomcat 伺服器，如果已經配置，省略此步驟。
選擇Local
配置tomcat 伺服器的位置
Module 新增tomcat 支援
出現視窗
選擇 2 Library
確定使用tomcat
3. 建立 jsp，定義form，有引數name， weight， height
4. 建立 Servlet， 名稱 BMIServlet
5. 註冊 servlet
6. 建立 result.jsp
web 目錄下建立 result.jsp 檔案
7.配置執行程式，輸入引數。顯示bmi
_ueditor_page_break_tag_
使用HttpServletResponse 響應輸出
1. 新建jsp： indexPrint.jsp
2. 新建Servlet, 名稱 BMIServeltPrint
使用 ajax 請求，計算 bmi
1. 新建ajax.jsp
2. 在ajax.jsp 的head 部分指定 doAjax()函式
3. 複製BMIServletPrint，重新命名 BMIServletAjax 程式碼不需要改動
4. 註冊 Servlet
5. 在瀏覽器訪問ajax.jsp
在BMIServltAjax 的第一行設定斷點，然後在 jsp 中點選按鈕，發起請求，觀察瀏覽器中的彈出的內容變化
6. 修改ajax.jsp 中的doAjax()函式
7.訪問ajax.jsp 請求
在jsp 中點選按鈕，發起請求，觀察瀏覽器中的彈出的內容變化
8.獲取dom 物件 value 值
9. 在瀏覽器測試傳送ajax 請求
10.修改 doAjax 函式
