-4 
<html>
<head>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#page1').click(function() {
            $('#content').load('one.html');
            return false;
        });
        $('#page2').click(function() {
            $('#content').load('two.html');
            return false;
        });     
    });
    </script>
</head>
<body>

<a href="#" id="page1">page 1</a> | <a href="#" id="page2">page 2</a>
<div id="content">
</div>
</body>
</html>

上面的代码取自这里

问题：

为什么这段代码被称为“jquery ajax 代码”，因为它只使用.load()，而不是.ajax()？我只知道一点点 AJAX（异步 JavaScript 和 XML），如何将上面的代码更改为非 ajax，这样我才能看到 ajax 代码和非 ajax 代码之间的区别？

4

1 回答 1

1

AJAX 代表“异步 JavaScript 和 XML”，意思是异步地从服务器检索数据（在页面加载后）...load()正是这样做的 - 这就是为什么它被视为 ajax。我相信它甚至.ajax()在幕后使用。

为了避免使用 ajax，我建议将这两个文件都加载到您站点中的容器中，并且只使用 jquery 更改它们的可见性。

例如（使用 PHP 但您可以使用任何其他服务器端语言）：

HTML：

<div id="content1" style="display:none;"><?php include 'one.html';?></div>
<div id="content2" style="display:none;"><?php include 'two.html';?></div>

这当然会同步加载 HTML 页面的内容。为避免异步调用，您必须在 HTML 页面上包含所有数据。

jQuery：

$(document).ready(function() {
        $('#page1').click(function() {
            $('#content1').show();
            $('#content2').hide();
        });
        $('#page2').click(function() {
            $('#content2').show();
            $('#content1').hide();
        });     
    });

我将详细说明差异。当您使用 AJAX 时，您不必预先将所有数据加载到页面中。以其中包含一个非常长one.html的two.htmlHTML 文件为例。假设每个文件 500kb。如果您要使用我提供的非 AJAX 方法，您的用户将不得不等到两者都下载后才能看到该页面（下载 1MB）。当您使用问题中编写的代码时，页面的加载时间确实非常低，因为您只加载页面的结构而不是内容。当用户单击其中一个按钮时，您将只加载相关文件 - 意思是 500kb - 您还可以在页面加载时显示一个漂亮的“加载”动画。本质上，

改进问题中代码的提示。在您.load()浏览其中一页之后，将数据保存在某处，这样如果用户再次单击同一个按钮，您就不必.load()再次使用保存的副本。

于 2013-07-06T04:32:11.600 回答