3

我一直在阅读这方面的内容，似乎如果您使用 ajax，您只能引入位于同一域中的内容，而使用 iframe，您可以引入来自任何域的内容。是这样吗？还有哪些不同之处？

4

3 回答 3

13

请记住，它们是两种完全独立的技术。

(i)frame 确实将一个完整的 HTML 页面加载到浏览器中。页面是在同一个域还是另一个域中，对于纯粹的查看来说，并不重要。

Ajax 仅描述了一个系统，以促进 JavaScript 与（并且在当前跨浏览器的安全限制下，仅与）您生成 JavaScript 调用的文档所在的服务器进行通信。

(i)frame 技术从给定的任何 URL 加载和呈现完整的 HTML 页面。使用 JavaScript 从其他域访问其他文档的某些安全限制仍然适用。

使用 Ajax，它只意味着使用纯 JavaScript 与原始服务器通信（发送一些数据）并通常会返回一些数据。在 JavaScript 中。这些数据是什么以及如何使用它取决于您。是否将其插入 DOM（文档对象模型）、交换部件或加载新页面取决于您。

在某种程度上，你拥有你想要的所有自由。您可以在页面上有一个 (i) 框架，仍然进行 Ajax 调用并决定将另一个 URL 加载到 (i) 框架中。或者使用 Ajax 返回值在 (i) 框架内动态生成新的 HTML。或者在外面，在另一个文件中。

在这种情况下应用的安全限制称为“同源策略”。

于 2008-12-20T00:42:28.910 回答
1

很简单，iframe 就像一个常规框架，但它不会将浏览器窗口分割成多个部分，它位于页面内部并受滚动条的影响。

另一方面，Ajax 使用 javascript 来完成页面的部分加载，允许从服务器加载少量数据，而无需进行完整的回发。例如，当您发表评论、投票、排队播放视频等时，Youtube 使用 Ajax。他们这样做是为了让您的视频不会因完整的页面回发而中断和重新启动。

于 2008-12-20T00:47:11.397 回答
0

除了其他人提到的这些差异之外，还有其他差异。iframe 加载整个 html/php 页面，无论是来自自己的服务器还是其他外部服务器。通常，它也有一个新的<html>,<head>和<body>标签。Ajax 只加载 html/php 页面的一部分。

此外，Ajax 从父文件中提取 CSS（甚至可能是 javascript 代码），但对于 Iframe，它无法提取相同的内容。

例如，这是主文件编码。

<!doctype html>
<html>
<head>
<style>
    .gappu {background-color:black;color:red;}
</style>
<meta charset="utf-8">
    <script src="../AllJqueries/jquery-1.11.3.min.js"></script> <!-- Use your own jQuery file -->
    <script>
        <!--
        $(document).ready(function(){
            $.ajax({url:"slave1.php?bare=true", success:function(data){
                $(".myDomain").html(data);
            }});
        }); /* End of Main Jquery */
        //-->
    </script>
<title>Ajax vs Iframe</title>
</head>

<body>
    <div class="myDomain"></div>
    <div>Iframe below</div>
    <iframe width="100%" height="500px" src="slave1.php"></iframe>
</body>
</html>

现在，我们还有另一个文件，命名为 slave1.php

<?php
if(isset($_GET['bare'])) $bare = $_GET['bare'];
else $bare = false;
if(!$bare):
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    .gappu {background-color:blue;color:yellow;}
</style>
<!-- You can remove the above style later, and see the difference. The parent style will not apply for iframe -->
<title>Inside the Iframe</title>
</head>

<body>
<?php endif; ?>
    <div class="gappu">Hi, welcome to this demo</div>
<?php if(!$bare): ?>
</body>
</html>
<?php endif;

在 Ajax 调用的情况下，行Hi, welcome to this demo将是黑色背景和红色，因为它是从父级借用 css。但在 iframe 中，它将是蓝色背景和白色，这是在 slave1.php 中定义的。您可以从 slave1.php 中删除样式，您会发现以 iframe 格式打印的纯文本。

希望这可以帮助。干杯。维杰·斯里尼瓦斯

于 2016-11-23T06:01:05.547 回答