Question

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

以上代码取自here

问题：

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

Answer 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.html包含非常长的HTML文件为例。让我们说每个500kb。如果你使用我提供的非AJAX方法，你的用户将不得不等到两个都被下载以查看页面（1MB下载）。当您在问题中使用代码时，页面的加载时间实际上非常低，因为您只加载页面结构而不加载内容。当用户点击其中一个按钮时，您只会加载相关文件 - 意味着500kb - 并且您还可以在页面加载时显示一个漂亮的“加载”动画。从本质上讲，这是主要区别 - 在高级时加载整个数据或在需要时仅加载相关数据。

提高问题代码的提示。在您.load()其中一个页面之后，将数据保存在某个位置，这样如果用户再次点击同一个按钮，则不必再次.load()，只需使用保存的副本。

关于jquery ajax代码的问题

1 个答案: