ajax所包含的技術有:1、HTML或XHTML,用於建立網頁內容;2、css,用於美化網頁內容;3、DOM,互動和動態顯示網頁內容;4、XMLHttpRequest,用於和伺服器進行非同步通訊;5、javascript,實現綁定和呼叫。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
Ajax即Asynchronous Javascript And XML(非同步JavaScript和XML)在2005年被Jesse James Garrett提出的新術語,用來描述一種使用現有技術集合的'新'方法,包括: HTML 或XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技術網頁應用程式能夠快速地將增量更新呈現在使用者介面上,而不需要重載(刷新)整個頁面,這使得程式能夠更快地回應使用者的操作。
ajax所包含的技術:
大家都知道ajax不是一種新的技術,而是幾種原始技術的結合體。它是由下列技術組合而成。
1、HTML或 XHTML,用於建立網頁內容
2、CSS,用於美化網頁內容
3、使用DOM模型來互動和動態顯示。
4、使用XMLHttpRequest來和伺服器進行非同步通訊。
5、使用javascript來綁定和呼叫。
在上面幾中技術中,除了XmlHttpRequest物件以外,其它所有的技術都是基於web標準並且已經得到了廣泛使用的,XMLHttpRequest雖然目前還沒有被W3C所採納,但是它已經是一個事實的標準,因為目前幾乎所有的主流瀏覽器都支援它。
ajax原理和XmlHttpRequest物件
Ajax的原理簡單來說透過XmlHttpRequest物件來向伺服器發異步請求,從伺服器獲得數據,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從伺服器取得請求資料。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支援非同步請求的技術。簡單的說,也就是javascript可以及時向伺服器提出請求和處理回應,而不阻塞使用者。達到無刷新的效果。
所以我們先從XMLHttpRequest講起,來看看它的運作原理。
首先,我們先來看看XMLHttpRequest這個物件的屬性。
它的屬性有:
onreadystatechange 每次狀態改變所觸發事件的事件處理程序。
responseText從伺服器程序傳回資料的字串形式。
responseXML從伺服器程序傳回的DOM相容的文件資料物件。
status從伺服器傳回的數字代碼,例如常見的404(未找到)和200(已就緒)
status Text伴隨狀態碼的字串資訊
readyState物件狀態值
0 (未初始化) 物件已建立,但是尚未初始化(尚未呼叫open方法)
1 (初始化) 物件已建立,尚未呼叫send方法
2 (發送資料) send方法已調用,但目前的狀態及http頭未知
3 (資料傳送中) 已接收部分數據,因為回應及http頭不全,這時透過responseBody和responseText取得部分資料會出現錯誤,
4 (完成) 資料接收完畢,此時可以透過透過responseXml和responseText取得完整的回應資料
但是,由於各瀏覽器之間存在差異,所以建立一個XMLHttpRequest物件可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。下面是一個比較標準的建立XMLHttpRequest物件的方法。
function CreateXmlHttp() { //非IE浏览器创建XmlHttpRequest对象 if(window.XmlHttpRequest) { xmlhttp=new XmlHttpRequest(); } //IE浏览器创建XmlHttpRequest对象 if(window.ActiveXObject) { try { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) { try{ xmlhttp=new ActiveXObject("msxml2.XMLHTTP"); } catch(ex){} } } } function TestAjax() { var data=document.getElementByIdx("username").value; CreateXmlHttp(); if(!xmlhttp) { alert("创建xmlhttp对象异常!"); return false; } xmlhttp.open("POST",url,false); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementByIdx("user1").innerHTML="数据正在加载..."; if(xmlhttp.status==200) { document.write(xmlhttp.responseText); } } } xmlhttp.send(); }
如上所示,函數首先檢查XMLHttpRequest的整體狀態並且保證它已經完成(readyStatus=4),也就是資料已經傳送完畢。然後根據伺服器的設定詢問請求狀態,如果一切已經就緒(status=200),那麼就執行下面需要的操作。
對於XmlHttpRequest的兩個方法,open和send,其中open方法指定了:
a、向伺服器提交資料的類型,即post還是get。
b、請求的url位址和傳遞的參數。
c、傳輸方式,false為同步,true為非同步。預設為true。如果是非同步通訊方式(true),客戶機就不等待伺服器的回應;如果是同步方式(false),客戶機就要等到伺服器回傳訊息後才去執行其他操作。我們需要根據實際需求來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆蓋前一個的,這個時候當然要指定同步方式。
Send方法用來傳送請求。
知道了XMLHttpRequest的工作流程,我們可以看出,XMLHttpRequest是完全用來向伺服器發出一個請求的,它的作用也局限於此,但它的作用是整個ajax實現的關鍵,因為ajax無非是兩個過程,發出請求和回應請求。並且它完全是一種客戶端的技術。而XMLHttpRequest正是處理了伺服器端和客戶端通訊的問題所以才會如此的重要。
現在,我們對ajax的原理大概可以有個了解了。我們可以把伺服器端看成一個資料接口,它回傳的是一個純文字流,當然,這個文字流可以是XML格式,可以是Html,可以是Javascript程式碼,也可以只是一個字串。這時候,XMLHttpRequest向伺服器端請求這個頁面,伺服器端將文字的結果寫入頁面,這和普通的web開發流程是一樣的,不同的是,客戶端在非同步取得這個結果後,不是直接顯示在頁面,而是先由javascript來處理,然後再顯示在頁面。至於現在流行的許多ajax控件,例如magicajax等,可以返回DataSet等其它資料類型,只是將這個過程封裝了的結果,本質上他們並沒有什麼太大的區別。
【相關教學推薦:AJAX影片教學】
以上是ajax技術有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!