IFrame和Ajax比較

來源:互聯網
上載者:User

標籤:style   http   color   io   os   使用   ar   java   for   

         說到比較,可能我是須要把這連個東西都給大家介紹一下的,可是介於大家都已經有了非常多的理解。我就簡單的說了。

Ajax:
            是指一種建立互動式網頁應用的網頁開發技術。主要是利用XmlHttpRequest對象。該對象在 Internet Explorer 5 中首次引入,它是一種支援非同步請求的技術。簡而言之,XmlHttpRequest 使您能夠使用 JavaScript 向server提出請求並處理響應,而不堵塞使用者。


IFrame:
            HTML標籤,作用是文檔中的文檔,或者浮動的架構(FRAME)。

以上的說法是全然摘自百度百科的。可是從他們的描寫敘述來說他們好像全然是沒有可比性的。可是我們全然能夠用IFrame來實作類別似Ajax的技術的,這很的簡單,並且在XmlHttpRequest 問世之前我們也確實是這樣用的。以下我們通過一個簡單的範例來類比一下IFrame的遠程指令碼調用,這個示範範例並沒有真正調用server,僅僅是想讓大家對怎樣使用IFrame實現遠程指令碼調用有所認識。


IFrame.html檔案:

<span style="font-size:18px;"><html> <head> <title>Example of remote scripting in an IFRAME</title> </head> <script type="text/javascript"> function handleResponse() { alert('this function is called from server.html'); } </script> <body> <h1>Remote Scripting with an IFRAME</h1> <iframe id="beforexhr" name="beforexhr" style="width:0px; height:0px; border: 0px" src="blank.html"></iframe> <a href="serverl.html" target="beforexhr">call the server</a> </body> </html> </span>

server.html檔案

<span style="font-size:18px;"><html> <head> <title>the server</title> </head> <script type="text/javascript"> window.parent.handleResponse(); </script> <body> <a href="serverl.html" target="beforexhr">call the server</a> </body> </html> </span>

        執行這個代碼,你會看到彈出的提示框:‘this function is called from server.html‘


        這個範例中我們全然實現了遠端指令碼調用,這似乎和ajax在做相同的事情,但兩者有什麼差別呢。


        1.首先我們想說的也是大家都普遍知道的一點就是ajax最大的特點——非同步通訊。


         1)用iframe請求server的資料時,通常瀏覽器以下的狀態列中的進度條會像開啟某個新的網頁時在前進。假設設定了重新整理警示音,電腦會發出“哢哢”的響聲,這對使用者來說可能感覺會比較煩,假設請求頻繁,會使使用者認為煩躁。
         2)而用Ajax請求server的資料時不會出現上述情況。但實質上假設server的返回值大小是一樣的,他們的速度上的區別是一樣的。

         2.從功能上來說:
         
         1)iframe包括了一個整個網頁,通常,在布局網頁的時候,我們常常要用到它。這樣會使網頁的製作顯得非常自然並且方便管理。

        Ajax一般是在網頁中某個小部分須要改變的時候用到的,它在改變網頁內容的時候高速而靜止。在須要改變網頁上幾個字的時候,我們一般不用iframe。 


         2)假設你想用不重新整理的技術上傳一個資料,那麼無疑你一定要選擇iframe。這是非常多人通經常使用到的方法,這一點iframe一定是靈活而簡單的。        
         用Ajax,通常你要寫一堆聲明的代碼,總之會比較麻煩。可是,假設須要server進行複雜運算,而返回值是一個非常easy結果,用Ajax一定是個不錯的選擇。

          3.兩者各自存在的問題:
          到如今ajax碰到的兩個比較大的問題是
         1)中文亂碼,這個貌似是編碼的問題,基本上可以解決,可是在某些比較低版本號碼的瀏覽器中還是會出現一些問題


         2)跨域post提交資料,這個貌似沒有辦法直接實現,僅僅能通過代理或其它方式來實現

           而這兩個問題iframe基本都不會碰到,可是iframe的問題在於
           1)你想同一時候進行多少個請求,就必須建立多少個iframe~否則無法同一時候進行。


           2)iframe的方式處理的是iframe頁面的內容,互動成功的觸發方式主要靠。
            a)頁面定時讀取頁面載入狀態:這樣的方式方式必定導致對client資源的較多佔用。              
            b)iframe觸發父頁面的事件:這樣的方式導致返回資料的添加,並且必須保證父頁和架構頁的變數和方法的統一。(我們上面的範例就是使用的這樣的方式)而這點上面,ajax互動過程中只返回所須要的資料(xml或者text),這個是ajax相比iframe的最大優勢之中的一個。

        以上是我粗略的比較了一下兩者的不同,更深入的理解還須要大家在以後的項目中多多的實踐。





IFrame和Ajax比較

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.