1. 程式人生 > >Ajax概念、方法、屬性、以及如何建立

Ajax概念、方法、屬性、以及如何建立

AJAX --> 即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是指一種建立互動式網頁應用的網頁開發技術,它提供了非同步更新的機制,使用客戶端與伺服器間交換資料而非整個頁面文件,實現頁面的區域性更新。

AJAX特點 --> 網頁可以實現區域性更新

AJAX核心 -->  JavaScript 物件 XMLHttpRequest (XMLHttpRequest 使您可以使用 JavaScript 向伺服器進行請求並處理響應)

AJAX互動方式??
    客戶端(瀏覽器)從伺服器載入網頁完畢後,網頁中的內容如果需要更改,不使用瀏覽器傳送請求,而是使用JavaScript中的XMLHttpRequest(及Ajax物件)物件傳送請求到伺服器,伺服器接收請求並處理完畢後只返回頁面需要的內容,XMLHttpRequest物件接收伺服器返回的內容,程式設計師需要手動(javascript)的把內容更新到頁面中;

同步互動和非同步互動:
    同步:提交請求-->等待伺服器處理-->處理完畢返回 這個期間客戶端瀏覽器不能幹任何
               (相當於多個事情,同一個時間只能有一個人在做)
    非同步: 請求通過事件觸發-->伺服器處理(這時瀏覽器仍然可以作其他事情)-->處理完畢
               (相當於多個人可以在同一個時間做)

AJAX互動方式的好處??
    只是部分資料更新,就成功和伺服器進行了互動,可以提高使用者的使用體驗,提高伺服器效能。

那些場景需要使用ajax(區域性重新整理)??
    ①自動提示
    ②使用者名稱重複檢查:使用者註冊時,檢查使用者名稱是否存在,及時給使用者反饋;
    ③郵箱提示:WEB版郵箱系統,當有新郵件到底伺服器,瀏覽器不用重新整理頁面也知道是否有新郵件;
    ④無重新整理分頁:顯示資料列表,使用者點選下一頁資料,整個頁面不會重新整理,只把下一頁的資料更新到頁面中;
    ⑤購物車:使用者點選新增到購物車後,能繼續進行其他操作,而購物車的資料儲存伺服器端;
    ⑥使用者登入:使用者登入的資料通過AJAX傳輸到後臺,如果登入失敗直接在當前登入頁面提示使用者,而不用重新整理整個頁面;
如果應用中的頁面需要區域性重新整理並且需要與伺服器互動,那麼就可以使用AJAX

如何建立 XMLHttpRequest 物件??

建立方式① try-catch    

function createAjax(){
    var ajax;//定義區域性ajax物件
    try{
            ajax= new XMLHttpRequest();	// 非IE6瀏覽器
    }catch(e){
	    ajax = new ActiveXObject("Microsoft.XMLHTTP");// IE6瀏覽器
    } 
}

建立方式② 功能判斷   

function createAjax(){
    var ajax;//定義區域性ajax物件
    if(window.XMLHttpRequest){   //判斷當前瀏覽器是否有XMLHttpRequest    在js中認為為false的有:  null  0 ""  false NaN  undefined
        ajax= new XMLHttpRequest();// 非IE6瀏覽器
    } else {
        ajax= new ActiveXObject("Microsoft.XMLHTTP");	// IE6瀏覽器
    }
    return ajax;
} 

Ajax方法:

open(method,url,async)    建立請求,並且規定請求的型別、URL 以及是否非同步處理請求。
    method:請求的型別;GET 或 POST
    url:請求伺服器後端的url地址
    async:true --> 非同步    false --> 同步     注意:這裡值一般都是非同步
send(string)   :  將請求傳送到伺服器。
    如果要給send函式設定引數(string),只能是post請求,字串必須是伺服器URL編碼格式(ex:param1=value1&m2=value2);
    如果是get請求,string可以直接省略
setRequestHeader(header,value)   新增額外的請求頭資訊,post提交必須使用  向請求新增 HTTP 頭。
    header: 規定頭的名稱
    value: 規定頭的值
  注意:該方法必須在open與send之間呼叫;
  原因:
       ①open之後,open是建立一個請求,或者理解為請求的基本準備,如果沒有請求,何來設定請求頭資訊;
       ②send之前,send是傳送一個請求,請求會把當前請求的頭資訊進行傳送,傳送後設置頭資訊無效;
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

Ajax屬性:

readyState  -->  存有 XMLHttpRequest物件的請求狀態   從 0 到 4 發生變化
     0: 請求未初始化  未建立
     1: 伺服器連線已建立  open()方法
     2: 請求已接收  send()方法
     3: 請求處理中           伺服器處理中
     4: 請求已完成,且響應已就緒   響應完畢
onreadystatechange  -->  儲存函式(或函式名),每當 readyState 屬性改變時,就會呼叫該函式。
status   -->  HTTP響應狀態
     200: "OK"  請求成功
     404: "NOT FOUND" 沒有找到對應資源
     500:"Server Error" 伺服器端錯誤
響應資料相關屬性
     responseText 獲得字串形式的響應資料。
     responseXML 獲得 XML 形式的響應資料。