Ajax簡介與實例

  Ajax(Asunchronous JavaScript + XML)是有HTML、JavaScript技術、DHTML和DOM技術組成,使用它可以構建更爲動態和響應更靈敏的Web應用程序。Ajax技術的關鍵在於瀏覽器端和響應更靈敏的Web應用程序。Ajax技術的關鍵在於對瀏覽氣端和響應更靈敏的Web應用程序。Ajax技術的關鍵在於對瀏覽器端的JavaScript、DHTML和與服務器異步通信的組合。這一技術可以將笨拙的Web界面轉化成交互性的Ajax應用程序。

  Ajax的核心是JavaScript對象XmlHttpRequest。該對象在IE5中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest可以使用JavaScript想服務器提出請求並處理響應,而不阻塞用戶在創建Web站點時,在客戶端執行屏幕更新爲用戶提供了很大的靈活性。

 

Ajax應用程序用到的基本技術有:

1、HTML用於建立Web表單並確定應用程序其他部分使用的字段。

2、JavaScript代碼是運行Ajax應用程序的核心代碼,幫組改進與服務器應用程序的通信。

3、DHTML用於動態更新表單,若使用div、span和其他動態HTML元素來標記HTML。

4、文檔對象模型DOM用於通過JavaScript處理HTML結構和服務器返回的XML或其他數據。

 

使用Ajax可以完成的功能有:

1、動態更新當前頁面的顯示信息,如購物車的物品總數,無需用戶單擊更新並等待服務器重新發送整個頁面。

2、提升網站的性能,通過減少從服務器下載的數據量而實現提高網絡性能。

3、避免每次用戶輸入時頁面刷新,直接編輯表格數據而不是要求用戶導航到新的頁面來編輯數據。

 Ajax基本思想就是把JavaScript技術和XMLHttpRequest對象放在Web表單和服務器之間。當用戶填寫表單時,數據發送給特定JavaScript代碼而不直接發送給服務器,相反,JavaScript代碼捕獲表單數據並向JavaScript代碼在幕後發送情切,用戶甚至不知道請求的發出,而且請求是一步發送,就是說,JavaScript代碼不用等待服務器的響應,因此用戶可以繼續輸入數據、滾動屏幕和使用應用程序。 服務器將數據返回Java代碼,JavaScript代碼決定如何處理這些數據。它可以迅速更新表單數據。讓人感覺應用程序是立即完成的,表單沒有提交或刷新而用戶得到了數據,JavaScript代碼甚至全可以對收到的數據執行某種計算,在發送另一個請求,完全不需要用戶干預,這個就是XMLHttpRequest的強大之處。

 

 

獲取XMLHttpRequest對象:

使用Microsoft瀏覽器IE,Microsoft瀏覽器IE使用MSXML解析處理XML,因此如果編寫的Ajax應用程序要和Internet Explorer打交道,那麼必須用一種特殊的方式創建對象,但並不是這麼簡單,根據Internet Explorer中安裝的版本,因此必須對這兩種情況分別編寫代碼。下面就是創建XMLHttpRequest對象的通用代碼:

 

 

Ajax的基本請求/響應模式:

1.當創建了一個XMLHttpRequest對象後,就可以應用來處理服務器請求。首先需要一個Web頁面能夠調用JavaScript方法。Ajax應用程序處理請求流程爲:

  1.從Web表單中獲取需要的數據。

  2.建立要連接的URL。

  3.打開連到服務器的連接

  4.設置服務器在完成後要運行的函數。

  5.發送請求。

具體代碼開發代碼如下:

 

    

處理響應:
1.發送請求後,進入等待服務器的響應,知道xmlHttp.readyState屬性的值等於4.服務器將把響應填充到xmlHttp.requestText屬性中,其中的第一點是就緒狀態米之遙檢查一個特定的值爲4就表明服務器已處理完成請求的響應,第二點就是使用xmlHttp.responseTexts屬性獲得服務器的響應,XmlHttpRequest對象屬性有:
1.onreadystatechange:每次狀態改變所觸發事件的事件處理程序。
2.readyState:對象狀態值,狀態值得含義如下:
  0 = 未初始化(uninitialized) 1 = 正在加載(loading)2 = 加載完畢(loaded) 3 = 交互(interactive) 4 = 完成(complete)
3.resposeText:從服務器進程返回的數據的字符串形式。
4.responseXML:從服務器進程返回的DMO兼容的文檔數據對象。
5.status:從服務器返回的數字代碼,比如404(未找到)或200(就緒)
6.statusText:伴隨狀態碼得字符串信息。

下面就是處理服務器響應的例子,代碼如下:
function refreshPage(){
 if(xmlHttp.readyState == 4){
   if(xmlHttp.status == 200){

   //處理代碼  

}

 

}
}

 

 

 

發佈了44 篇原創文章 · 獲贊 6 · 訪問量 34萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章