對AJAX技術的理解，建立，與應用

標籤：ajax   xmlhttprequest   

ajax的理解：
1. ajax是介於用戶端與伺服器端之間的一個機制，但這一機制是在前台的，利用前台的閑置功能，來進行前台與背景資料交流，以達到增強使用者體檢，減少伺服器壓力，更有效利用頻寬的效果。
2. ajax是採用非同步互動的機制。
3. ajax使用於頁面局部重新整理，按需求驗證和取資料。
4. ajax缺點便是瀏覽器的相容問題麻煩，與嵌入式移動端對ajax的支援不太理想。

5.ajax已經是一種web開發必備的技術，而且其優點遠大於缺點。

6.ajax涉及到的主要技術有7種其中Javascript、XMLHttpRequest、DOM、XML為重點。

7. XMLHttpRequest對象

XMLHttpRequest是XMLHTTP組件的對象，通過這個對象，AJAX可以像傳統型應用程式

一樣只同伺服器進行資料層面的交換，而不用每次都重新整理介面，也不用每次將資料處

理的工作都交給伺服器來做；這樣既減輕 了伺服器負擔又加快了響應速度、縮短了用

戶等待的時間。

Javascript

Javascript一直被定位為用戶端的指令碼語言，應用最多的地方是表單資料的校正。現在

可以通過Javascript 操作XMLHttpRequest，來跟資料庫打交道。

DOM

DOM（Document Object Model）是提供給HTML和XML使用的一組API，提供了檔案的

表述結構，並可以利用它改變其中的內容和可見物。指令碼語言通過DOM才可以跟頁面進

行互動。Web開發人員可操作及建立檔案的屬性、方法以及事件都以對象來展現。比如，

document就代表頁面對象本身。

XML

通過XML（Extensible Markup Language），可以規範的定義結構化資料，是網上傳輸的

資料和文檔符合統一的標準。用XML表述的資料和文檔，可以很容易的讓所有程式共用。
　

ajax的建立：
考慮相容性：

1.瀏覽器分為IE與非IE，其中非IE是遵循W3C標準的，建立方式基本相同，而IE不一樣，其每個版本建立的方式也有所不同。

2.建立ajax

</pre><pre name="code" class="php"><script>function createAjax(){var request=false;//window對象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）if(window.XMLHttpRequest){request=new XMLHttpRequest();有些瀏覽器是需要覆蓋eMimeTypeif(request.overrideMimeType){request.overrideMimeType("text/xml");//指定文本類型}//window對象中有ActiveXObject屬性存在就是IE}else if(window.ActiveXObject){//將IE各個版本的瀏覽器的參數放在一個數組裡面var versions=['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTT4.0','MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];//遍曆這個數組，確定是那個版本，進行對應AJAX的建立for(var i=0; i<versions.length; i++){try{request=new ActiveXObject(versions[i]);if(request){return request;}}catch(e){request=false;}}}return request;}var ajax=createAjax();//建立AJAX alert(ajax);測試</script>

 

ajax的對象的方法與屬性

1. XMLHttpRequest對象的屬性：

onreadystatechange狀態改變的事件觸發程序
readyState 對象狀態(integer): 
      0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 互動中 4 = 完成
responseText 伺服器處理序返回資料的文本版本
responseXML 伺服器處理序返回資料的相容DOM的XML文檔對象
status 伺服器返回的狀態代碼, 如：404 = "檔案未找到" 、200 ="成功"
statusText 伺服器返回的狀態文本資訊

2. XMLHttpRequest對象的方法：

abort()停止當前請求
getAllResponseHeaders()作為字串返回完整的headers
getResponseHeader("headerLabel")作為字串返回單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]])設定未決的請求的目標 URL，方法，和其他參數
send(content) 發送請求
setRequestHeader("label", "value")設定header並和請求一起發送