本文小編為大家詳細介紹“ajax包含哪些技術”,內容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“ajax包含哪些技術”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:空間域名、雅安服務器托管、營銷軟件、網(wǎng)站建設、鄖西網(wǎng)站維護、網(wǎng)站推廣。
ajax所包含的技術有:1、HTML或XHTML,用于建立網(wǎng)頁內容;2、css,用于美化網(wǎng)頁內容;3、DOM,交互和動態(tài)顯示網(wǎng)頁內容;4、XMLHttpRequest,用于和服務器進行異步通信;5、javascript,實現(xiàn)綁定和調用。
本教程操作環(huán)境:windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
Ajax即Asynchronous Javascript And XML(異步JavaScript和XML)在 2005年被Jesse James Garrett提出的新術語,用來描述一種使用現(xiàn)有技術集合的‘新’方法,包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。
使用Ajax技術網(wǎng)頁應用能夠快速地將增量更新呈現(xiàn)在用戶界面上,而不需要重載(刷新)整個頁面,這使得程序能夠更快地回應用戶的操作。
ajax所包含的技術:
大家都知道ajax并非一種新的技術,而是幾種原有技術的結合體。它由下列技術組合而成。
1、HTML或 XHTML,用于建立網(wǎng)頁內容
2、CSS,用于美化網(wǎng)頁內容
3、使用DOM模型來交互和動態(tài)顯示。
4、使用XMLHttpRequest來和服務器進行異步通信。
5、使用javascript來綁定和調用。
在上面幾中技術中,除了XmlHttpRequest對象以外,其它所有的技術都是基于web標準并且已經(jīng)得到了廣泛使用的,XMLHttpRequest雖然目前還沒有被W3C所采納,但是它已經(jīng)是一個事實的標準,因為目前幾乎所有的主流瀏覽器都支持它。
ajax原理和XmlHttpRequest對象
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發(fā)異步請求,從服務器獲得數(shù)據(jù),然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數(shù)據(jù)。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機制,它是在IE5中首先引入的,是一種支持異步請求的技術。簡單的說,也就是javascript可以及時向服務器提出請求和處理響應,而不阻塞用戶。達到無刷新的效果。
所以我們先從XMLHttpRequest講起,來看看它的工作原理。
首先,我們先來看看XMLHttpRequest這個對象的屬性。
它的屬性有:
onreadystatechange 每次狀態(tài)改變所觸發(fā)事件的事件處理程序。
responseText從服務器進程返回數(shù)據(jù)的字符串形式。
responseXML從服務器進程返回的DOM兼容的文檔數(shù)據(jù)對象。
status從服務器返回的數(shù)字代碼,比如常見的404(未找到)和200(已就緒)
status Text伴隨狀態(tài)碼的字符串信息
readyState對象狀態(tài)值
0 (未初始化) 對象已建立,但是尚未初始化(尚未調用open方法)
1 (初始化) 對象已建立,尚未調用send方法
2 (發(fā)送數(shù)據(jù)) send方法已調用,但是當前的狀態(tài)及http頭未知
3 (數(shù)據(jù)傳送中) 已接收部分數(shù)據(jù),因為響應及http頭不全,這時通過responseBody和responseText獲取部分數(shù)據(jù)會出現(xiàn)錯誤,
4 (完成) 數(shù)據(jù)接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應數(shù)據(jù)
但是,由于各瀏覽器之間存在差異,所以創(chuàng)建一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現(xiàn)在IE和其它瀏覽器之間。下面是一個比較標準的創(chuàng)建XMLHttpRequest對象的方法。
function CreateXmlHttp() { //非IE瀏覽器創(chuàng)建XmlHttpRequest對象 if(window.XmlHttpRequest) { xmlhttp=new XmlHttpRequest(); } //IE瀏覽器創(chuàng)建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("創(chuàng)建xmlhttp對象異常!"); return false; } xmlhttp.open("POST",url,false); xmlhttp.onreadystatechange=function() { if(xmlhttp.readyState==4) { document.getElementByIdx("user1").innerHTML="數(shù)據(jù)正在加載..."; if(xmlhttp.status==200) { document.write(xmlhttp.responseText); } } } xmlhttp.send(); }
如上所示,函數(shù)首先檢查XMLHttpRequest的整體狀態(tài)并且保證它已經(jīng)完成(readyStatus=4),即數(shù)據(jù)已經(jīng)發(fā)送完畢。然后根據(jù)服務器的設定詢問請求狀態(tài),如果一切已經(jīng)就緒(status=200),那么就執(zhí)行下面需要的操作。
對于XmlHttpRequest的兩個方法,open和send,其中open方法指定了:
a、向服務器提交數(shù)據(jù)的類型,即post還是get。
b、請求的url地址和傳遞的參數(shù)。
c、傳輸方式,false為同步,true為異步。默認為true。如果是異步通信方式(true),客戶機就不等待服務器的響應;如果是同步方式(false),客戶機就要等到服務器返回消息后才去執(zhí)行其他操作。我們需要根據(jù)實際需要來指定同步方式,在某些頁面中,可能會發(fā)出多個請求,甚至是有組織有計劃有隊形大規(guī)模的高強度的request,而后一個是會覆蓋前一個的,這個時候當然要指定同步方式。
Send方法用來發(fā)送請求。
知道了XMLHttpRequest的工作流程,我們可以看出,XMLHttpRequest是完全用來向服務器發(fā)出一個請求的,它的作用也局限于此,但它的作用是整個ajax實現(xiàn)的關鍵,因為ajax無非是兩個過程,發(fā)出請求和響應請求。并且它完全是一種客戶端的技術。而XMLHttpRequest正是處理了服務器端和客戶端通信的問題所以才會如此的重要。
現(xiàn)在,我們對ajax的原理大概可以有一個了解了。我們可以把服務器端看成一個數(shù)據(jù)接口,它返回的是一個純文本流,當然,這個文本流可以是XML格式,可以是Html,可以是Javascript代碼,也可以只是一個字符串。這時候,XMLHttpRequest向服務器端請求這個頁面,服務器端將文本的結果寫入頁面,這和普通的web開發(fā)流程是一樣的,不同的是,客戶端在異步獲取這個結果后,不是直接顯示在頁面,而是先由javascript來處理,然后再顯示在頁面。至于現(xiàn)在流行的很多ajax控件,比如magicajax等,可以返回DataSet等其它數(shù)據(jù)類型,只是將這個過程封裝了的結果,本質上他們并沒有什么太大的區(qū)別。
讀到這里,這篇“ajax包含哪些技術”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。