</div>
</div>
</div>
<hr class="my12 outline-none baw0 bb bc-powder-2">
<div class="grid fw-nowrap fc-black-600">
<div class="grid--cell mr8">
<svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
</div>
<div class="grid--cell lh-md">
<p class="mb0">
<b>Want to improve this question?</b> Add details and clarify the problem by <a href="/posts/17499649/edit">editing this post</a>.
</p>
<p class="mb0 mt6">Closed <span title="2013-07-06 14:14:35Z" class="relativetime">6 years ago</span>.</p>
</div>
</div>
</aside>
<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>
Above code is taken from here
Questions:
why this code is called "jquery ajax codes" since it is only using .load(), not .ajax()? I only know a litte bit about AJAX(Asynchronous JavaScript and XML), how could I change above codes to non-ajax, so I can see the difference between ajax codes and non-ajax codes?
</div>
AJAX stands for "Asynchronous JavaScript and XML" meaning retrieving data from the server Asynchronously (after the page is loaded).. .load() does exactly that - this is why it is considered as ajax. I believe it even uses .ajax() behind the scenes.
In order to avoid ajax I recommend load both files into containers in your site and only change their visibility using jquery.
For example (using PHP however you can use any other server-side lang):
HTML:
<div id="content1" style="display:none;"><?php include 'one.html';?></div>
<div id="content2" style="display:none;"><?php include 'two.html';?></div>
this will ofcourse load the content of the HTML pages synchronously. To avoid asynchronous calls you will have to include all the data on your HTML page.
jQuery:
$(document).ready(function() {
$('#page1').click(function() {
$('#content1').show();
$('#content2').hide();
});
$('#page2').click(function() {
$('#content2').show();
$('#content1').hide();
});
});
I will elaborate more on the difference. When you use AJAX you don't have to load all the data to the page in advanced. Take the example of which one.html and two.html contained a very long HTML file.. let's say 500kb each. If you were to use the non AJAX method I offered, your user will have to wait until both were downloaded to see the page (1MB download). When you use the code as you wrote in the question, the loading time of the page is really really low because you only load the structure of the page and not the content. When the user clicks on one of the buttons you will load ONLY the relevant file - meaning 500kb - and you could also display a nice "loading" animation while the page loads. Essentially, this is the main difference - loading the entire data in advanced or loading only the relevant data when it is needed.
A tip to improve your code in the question. after you .load() one of the pages, save the data somewhere so if the user clicks on the same button again you won't have to .load() again and just use the saved copy.