Databases
StackOverflow2013
Postsdbo
POajax based webpage - good way to do it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POajax based webpage - good way to do it?
    text
    copied!<p>I build a website focussing on loading only data that has to be loaded. I've build an example here and would like to know if this is a good way to build a wegpage. There are some problems when building a site like that, e.g. </p> <ul> <li>bookmarking</li> <li>going back and forth in</li> <li>history SEO (since the content is basically not really connected)</li> </ul> <p>so here is the example:</p> <p>index.html</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;title&gt;Somebodys Website&lt;/title&gt; &lt;!-- JavaScript --&gt; &lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="pagecode.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="navigation"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" class="nav" id="link_Welcome"&gt;Welcome&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" class="nav" id="link_Page1"&gt;Page1&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="content"&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>pagecode.js</p> <pre><code>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; } } </code></pre> <p>Welcome.html</p> <pre><code>&lt;b&gt;Welcome&lt;/b&gt; &lt;br /&gt; To this website.... </code></pre> <p>So as you can see, I'm loading the content based on the IDs of the links in the navigation section. So to make the "Page1" navigation item linkable, i would have to create a "Page1.html" file with some content in it.</p> <p>Is this way of loading data for your web page very wrong? and if so, what is a better way to do it?</p> <p>thanks for your time</p> <p>EDIT:</p> <p>this was just a very short example and i'd like to say that for users with javascript disabled it is still possible to provide the whole page (additionally) in static form. e.g.</p> <pre><code>&lt;li&gt;&lt;a href="static/Welcome.html" class="nav" id="link_Welcome"&gt;Welcome&lt;/a&gt;&lt;/li&gt; </code></pre> <p>and this Welcome.html would contain all the overhead of the basic index.html file. By doing so, the ajax using version of the page would be some kind of extra feature, wouldn't it?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload