Ajax實現步驟和原理
阿新 • • 發佈:2018-12-12
1.獲取ajax非同步物件 IE4~IE12 : 使用new ActiveXObject(“microsoft.xmlhttp”); 非IE : 使用new XMLHttpRequest(); 2.ajax.open(method,url); method是提交方式 有 get和post兩種 url是提交路徑 3.ajax.send()
4.ajax.onreadystatechange 這是一個監聽函式
包括五種狀態碼:
0—ajax非同步物件建立完畢,但是還未傳送 1—ajax已經呼叫了open()方法,但是還未呼叫send()方法 2—已經呼叫send(),但是還未到達伺服器端 3—表示請求已經到達服務端,正在服務端的處理,但是還未響應返回 4—ajax已經完全接收了伺服器的響應資訊,但是狀態碼未必是正確的 狀態碼有: 200:正確 404/500:錯誤
ps: a.每個瀏覽器的0,1,2,3這四種狀態顯示的不一樣,但是4這個狀態碼每個瀏覽器都有,所以我們只需要使用4即可 b. 0.1.2.3.4是ajax中的響應碼,200/404/500是web中的狀態碼 5.ajax.readyState == 4
6.ajax.status == 200; 7.獲取值 ajax.requestText或者ajax.requestXML
例1get:
<script type="text/javascript">
//定位文字框,同時提供焦點失去事件
document.getElementById("usernameID").onblur = function(){
//獲取文字框中輸入的值
var username = this.value;
//如果使用者沒有填內容
if(username.length == 0){
//提示
document.getElementById("resID").innerHTML = "使用者名稱必填";
}else{
//對漢字進行UTF-8(U8)的編碼
username = encodeURI(username);
//NO1)
var ajax = createAJAX();
//NO2)
var method = "GET";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username=" + username;
ajax.open(method,url);
//NO3)
ajax.send(null);
//----------------------------------------等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
document.getElementById("resID").innerHTML = tip;
}
}
}
}
}
</script>
例2:post
<script type="text/javascript">
document.getElementById("usernameID").onblur = function(){
var username = this.value;//傑克
//NO1)
var ajax = createAJAX();
//NO2)
var method = "POST";
var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
ajax.open(method,url);
//設定AJAX請求頭為POST,他會將請求體中的漢字自動進行UTF-8的編碼
ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
//NO3)
var content = "username=" + username;
ajax.send(content);
//===========================================等待
//NO4)
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//NO5)
var tip = ajax.responseText;
//NO6)
//建立img標籤
var imgElement = document.createElement("img");
//設定img標籤的src/width/height的屬性值
imgElement.src = tip;
imgElement.style.width = "12px";
imgElement.style.height = "12px";
//定位span標籤
var spanElement = document.getElementById("resID");
//清空span標籤中的內容
spanElement.innerHTML = "";
//將img標籤加入到span標籤中
spanElement.appendChild(imgElement);
}
}
}
}
</script>