IFrame和Ajax比較

原創

2020-02-21 05:12

出處：http://blog.csdn.net/hy6688_/article/details/38302613

Ajax：
是指一種創建交互式網頁應用的網頁開發技術。主要是利用XmlHttpRequest對象。該對象在 Internet Explorer 5 中首次引入，它是一種支持異步請求的技術。簡而言之，XmlHttpRequest 使您可以使用 JavaScript 向服務器提出請求並處理響應，而不阻塞用戶。

IFrame：
HTML標籤，作用是文檔中的文檔，或者浮動的框架(FRAME)。

以上的說法是完全摘自百度百科的。但是從他們的描述來說他們好像完全是沒有可比性的。但是我們完全可以用IFrame來實現類似Ajax的技術的，這非常的簡單，而且在XmlHttpRequest 問世之前我們也確實是這樣用的。下面我們通過一個簡單的例子來模擬一下IFrame的遠程腳本調用，這個示例並沒有真正調用服務器，只是想讓大家對如何使用IFrame實現遠程腳本調用有所認識。

IFrame.html文件：

[html]view
plain copy
 print?

<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文件

[html]view
plain copy
 print?

<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請求服務器的數據時，通常瀏覽器下面的狀態欄中的進度條會像打開某個新的網頁時在前進。如果設置了刷新報警音，電腦會發出“咔咔”的響聲，這對用戶來說可能感覺會比較煩，如果請求頻繁，會使用戶覺得煩躁。
2）而用Ajax請求服務器的數據時不會出現上述情況。但實質上如果服務器的返回值大小是一樣的，他們的速度上的差別是一樣的。

2.從功能上來說:

1）iframe包含了一個整個網頁，通常，在佈局網頁的時候，我們經常要用到它。這樣會使網頁的製作顯得很自然而且方便管理。

Ajax通常是在網頁中某個小部分需要改變的時候用到的，它在改變網頁內容的時候快速而精巧。在需要改變網頁上幾個字的時候，我們一般不用iframe。

2）如果你想用不刷新的技術上傳一個數據，那麼無疑你一定要選擇iframe。這是很多人通常用到的方法，這一點iframe一定是靈活而簡單的。
用Ajax，通常你要寫一堆聲明的代碼，總之會比較麻煩。但是，如果需要服務器進行復雜運算，而返回值是一個很簡單結果，用Ajax一定是個不錯的選擇。

3.兩者各自存在的問題：
到現在ajax碰到的兩個比較大的問題是
1）中文亂碼，這個貌似是編碼的問題，基本上能夠解決，但是在某些比較低版本的瀏覽器中還是會出現一些問題

2）跨域post提交數據，這個貌似沒有辦法直接實現，只能通過代理或其他方式來實現

而這兩個問題iframe基本都不會碰到，但是iframe的問題在於
1）你想同時進行多少個請求，就必須建立多少個iframe～否則無法同時進行。

2）iframe的方式處理的是iframe頁面的內容，交互成功的觸發方式主要靠。
a)頁面定時讀取頁面加載狀態：這種方式方式必然導致對客戶端資源的較多佔用。

b)iframe觸發父頁面的事件：這種方式導致返回數據的增加，而且必須保證父頁和框架頁的變量和方法的統一。（我們上面的例子就是使用的這種方式）而這點上面，ajax交互過程中僅僅返回所需要的數據(xml或者text)，這個是ajax相比iframe的最大優勢之一。