ajax異步調用

1、名稱:

ajax 的全稱是AsynchronousJavaScript and XML,其中,Asynchronous 是異步的意思,它有別於傳統web開發中採用的同步的方式。

2、同步和異步

異步傳輸是面向字符的傳輸,它的單位是字符;而同步傳輸是面向比特的傳輸,它的單位是楨,它傳輸的時候要求接受方和發送方的時鐘是保持一致的。

舉個例子來說同步和異步,同步就好像我們買樓一次性支付,而異步就是買樓分期付款。所以當我們把這種生活中的概念化解釋轉移到理解Ajax異步上來就發現,它是通過這樣一種異步的方式來讓用戶更加收益,也就是說可以讓用戶的有更好的體驗性。其實這也是Ajax的意義所在。

3、ajax所包含的技術

 大家都知道ajax並非一種新的技術,而是幾種原有技術的結合體。它由下列技術組合而成。

   1.使用CSS和XHTML來表示。

   2. 使用DOM模型來交互和動態顯示。

   3.使用XMLHttpRequest來和服務器進行異步通信。

   4.使用javascript來綁定和調用。

在上面幾中技術中,除了XmlHttpRequest對象以外,其它所有的技術都是基於web標準並且已經得到了廣泛使用的,XMLHttpRequest雖然目前還沒有被W3C所採納,但是它已經是一個事實的標準,因爲目前幾乎所有的主流瀏覽器都支持它。

ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求,從服務器獲得數據,然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理,我們必須對 XMLHttpRequest有所瞭解。

XMLHttpRequest是ajax的核心機制,是一種支持異步請求的技術。簡單的說,也就是javascript可以及時向服務器提出請求和處理響應,而不阻塞用戶。達到無刷新的效果。

4、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對象的方法。

[javascript] view plain copy
  1. function CreateXmlHttp()  
  2.   {  
  3.   //非IE瀏覽器創建XmlHttpRequest對象  
  4.    if(window.XmlHttpRequest)  
  5.    {  
  6.     xmlhttp=new XmlHttpRequest();  
  7.    }  
  8.    //IE瀏覽器創建XmlHttpRequest對象  
  9.     if(window.ActiveXObject)  
  10.    {  
  11.    try  
  12.    {  
  13.     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");      
  14.    }  
  15.    catch(e)  
  16.    {  
  17.    try{  
  18.     xmlhttp=new ActiveXObject("msxml2.XMLHTTP");  
  19.     }  
  20.     catch(ex){}  
  21.    }  
  22.    }  
  23.   } </span></span>  

[javascript] view plain copy
  1. function Ustbwuyi()  
  2.    {  
  3.     var data=document.getElementById("username").value;    
  4.         CreateXmlHttp();  
  5.         if(!xmlhttp)  
  6.         {  
  7.          alert("創建xmlhttp對象異常!");  
  8.          return false;  
  9.         }     
  10.         xmlhttp.open("POST",url,true); //設置請求方式爲POST,設置請求的URL,設置爲異步提交     
  11.        //將方法地址複製給onreadystatechange屬性  
  12.         xmlhttp.onreadystatechange=function()  
  13.         {    
  14.          //Ajax引擎狀態爲成功  
  15.          if(xmlhttp.readyState==4)  
  16.            {  
  17.            document.getElementById("user1").innerHTML="數據正在加載...";  
  18.              if(xmlhttp.status==200)//HTTP協議狀態爲成功  
  19.              {  
  20.               document.write(xmlhttp.responseText);  
  21.              }  else{  
  22.                  alert("請求失敗,錯誤碼="+xmlhttp.status);  
  23.              }     
  24.            }  
  25.          }  
  26.         xmlhttp.send();//將設置信息發送到Ajax引擎  
  27.    }  

首先創建一個XMLHttpRequest對象,之後javaspcript方法檢查XMLHttpRequest的整體狀態並且保證它已經完成(readyStatus=4),即數據已經發送完畢。然後根據服務器的設定詢問請求狀態,如果一切已經就緒(status=200),那麼就執行下面需要的操作。

對於XmlHttpRequest的兩個方法,open和send,其中open方法指定了:

a、向服務器提交數據的類型,即post還是get。

b、請求的url地址和傳遞的參數。

c、傳輸方式,false爲同步,true爲異步。默認爲true。如果是異步通信方式(true),客戶機就不等待服務器的響應;如果是同步方式(false),客戶機就要等到服務器返回消息後纔去執行其他操作。我們需要根據實際需要來指定同步方式,在某些頁面中,可能會發出多個請求,甚至是有組織有計劃有隊形大規模的高強度的request,而後一個是會覆蓋前一個的,這個時候當然要指定同步方式。

之後調用Send(content)方法用來發送請求。

send方法向服務器發出請求,如果採用異步方式,該方法會立即返回。

content可以指定爲null表示不發送數據,其內容可以是DOM對象,輸入流或字符串。

通過這個示例我們看到Ajax 基本上就是把 JavaScript 技術和XMLHttpRequest對象放在 Web 表單和服務器之間。當用戶向服務器請求時,數據發送給一些 JavaScript 代碼而不是直接發送給服務器。JavaScript代碼在幕後發送異步請求,然後服務器將數據返回 JavaScript 代碼,後者決定如何處理這些數據,它可以迅速更新表單數據。這就是Ajax的原理所在。

5、用圖來理解Ajax原理


6、ajax的優點

Ajax的給我們帶來的好處大家基本上都深有體會,在這裏我只簡單的講幾點:

   1、最大的一點是頁面無刷新,在頁面內與服務器通信,給用戶的體驗非常好。

  2、使用異步方式與服務器通信,不需要打斷用戶的操作,具有更加迅速的響應能力。

  3、可以把以前一些服務器負擔的工作轉嫁到客戶端,利用客戶端閒置的能力來處理,減輕服務器和帶寬的負擔,節約空間和寬帶租用成本。並且減輕服務器的負擔,ajax的原則是“按需取數據”,可以最大程度的減少冗餘請求,和響應對服務器造成的負擔。

  4、基於標準化的並被廣泛支持的技術,不需要下載插件或者小程序。

7、ajax的缺點

下面所闡述的ajax的缺陷都是它先天所產生的。

   1、ajax幹掉了back按鈕,即對瀏覽器後退機制的破壞。後退按鈕是一個標準的web站點的重要功能,但是它沒法和js進行很好的合作。這是ajax所帶來的一個比較嚴重的問題,因爲用戶往往是希望能夠通過後退來取消前一次操作的。那麼對於這個問題有沒有辦法?答案是肯定的,用過Gmail的知道,Gmail下面採用的ajax技術解決了這個問題,在Gmail下面是可以後退的,但是,它也並不能改變ajax的機制,它只是採用的一個比較笨但是有效的辦法,即用戶單擊後退按鈕訪問歷史記錄時,通過創建或使用一個隱藏的IFRAME來重現頁面上的變更。(例如,當用戶在Google Maps中單擊後退時,它在一個隱藏的IFRAME中進行搜索,然後將搜索結果反映到Ajax元素上,以便將應用程序狀態恢復到當時的狀態。)

但是,雖然說這個問題是可以解決的,但是它所帶來的開發成本是非常高的,和ajax框架所要求的快速開發是相背離的。這是ajax所帶來的一個非常嚴重的問題。

 2、安全問題

技術同時也對IT企業帶來了新的安全威脅,ajax技術就如同對企業數據建立了一個直接通道。這使得開發者在不經意間會暴露比以前更多的數據和服務器邏輯。ajax的邏輯可以對客戶端的安全掃描技術隱藏起來,允許黑客從遠端服務器上建立新的攻擊。還有ajax也難以避免一些已知的安全弱點,諸如跨站點腳步攻擊、SQL注入攻擊和基於credentials的安全漏洞等。

  3、對搜索引擎的支持比較弱。

  4、破壞了程序的異常機制。至少從目前看來,像ajax.dll,ajaxpro.dll這些ajax框架是會破壞程序的異常機制的。關於這個問題,我曾經在開發過程中遇到過,但是查了一下網上幾乎沒有相關的介紹。後來我自己做了一次試驗,分別採用ajax和傳統的form提交的模式來刪除一條數據……給我們的調試帶來了很大的困難。

 5、另外,像其他方面的一些問題,比如說違背了url和資源定位的初衷。例如,我給你一個url地址,如果採用了ajax技術,也許你在該url地址下面看到的和我在這個url地址下看到的內容是不同的。這個和資源定位的初衷是相背離的。

 6、一些手持設備(如手機、PDA等)現在還不能很好的支持ajax,比如說我們在手機的瀏覽器上打開採用ajax技術的網站時,它目前是不支持的,當然,這個問題和我們沒太多關係。

8、ajax的幾種框架

 目前我們採用的比較多的ajax框架主要有ajax.dll,ajaxpro.dll,magicajax.dll 以及微軟的atlas框架。Ajax.dll和Ajaxpro.dll這兩個框架差別不大,而magicajax.dll只是封裝得更厲害一些,比如說它可以直接返回DataSet數據集,前面我們已經說過,ajax返回的都是字符串,magicajax只是對它進行了封裝而已。但是它的這個特點可以給我們帶來很大的方便,比如說我們的頁面有一個列表,而列表的數據是不斷變化的,那麼我們可以採用magicajax來處理,操作很簡單,添加magicajax之後,將要更新的列表控件放在magicajax的控件之內,然後在pageload裏面定義更新間隔的時間就ok了,atlas的原理和magicajax差不多。但是,需要注意的一個問題是,這幾種框架都只支持IE,沒有進行瀏覽器兼容方面的處理,用反編譯工具察看他們的代碼就可以知道。

 除了這幾種框架之外,我們平時用到的比較多的方式是自己創建xmlHttpRequest對象,這種方式和前面的幾種框架相比更具有靈活性。另外,在這裏還提一下aspnet2.0自帶的異步回調接口,它和ajax一樣也可以實現局部的無刷新,但它的實現實際上也是基於xmlhttprequest對象的,另外也是隻支持IE,當然這是微軟的一個競爭策略。

9.什麼是回調

軟件模塊之間總是存在着一定的接口,從調用方式上,可以把他們分爲三類:同步調用、回調和異步調用。同步調用是一種阻塞式調用,調用方要等待對方執行完畢才返回,它是一種單向調用;回調是一種雙向調用模式,也就是說,被調用方在接口被調用時也會調用對方的接口;異步調用是一種類似消息或事件的機制,不過它的調用方向剛好相反,接口的服務在收到某種訊息或發生某種事件時,會主動通知客戶方(即調用客戶方的接口)。回調和異步調用的關係非常緊密,通常我們使用回調來實現異步消息的註冊,通過異步調用來實現消息的通知。同步調用是三者當中最簡單的,而回調又常常是異步調用的基礎(引用自網絡) 

 
10、回調函數

回調函數,就是由你自己寫的。你需要調用另外一個函數,而這個函數的其中一個參數,就是你的這個回調函數名。這樣,系統在必要的時候,就會調用你寫的回調函數,這樣你就可以在回調函數裏完成你要做的事。例如:模塊A有一個函數foo,它向模塊B傳遞foo的地址,然後在B裏面發生某種事件(event)時,通過從A裏面傳遞過來的foo的地址調用foo,通知A發生了什麼事情,讓A作出相應反應。 那麼我們就把foo稱爲回調函數。 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章