目錄
1.AJAX是什么？
2.異步交互和同步交互
3.AJAX常見應用情景和優缺點
4.AJAX的優缺點
5.AJAX發送異步請求（四步操作）
6.經典案例
1.AJAX是什么？
AJAX即“Asynchronous JavaScript and XML”（異步的JavaScript與XML技術），指的是一套綜合了多項技術的瀏覽器端網頁開發技術。
2.異步交互和同步交互
? ? 同步：
?? ?（1）發一個請求，就要等待服務器的響應結束，然后才能發第二個請求！中間這段時間就是一個字“卡”
?? ?（2）刷新的是這個頁面
? ? 異步：
?? ?（1）發一個請求后，無需等待服務器的響應，然后就可以發第二個請求！
?? ?（2）可以使用js接口服務器的響應，然后使用js來局部刷新
? ? 【示例】使用JS點擊按鈕觸發事件，設置內容改變標簽內容（局部刷新）
3.AJAX常見應用情景和優缺點
?3.1 應用情景
?? ?（1）當我們在百度中輸入一個"Java"后，會馬上出現一個下拉列表！列表中顯示的是包含"Java"字的10個關鍵字。
?? ?其實這里就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含"Java"的前10個關鍵字，然后服務器會把查詢到的結果響應給瀏覽器，最后瀏覽器把這10個關鍵字顯示在下拉列表中。
?? ?整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已。
?? ?當請求發出后，瀏覽器還可以進行其它操作，無需等待服務器的響應。
?? ?（2）當輸入用戶名后，把光標移動到其它表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名為張三的用戶是否存在，最終服務器返回true表示名為張三的用戶已經存在了，瀏覽器在得到結果后顯示"用戶名已被注冊！"。
?? ?
?? ?整個過程中頁面沒有刷新，只是局部刷新了
?? ?在請求發出后，瀏覽器不用等待服務器響應結果就可以進行其它操作。
?? ?=========================================
?? ?百度的搜索框
?? ?用戶注冊時（校驗用戶是否存在）
4.AJAX的優缺點
? ? 優點：異步交互：增強了用戶的體驗
? ? 性能：因為服務器無需再響應整個頁面，只需要響應部分內容，所以服務器的壓力減輕了！
? ? 缺點：
?? ?ajax不應用在所有場景
?? ?ajax無端的增多了對服務器的訪問次數，給服務器帶來了壓力。
5.AJAX發送異步請求（四步操作）
? ? XMLHttpRequest 對象用于在后臺與服務器交換數據。
（1）第一步（得到XMLHttpRequest）
?? ?ajax其實只需要學習一個對象：XMLHttpRequest，如果掌握了它，就掌握了ajax。
?? ?得到XMLHttpRequest
?? ? ? ?--》大多數瀏覽器都支持: var xmlHttp = new XMLHttpRequest();
?? ? ? ?--》IE6.0：var xmlHttp = new ActiveXObject("Msml2.XMLHTTP");
?? ? ? ?--》IE5.5：var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
?? ?**--封裝得到XMLHttpRequest的函數
?? ?function createXMLHttpRequest() {
?? ??? ?try {
?? ??? ??? ?return new XMLHttpRequest(); //Firefox, Opera 8.0+, Safari
?? ??? ?} catch (e) {
?? ??? ??? ?try {
?? ??? ??? ??? ?return new ActiveXObject("Msml2.XMLHTTP"); // Internet Explorer 6.0
?? ??? ??? ?} catch (e) {
?? ??? ??? ??? ?try {
?? ??? ??? ??? ??? ?return new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer 5.5
?? ??? ??? ??? ?} catch (e) {
?? ??? ??? ??? ??? ?alert("哥們兒,你用的是什么瀏覽器啊");
?? ??? ??? ??? ??? ?throw e;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ?};
（2）第二步（打開與服務器的連接）
?? ?XMLHttp.open()：用來打開與服務器的連接，它需要三個參數
?? ?---》請求方式：可以是GET或POST請求
?? ?---》請求的URL：指定服務器端資源，例如：/demo/LoginServlet
?? ?---》請求是否為異步：如果為true表示發送異步請求，否則同步請求
?? ?=====》xmlHttp.open("GET","/demo/LoginServlet",true);----GET請求
?? ?
?? ?如果是POST請求如下(如果發送請求時需要帶有參數，一般都用POST請求)
?? ?=====》open：xmlHttp.open("post",...);
?? ?=====》添加一步：設置Content-Type請求頭：
?? ??? ?----》xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
?? ??? ?---->send: xmlHttp.send("username=zhangsan&password=123");//發送請求時指定的請求體
? ? （3）第三步（發送請求）
?? ?---》xmlHttp.send(null)：如果不給參數可能會造成部分瀏覽器無法發送
?? ?*****參數：就是請求的內容！如果是GET請求，必須給出null。
? ? （4）第四步（）
?? ?---》在xmlHttp對象的一個事件上注冊監聽器：onreadystatechange
?? ?---》xmlHttp對象5個狀態
?? ?0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法
?? ?1：請求已開始，open()方法已調用，但還沒調用send()方法
?? ?2：請求發送完成狀態，send()方法已調用
?? ?3：開始讀取服務器響應
?? ?4：讀取服務器響應結束（通常我們只關心這個狀態）
?? ?----》得到xmlHttp對象的狀態
?? ?---------》var state = xmlHttp.readyState;//可能是0 1 2 3 4
?? ?----》得到服務器響應的狀態碼
?? ?---------》var status = xmlHttp.status;//200 ? ?404 ? ?500
?? ?
?? ?----》得到服務器響應的內容
?? ?---------》var content ?= xmlHttp.responseText;//得到服務器的響應的文本格式的內容
?? ?---------》var content = ?xmlHttp.responseXML;//得到服務器的響應的xml響應的內容，document對象
?? ?xmlHttp.onreadystatechange = function(){//xmlHttp的5種狀態都會調用本方法
?? ??? ?if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//雙重判斷:判斷是否為4狀態，而且還要判斷是否為200
?? ??? ??? ?//獲取服務器的響應內容
?? ??? ??? ?var content ?= xmlHttp.responseText;
?? ??? ?}
?? ?};
6.經典案例
? ? （1）點擊按鈕，使用ajax響應內容在客戶端某標簽中顯示響應的內容
?? ?（2）發送POST請求
?? ?（3）用戶名是否已被注冊
)
