Is ajax based webpage a good way to do this?
I am creating a website focused on loading only the data that needs to be loaded. I will give an example here and would like to know if this is a good way to create a web page. There are some problems when creating such a site, for example.
- bookmarks
- back and forth in
- SEO history (since the content is mostly not connected)
so here is an example:
index.html
<html>
<head>
<title>Somebodys Website</title>
<!-- JavaScript -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="pagecode.js"></script>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="#" class="nav" id="link_Welcome">Welcome</a></li>
<li><a href="#" class="nav" id="link_Page1">Page1</a></li>
</ul>
</div>
<div id="content">
</div>
</body>
</html>
pagecode.js
var http = null;
$(document).ready(function()
{
// create XMLHttpRequest
try {
http = new XMLHttpRequest();
}
catch(e){
try{
http = new ActiveXObject("MS2XML.XMLHTTP");
}
catch(e){
http = new ActiveXObject("Microsoft.XMLHTTP");
}
}
// set navigation click events
$('.nav').click(function(e)
{
loadPage(e);
});
});
function loadPage(e){
// e.g. "link_Welcome" becomes "Welcome.html"
var page = e.currentTarget.id.slice(5) + ".html";
http.open("POST", page);
http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function(){changeContent(e);};
http.send(null);
}
function changeContent(e){
if(http.readyState == 4){
// load page
var response = http.responseText;
$('#content')[0].innerHTML = response;
}
}
Welcome.html
<b>Welcome</b>
<br />
To this website....
So, as you can see, I am loading content based on the ids of the links in the navigation section. Therefore, in order to bind the "Page 1" navigation element, I would need to create a "Page1.html" file with some content in it.
Is this way of loading data for your web page very wrong? and if so what is the best way to do it?
thank you for your time
EDIT:
This was just a very short example and I would like to say that for users with javascript disabled it is still possible to provide the entire page (optionally) in a static form. eg.
<li><a href="static/Welcome.html" class="nav" id="link_Welcome">Welcome</a></li>
and this Welcome.html will contain all the overhead of the main index.html file. So the ajax using the page version would be some kind of extra feature, right?
source to share
No, this is not a very good way to do it.
Ajax is a tool that is best used with a light touch.
Reusing frames with it just recreates all the problems of frames , except that it replaces the problem of orphan pages with complete invisibility to search engines (and other agents that don't support JS or have disabled it).
So the ajax using the page version would be some kind of extra feature, right?
Not. Users won't notice and you stop bookmarking, link, etc.
source to share
It is wrong to use to use AJAX (or any javascript) just to use it (unless you learn how to use ajax, which is promiscuous).
There are situations where using javascript is good (mostly when you are creating a UI inside your browser window) and when AJAX really shines. But loading static webpages from javascript is pretty . First, you bind to a browser that can run JS, second, you increase the load on your server and client side.
source to share
Additional technical details:
The loadPage function needs to be rewritten with jquery: $ post (). This is a random snapshot, not tested:
function loadPage(e){
// e.g. "link_Welcome" becomes "Welcome.html"
var page = e.currentTarget.id.slice(5) + ".html";
$.post( page, null, function(response){
$('#content')[0].innerHTML = response;
} );
}
Be warned, I haven't tested it and I might get this function a little wrong. But ... dud, you're already using jQuery - overuse it now! :)
source to share
When considering embedding an AJAX pattern in a website, you must first ask yourself why? There are several good reasons to implement AJAX, as well as several bad reasons depending on what you are trying to achieve.
For example, if your site is similar to Facebook, where you want to offer end users a rich user experience, where you can immediately see responses from friends in chat, notifications when users post something on the wall or put you in a photo, without having to update the whole page, AJAX GREAT!
However, if you are creating a website where the main content area changes for each of the top level menu items using AJAX, this is a bad idea for several reasons: first, and what I think is very important, SEO (search engine optimization) is NOT optimized ... Search engine crawlers do not follow AJAX requests unless they are loaded via the onclick tag anchor event. Ultimately, in this example, you are not gaining value from rich experiences, and you are losing a lot of potential viewers.
Second, users will have trouble bookmarking pages unless you implement a sane way to parse URLs to match AJAX calls.
Third, users will have trouble navigating correctly using the back and forward buttons if you haven't implemented your own client-side mechanism for managing the story.
Finally, each browser interprets JavaScript differently, and the more you write JavaScript, the greater the chances of losing cross-browser compatibility unless you implement a framework like jQuery, Dojo, EXT, or MooTools that handle most of them for you.
source to share
Yes, it’s wrong. How about users without JavaScript? Why not make it work on the server side? Why pay the cost of multiple HTTP requests instead of including server side files so they can be downloaded in a single fetch? Why pay the cost of non-JavaScript customers without being able to view your stuff (Spiderman is an important user who will be alienated by this approach)? What for? Why?
source to share