天天看點

ajax學習筆記---什麼是Ajax

Ajax不是一個技術,而是好幾個技術的結合:

1.使用XHTML和CSS的基于标準的表示技術

2.使用Dom即使進行動态顯示和互動。解決頁面資料擷取,伺服器傳回資料的解析,五重新整理頁面的更新。

3.使用XML和XSLT進行資料交換和處理,XML是Ajax常用的資料傳輸格式,但并不是必須要使用Xml,也可以使用不同文本格式。比如google就是使用純文字進行資料傳輸。

4.使用XMLHTTPRequest進行資料檢索。解決了異步互動。

5.使用JavaScript把上面的技術融合起來。是實作資料從“頁面--伺服器---頁面”的橋梁。

傳統模式下Http請求的發送和伺服器響應結果的接收都是由浏覽器完成的。同時伺服器響應的結果是一個新的Html頁面。

傳統模式中,浏覽器通過表單(Form)組織資料并送出到伺服器并且接收伺服器傳回的頁面。

Ajax發送Http請求和接收伺服器響應都是通過Ajax引擎完成的。伺服器端的響應結果是資料(XML格式或不同文本格式),而不是像傳統模式下以新的頁面為響應結果。響應結果會通過注冊在Ajax引擎上的回調方法來執行響應操作并顯示給客戶。

Ajax中,通過JavaScript擷取頁面上需要處理的資料,通過Ajax引擎把這些資料發送到伺服器,同時還要在Ajax引擎上注冊響應的回調方法。但伺服器把處理後的資料傳回到Ajax引擎就調用回調方法中的相關資料把伺服器傳回的資料呈現給使用者。

Ajax中伺服器端做的工作比傳統方式要少一些。兩者都要進行資料的接收和處理,但是Ajax接收的資料,傳回的也是資料,而不是傳統方式的整個頁面。

關于XMLHttpRequest對象的曆史

最早的XMLHttpRequest是IE5.0中以ActiveX控件的形式出現的,後來Mozilla,Safari,Opera等浏覽器廠商都支援了XMLHttpRequet對象。也就是說在這些浏覽器中,可以直接定義XMLHttpRequest對象。

但是對于IE6以前的版本,該對象隻能夠以ActiveX來建立XMLHttpRequest對象。

正是由于不同浏覽器對XMLHttpRequest對象的支援程度不同,導緻在實際開發過程中為了在不同浏覽器都能實作功能,建立這個對象就比較麻煩,下面是一個建立XMLHttpRequest對象的例子。

if(window.XMLHttpRequest){//如果使用者的浏覽器支援XMLHttpRequest對象,就可以直接new了

                  //對于IE7,IE8,firefox,Mozilla,Safari浏覽器都能滿足這個條件

                  xmlhttp=new XMLHttpRequest();

                  if(xmlhttp.overrideMimeType){

                      xmlhttp.overrideMimeType("text/xml");

                  }

              }else if(window.ActiveXObject){

//如果浏覽器不能直接支援new XMLHttpRequest()就隻能使用Activex來建立了,但是前提是該浏覽器能支援Activex控件。

//上面的浏覽器也能滿足這個條件,但是上面的自帶了XMLHttpRequest對象,是以沒有必要再利用這個來建立。

//由于不同版本的Activex控件不同,這裡使用是以可能的版本來建立XMLHttpRequest對象,隻要有一個控件建立成功,就break出去。

                  activexName=["MSXML2.XMLHTTP6.0","MSXML2.XMLHTTP5.0",

                  "MSXML2.XMLHTTP4.0","MSXML2.XMLHTTP3.0","MSXML2.XMLHTTP",

                   "Miscrosoft.XMLHTTP"];

                  for(var i=0;i<activexName.length;i++){

                      try{

                          xmlhttp=new ActiveXObject();//注意使用Activex來建立XMLHttpRequest對象的寫法的不同。

                          break;

                      }

                      catch(e){

                      }

                  }

              }

              if(xmlhttp==undefined||xmlhttp==null){//如果連Activex都不能支援,那就沒辦法了

                  alert("您的浏覽器太老,請更換版本。");

                  return;

              }

繼續閱讀