本文僅為個人初步學習筆記,,如有不足或問題,,歡迎各位大神提出補充和改正

ajax(asynchronous javascript and xml 非同步地)

(1)ajax是一種用來改善使用者體驗的技術,其本質是利用瀏覽器提供的一個特殊物件(XMLHttpRequest物件,也可以稱之為ajax物件)想伺服器傳送非同步請求,伺服器返回部分資料,瀏覽器利用這些資料,對當前頁面做部分更新.整個過程頁面無重新整理,不打斷使用者的操作.

非同步請求,指的是當這個物件向伺服器傳送請求時,瀏覽器不會銷燬當前頁面,使用者仍然可以對當前頁面做其它操作.

(2)如何獲得ajax物件?

function getXhr(){

var xhr = null;

if(window.XMLHttpRequest){

//非IE

xhr = new XMLHttpRequest();

}else{

xhr = new ActiveXObject('MicroSoft.XMLHttp');

}

return xhr;

}

(3)ajax物件的幾個重要屬性

1)onreadystatechange:繫結事件處理函式(處理readystatechange事件).

注:當ajax物件的readyState屬性值發生了任何改變(比如從0變成了1,就會產生readystatechange事件).

2)readyState:有五個值(0,1,2,3,4),表示ajax物件與伺服器通訊的狀態(進展).4表示ajax物件已經獲得了=伺服器返回的所有的資料.

3)responseText:獲取伺服器返回的文字

4)responseXML:獲取伺服器返回的XML

5)status:獲得狀態碼

(4)程式設計步驟

step1.獲得ajax物件

例:

var xhr = getXhr();

step2.傳送請求

情況一:傳送get請求

xhr.open('get','check.do?uname=King',true);

xhr.onreadystatechange = f1;

xhr.send(null);

//true:非同步請求,,,false:同步請求(當ajax物件傳送請求的時候,瀏覽器會鎖定當前頁面,使用者不能夠對當前頁面做其它操作).

情況二:傳送post請求

xhr.open('post','check.do',true);

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

xhr.onreadystatechange = f1;

xhr.send('uname=King');

//按照http協議要求,如果傳送的是post請求,在請求資料包裡面,應該包含一個訊息頭("content-type").因為ajax物件預設情況下,不會新增該訊息頭,所以要呼叫setRequestHeader方法.

step3.編寫伺服器端的程式

通常只需要返回部分資料

step4.在事件處理函式裡面,處理伺服器返回資料.

function f1(){

if(xhr.readyState == 4 && xhr.status == 200){

//必須保證已經收到了伺服器返回的所有資料,並且沒有出錯

//獲得伺服器返回的資料(文字)

var txt = xhr.responseText;

//下面是更新頁面

......

}

}

例:

//onblur:失去焦點事件

整體思路:

//此圖是借鑑自我培訓班的老師筆記