ajax包含哪些技術

本文小編為大家詳細介紹“ajax包含哪些技術”，內容詳細，步驟清晰，細節處理妥當，希望這篇“ajax包含哪些技術”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

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包含哪些技術”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。