Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)的藝術(shù)，在不重新加載整個(gè)頁(yè)面的情況下。AJAX可以更新部分頁(yè)面，而不需要整個(gè)刷新，從而提升用戶體驗(yàn)。
XMLHttpRequest 對(duì)象
是Ajax的核心，所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
創(chuàng)建方法：
var xhr = new XMLHttpRequest();
常用方法：
open("GET/POST","URL地址",true/false) 打開(kāi)連接
true和false代表異步或同步。
同步表示需要等待服務(wù)器響應(yīng)后才能執(zhí)行后面的代碼
異步表示不需要等待服務(wù)器響應(yīng)，響應(yīng)后會(huì)進(jìn)行通知
推薦使用異步方式。
send(String) 發(fā)送請(qǐng)求
如果是POST方法需要填寫請(qǐng)求參數(shù)，如："name=zhang&age=20"
如果是Get方法參數(shù)可以不寫
onreadystatechange事件回調(diào)，監(jiān)聽(tīng)連接狀態(tài)改變
用法：
onreadystatechange = function(){...};
常用屬性：
readyState 連接狀態(tài)
ajax共有5種狀態(tài)：
狀態(tài) | 名稱 | 描述 |
0 | Uninitialized | 初始化狀態(tài)。XMLHttpRequest 對(duì)象已創(chuàng)建或已被 abort() 方法重置。 |
1 | Open | open() 方法已調(diào)用，但是 send() 方法未調(diào)用。請(qǐng)求還沒(méi)有被發(fā)送。 |
2 | Sent | Send() 方法已調(diào)用，HTTP 請(qǐng)求已發(fā)送到 Web 服務(wù)器。未接收到響應(yīng)。 |
3 | Receiving | 所有響應(yīng)頭部都已經(jīng)接收到。響應(yīng)體開(kāi)始接收但未完成。 |
4 | Loaded | HTTP 響應(yīng)已經(jīng)完全接收。 |
responseText 服務(wù)器響應(yīng)文本內(nèi)容
status 響應(yīng)碼、如：200、404、500等
案例：使用ajax和Servlet進(jìn)行交互
JQuery中的Ajax函數(shù)：
除了原生的Ajax代碼外，JQuery框架也封裝了幾個(gè)ajax函數(shù)，讓我們能更容易地與服務(wù)器交互。
$.ajax
常用參數(shù)：
type 請(qǐng)求方法GET、POST
url 服務(wù)器地址(必須)
data 請(qǐng)求參數(shù)
async 是否異步true，false
success 正常情況調(diào)用函數(shù)
error 錯(cuò)誤情況調(diào)用函數(shù)
示例：
$.ajax({url:check.do,data:{tel:‘13001112222’},async:true,
success:function(data){
alert(服務(wù)器返回內(nèi)容+data);
},
error:function(){
alert(服務(wù)器操作出現(xiàn)錯(cuò)誤);
}
});
$.post函數(shù)
以post方式和服務(wù)器交互
$.post("URL地址",{參數(shù)名:值},function(data){
回調(diào)代碼
});
案例：
//使用jquery的post方法
function post(){
$.post("ajax.do",{name:李四},function(data){
$("#div1").text(data);
});
}
$.get 函數(shù)
以get方式和服務(wù)器交互
$.get("URL地址?參數(shù)",function(data){
回調(diào)代碼
});
案例：
//使用jquery的get方法
function get(){
$.get("ajax.do?name=趙六",function(data){
$("#div1").text(data);
});
}
load函數(shù)
使用load方法，將ajax加載的內(nèi)容直接插入到標(biāo)簽中
案例：
$(function(){
$("#div1").click(function(){
//post();
//get();
$("#div1").load("ajax.do?name=馬九");
});
});
應(yīng)用場(chǎng)景：
用戶注冊(cè)時(shí)檢查用戶名是否存在
需求：用戶注冊(cè)時(shí)，填寫手機(jī)號(hào)后，當(dāng)輸入框失去焦點(diǎn)時(shí)，對(duì)手機(jī)號(hào)進(jìn)行服務(wù)器驗(yàn)證后在手機(jī)號(hào)輸入框后面顯示”用戶名已存在"或"用戶名可以使用";
思路：
1、在input的onblur事件中進(jìn)行驗(yàn)證
2、通過(guò)ajax發(fā)送手機(jī)號(hào)給后臺(tái)Servlet
3、Servlet對(duì)手機(jī)號(hào)進(jìn)行數(shù)據(jù)庫(kù)查詢，返回是否存在的文字給ajax
4、ajax收到返回文字后，顯示到標(biāo)簽上
總結(jié)：Ajax能夠讓瀏覽器和服務(wù)器進(jìn)行交互，并且在不刷新頁(yè)面的情況下對(duì)網(wǎng)頁(yè)內(nèi)容進(jìn)行更新，大大提高了用戶體驗(yàn)，通過(guò)Ajax技術(shù)能夠構(gòu)建交互性極強(qiáng)的Web應(yīng)用程序。
千鋒??成都Java培訓(xùn)??課程的授課模式采用全程面授，講師成本雖高，但是效果卻是顯著的，和學(xué)員面對(duì)面溝通，了解到學(xué)員在學(xué)習(xí)過(guò)程中遇到的問(wèn)題，動(dòng)態(tài)地調(diào)整授課方式。及時(shí)有效地幫助學(xué)員解決疑難問(wèn)題，提高學(xué)員的學(xué)習(xí)積極性。千鋒java視頻教程為零基礎(chǔ)的學(xué)員提供高品質(zhì)的學(xué)習(xí)資料，讓每一個(gè)熱愛(ài)編程的學(xué)員可以掌握扎實(shí)的基礎(chǔ)。
