1. 程式人生 > >前端必學-----AJax--筆記---03

前端必學-----AJax--筆記---03

是不是感覺02中出現了很多新的單詞,或者一頭霧水,接下來我為大家一句一句解讀,大家的不懂的,可以給我留言。

1.先建立Ajax引擎物件

就是建立 XMLHtttpRequest 物件,所有現代瀏覽器(市面上普遍用的瀏覽器)均支援XMLHttpRequest物件

(IE5 和 IE6 使用 ActiveXObject)它同時也是一個Javascript物件.

Ajax引擎(XMLHttpRequest)(重要的話寫三遍:Ajax的核心XMLHttpRequest)

關於XMLHttoRequest的相容處理的程式碼:

var xhr = null;

if (window.XMLHttpRequest) {

    xhr = new XMLHttpRequest;            //所有現代瀏覽器

}else{

    xhr = new ActiveXObject("Microsoft.XMLHTTP");           //ie5,ie6(注意大小寫)

}

2.配置請求物件的資訊

xhr.open('get/post' , 'url地址' , ['是否非同步'] );

//open接受3個引數:要傳送請求的型別,請求的url,是否非同步請求(布林值表示,ture表示非同步,false你懂的)

//注意:如果使用post請求,就一定要設定請求頭(關於get和post更詳細的說明)
//請求頭:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");(固定寫法,不用理解,知道就行)

3.傳送請求

xhr.send([null]);    


傳送請求分為兩種情況:
1.監控使用者的事件(onclick,onchange等),通過ajax傳送請求
2.監控瀏覽器的事件(onload),通過ajax傳送請求.

//看不懂這倆句話,沒關係,就當我沒寫,看完後邊的,在會多頭來理解,掌握髮送請求就可以了。


4.監聽Ajax引擎物件的改變(是否正確做出了響應)

xhr.onreadystatechange = function(){

//判斷事件成與否

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

                   //在這裡可以獲取伺服器返回的資料
               var result=xhr.responseText;
     }else{
                    var info=document.getElementById("info");
                    info.innerHTML="伺服器資料已收返回";

     }

}

onreadystatechange屬性是一個方法,監控到響應內容的返回,當readyState狀態值改變的時候觸發的事件,根據響應內容使用javascript改變當前頁面的部分html程式碼,從而達到不重新整理改變區域性html程式碼.

Ajax引擎的狀態發生改變時都會執行onreadystatechange屬性對應的方法

status:返回當前請求的http狀態碼. 200 成功 ;304 快取;404 not found; 403 沒有許可權 501 伺服器級別錯誤

statusText:返回當前請求的響應行狀態文字, ok、 not、 found 、forbidden


readyState::判斷瀏覽器和伺服器進行到哪一步了通過數值來判斷
   0---(未初始化)還沒呼叫open()方法
   1---(載入)已呼叫send()方法,正在傳送請求
   2---(載入完成)send()方法完成,已經收到全部響應內容
   3---(解析)正在解析響應內容
   4---(完成)響應內容解析完成,可以在客戶端呼叫了

Ajax引擎的狀態屬性為readyState4,說明伺服器的響應已經發送給Ajax請求了.

但是響應的狀態嗎為200:說明響應的內容是正確的,這時才會根據相應內容對當前頁面的html處理

responseText:ajax請求返回的內容被存放到這個屬性下面