问题关于jQuery的AJAX代码

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

上面的代码是从here 问题关于jQuery的AJAX代码

问题采取了？我只知道一点关于AJAX（异步JavaScript和XML）的一点点，我怎么能把上面的代码改为非Ajax，所以我可以看到Ajax代码和非Ajax代码之间的区别？

来源

2013-07-06 user2294256

它在内部使用'ajax'调用.. – Red

查看http://api.jquery.com/load/，以便您更好地了解发生了什么。 –

AJAX代表“异步JavaScript和XML”，意思是从服务器异步检索数据（页面加载后）。确实如此 - 这就是为什么它被认为是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>

这将ofcourse加载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 - 您也可以在页面加载时显示一个很好的“加载”动画。实质上，这是主要区别 - 在高级中加载整个数据或在需要时仅加载相关数据。

提示您改善问题中的代码。在之后，将数据保存在某处，如果用户再次单击同一个按钮，则不必再使用，只需使用保存的副本即可。

来源

2013-07-06 04:32:11

谢谢你的解释。我试过你写的代码。但是，ajax代码（我放的原始代码）和非ajax代码（你给的例子）有什么区别？速度？我无法分辨。那么你能解释更多吗？谢谢 – user2294256

我已经添加了更详细的exlanation。希望这可以帮助。 –

问题关于jQuery的AJAX代码

回答

相关问题