Neither of those are true AJAX (Asynchronous JavaScript and XML). The first is synchronous but otherwise uses some AJAX techniques, the second is using an iframe to fetch the contents then copying them from it. It's asynchronous, but otherwise uses no AJAX techniques.
An important note about all of these ways of doing things is that often there will be problems unless the pages are live on the web and all of the pages are on the same domain.
The difference between sync and async can seem subtle but generally unless you must use sync, async is better because it allows the browser to continue working while the request is being processed. This is particularly important if there's a problem filling the request, as that will halt all processing on a page if the request is sync. But even when the request is fulfilled, async is better because other things may be done in the meantime. The page load isn't held up waiting for the request to be fulfilled.
Using scripts such as the iframe SSI ones are easier to deal with because all you have to think of is in terms of full pages, one page showing through onto another, the 'top' page. With either of the two methods mentioned, as well as with true AJAX, you are only fetching the content of the page and putting it on the existing or 'top' page. You have just one page, not two, so javascript and css on the external page can be problematic.
With true AJAX though you can continually fetch various content, just like with the iframe SSI scripts.
I'm not aware of any stock scripts that use jQuery AJAX (its $.ajax() function*), though it's the easiest to use from a coding standpoint, that is it's flexibility and options. It requires an understanding of the AJAX process or at least of $.ajax() as a method though. There are scripts on Dynamic Drive that use true AJAX without jQuery, and perhaps some that do. If not, those will surely be coming as DD is converting everything over to jQuery as scripts get updated and/or replaced. A good basic example of AJAX that allows the fetching of various content is Dynamic Ajax Content:
http://www.dynamicdrive.com/dynamici...jaxcontent.htm
Now back to jQuery. A very simple method of using jQuery to fetch content is it's .load() function:
Code:
$('#targetid').load('external.htm');
You need the jQuery library on the page. So a simple example would be:
Code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
function loadpage(e){
$('#contentarea').load(this.href);
e.preventDefault();
}
$('a[data-ajax]').click(loadpage);
});
</script>
</head>
<body>
<a data-ajax="true" href="external1.htm">Page 1</a> <a data-ajax="true" href="external2.htm">Page 2</a>
<div id="contentarea"></div>
</body>
</html>
* for information on the $.ajax() method see: http://api.jquery.com/jQuery.ajax/
See also: http://api.jquery.com/load/ for information on the simpler .load() method used in the above example.
jquery alternative to DHTML-iFrame-SSI-II or DHTML-iFrame-SSI-IV
Reply With Quote
Bookmarks