1.1.1 Ajax的由來:
如下注冊界面
界面在注冊的時候,需要用戶輸入的信息有很多,假如我們將所有的數據都錄入后,在點擊會員注冊按鈕,然后將整個頁面數據進行提交,此時如果該用戶名已經被占用,那么我們就需要用戶重新進行輸入,這時候就會造成極差的用戶體驗,此時應該有一個正確的需求:
- 輸入完用戶名后,直接在用戶名后邊完成是否重復,是否可用的驗證
- 在驗證用戶名是否可用的同時,又不能影響我后續數據的輸入
此時,可以想象到,傳統的servlet已經無法解決我們的需求,需要一個新的技術來解決這個問題-------AJAX.
也就是說從此處,我們可以基本總結出一些
1.2.1 ajax的基本特點:
-
-
- 局部刷新,不用刷新整個頁面,所以數據量小,
- 異步請求
-
此時,再加上一點就是,自動發送請求,同樣是使用HTTP協議進行數據傳輸
1.3.1 企業為什么特別喜歡ajax？
數據量小，請求和響應速度快，用戶體驗好
錢。企業的通信費用，是按照流量計算，那么數據量越小，越省錢。
AJAX的運行原理圖:
1.3.1 快速入門
API文檔：參W3CSCHOOL
獲取XMLHttpRequest對象（ajax核心對象，ajax引擎）
代碼演示:
<script type="text/javascript">
//獲取ajax核心對象的方法
function getXHR() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
alert(getXHR());
</script>
向服務器發送請求——使用open方法和send方法
發送請求代碼測試：
//測試使用ajax核心對象，發送請求
function test1(){
var xhr = getXHR();
xhr.open("get","/day18/ajax?username=張三",true);
xhr.send();
}
test1();
獲取響應
//測試設置ajax等待服務器響應
function test3(){
//獲取核心對象
var xhr = getXHR();
//設置等待服務器響應
xhr.onreadystatechange=function(){
//4: 請求已完成，且響應已就緒,200: "OK"
if (xhr.readyState==4 && xhr.status==200){
var data=xhr.responseText;
alert(data);
}
}
//發送請求
xhr.open("get","/day18/ajax?username=張三",true);
xhr.send();
}
test3();