StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>This is actually a very wide question, and i'll try to answer it a bit deeper.</p> <p><strong>There are some reasons to use a regular HTTP POST instead of Ajax if needed:</strong></p> <ol> <li><p>HTTP POST is a part of the HTTP 1.1 standard as specified by World <a href="http://www.w3.org/Protocols/rfc2616/rfc2616.html" rel="nofollow" title="Wide Web Consortium (W3C)">Wide Web Consortium (W3C)</a> and therefore works in <em>any</em> HTTP 1.1 compliant browser.</p></li> <li><p>Ajax requires JavaScript support. Even <em>if</em> your user's browser supports JavaScript, different browsers run JavaScript using different engines and you might experience browser specific errors.</p></li> <li><p>Ajax requires a whole different level of error handling.</p> <p><strong>Let me explain:</strong> When a user sends a POST request to your server and some error occurs (e.g. the connection is lost) the user will receive a fully visible error in the browser because the browser itself will notify the user something went wrong. When you use Ajax you have to write / implement all of this error handling yourself. </p> <p><em>Example:</em> User A is visiting your blog and wants to post a comment using Facebook OAUTH which you implemented on your blog. User enters a comment text in the comment field and presses the comment button and the result? <em>Nothing happens</em>. <strong>Why?</strong> There could be a multitude of reasons e.g. lost connection, unhandled content errors, server errors, compability errors, security errors like a missing/invalid server certificate, Facebook OAUTH communication error etc. </p> <p>Doing the same thing with a HTTP POST <em>will</em> result in an error that is visible to the user.</p></li> </ol> <p><strong>More generic Ajax / JavaScript issues</strong></p> <ol> <li><p>When loading a page using an HTTP request, it's visible in the browser when the page is loaded. Ajax is often loaded <em>after</em> the page loads and therefore, the browser does not notify the user that a resource is loading. </p></li> <li><p>If you load resources (e.g. blog posts) using Ajax, they will not be indexed by Google, because Google does not run JavaScript. Therefore, less people will find your site/content.</p></li> <li><p>Unresponsive Responsive design; Ajax heavy sites can be so CPU- and network traffic intensive that a page actually takes <em>a lot</em> longer to load than it would have taken using plain old HTML. </p></li> </ol> <p><strong>Unfortunately, a modern web site often really needs JavaScript. So, how to handle the above?</strong></p> <ol> <li><p>Use the right technique where applicable (<a href="http://en.wikipedia.org/wiki/KISS_principle" rel="nofollow">http://en.wikipedia.org/wiki/KISS_principle</a>)</p></li> <li><p>Handle errors.</p></li> <li><p>When POSTing using Ajax, give the user "tactile feedback" by showing loading animations if you expect the response from the server to take more than one second.</p></li> <li><p><strong>Unobtrusive JavaScript</strong>.</p> <p>Unobtrusive JavaScript allows users that do not have JavaScript enabled to use at least the basic functionality on your site. </p> <p><strong>Example:</strong> User A enters your blog with a Non-JavaScript Browser and clicks the comment button. A popup window appears where User A enters her comment and makes a regular post to the server and is redirected back to your blog post. User B enters your blog with a JavaScript enabled browser. Right under your blog post, there is a comment field and a submit button. User B enters her comment and clicks the submit button and an Ajax request is sent to the server. The page is updated with the posted comment and the user never have to be redirected.</p> <p>Basically, unobtrusive JavaScript is possible by always loading your regular plain old HTML page. After loading the page, you run a JavaScript replacing your html elements and links with JavaScript anchors and elements. This way, a browser that does not allow JavaScript execution can use your site.</p></li> </ol> <p><strong>Resources:</strong></p> <p>Unobtrusive JavaScript</p> <ul> <li><a href="http://www.ibm.com/developerworks/library/wa-aj-unobtrusive/%2F&ei=deUzUfekB6OH4AS09IFo&usg=AFQjCNGZwD9bsz52xK3zGpDQTjyGzO4EHQ" rel="nofollow">http://www.ibm.com/developerworks/library/wa-aj-unobtrusive/%2F&ei=deUzUfekB6OH4AS09IFo&usg=AFQjCNGZwD9bsz52xK3zGpDQTjyGzO4EHQ</a></li> <li><a href="http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-technique/" rel="nofollow">http://www.simonecarletti.com/blog/2010/06/unobtrusive-javascript-technique/</a></li> <li><a href="http://www.searchenginepeople.com/blog/unobtrusive-javascript.html" rel="nofollow">http://www.searchenginepeople.com/blog/unobtrusive-javascript.html</a></li> <li><a href="http://en.wikipedia.org/wiki/Unobtrusive_JavaScript" rel="nofollow">http://en.wikipedia.org/wiki/Unobtrusive_JavaScript</a></li> </ul> <p>Ajax error handling</p> <ul> <li><a href="http://www.unseenrevolution.com/jquery-ajax-error-handling-function/" rel="nofollow">http://www.unseenrevolution.com/jquery-ajax-error-handling-function/</a></li> <li><a href="http://enterprisejquery.com/2010/09/creating-an-ajax-component-handling-errors-and-loading-notifications-with-publish-and-subscribe/" rel="nofollow">http://enterprisejquery.com/2010/09/creating-an-ajax-component-handling-errors-and-loading-notifications-with-publish-and-subscribe/</a></li> <li><a href="http://aaronsaray.com/blog/2010/08/24/how-to-handle-ajax-errors-with-jquery/" rel="nofollow">http://aaronsaray.com/blog/2010/08/24/how-to-handle-ajax-errors-with-jquery/</a></li> </ul> <p>I hope this answers your question!</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