異步的概念:當ajax對象(XMLHttpRequest)向服務器發送請求的時候,瀏覽器不會銷貨當前頁面,用戶仍然可以對向前頁面進行操作。
以用戶輸入用戶名註冊判斷該用戶是否存在爲例
當用輸入完用戶名進入下一個輸入框後,當前輸入框失去了一個焦點,從而產生了一個事件,該事件的事務處理函數就調用了一個ajax對象,ajax對象就會向服務器發送一個請求,服務器中會相應這個請求發回一個簡單的文本或者是一個json而不是整個頁面給這個ajax對象,ajax對象事先綁定了一個處理函數,該處理函數從ajax對象中獲得服務器返回的數據,就會採取document操作對頁面局部進行更新。
在這個過程中,html中要有個焦點事件onblur=f1()
然後要先獲得ajax 對象 ,獲得對象可以寫成一個js腳本文件,放到webroot下一個myjs的文件架下
function getXhr(){ var xhr=null; if(window.XMLHttpRequest){ xhr=new XMLHttpRequest(); }else{ xhr= new ActiveXObject('Microsoft.XMLHttp'); } return xhr; }
在這裏要再說說ajax對象的一些重要的屬性
onreadystatechange 綁定一個事件處理函數,當readystate發生改變時執行該函數
readyState 通信的狀態 0 1 2 3 4 5 當爲4的時候表示獲得了從服務器返回的所有完整數據
responseText 獲得服務器返回的文本數據
responseXML獲得服務返回的xml文件數據(基本上不是用xml獲得而是用json獲得)
status 獲得狀態碼
ps:json處理數據比xml更快,而且佔用資源更少,所以在ajax數據傳送中更多的是用json,但是xml的格式類型比json要更多,處理複雜的數據輸送也更好些
編程的步驟:
一,獲得ajax對象(上面已經寫過了)
二,發送請求(分get請求和post請求,發送的方式略有不同,而且處理亂碼的方法也不同,後面講到)
1 get請求
xhr.open('get','check_name.do?username=Tom',true);
ps:true表示是異步請求,不會消除當前頁面,而且也不影響用戶操作
false是同步請求,不會消除當前頁面,但是用戶不能操作頁面
xhr.onreadystatechange=f1;
xhr.send(null);
2 post請求(沒有消息頭,所以要加上)
xhr.open('post','check_name.do',true);
xhr.sendRequestHeader('content-type','......');
xhr.onreadystatechange=f1;
xhr.send('username'=$F(username));
三 編寫服務器端的程序(這裏會涉及到參數的中文亂碼問題,另一篇專門寫)
四 用匿名函數的方式來寫處理函數
xhr.onreadystatechange=function(){
if(readyState==4&&status==200){
var txt=xhr.responseText;
$F('id')=txt;
}
}