How to show Ajax requests in URL?

by

For the demo linked in your question, achieving that functionality is actually really simple – as it doesn’t use any AJAX at all (when you start to add AJAX to the mix, it get’s more difficult – explained later). To achieve that functionality you would; upgrade your links to use hashes, then bind into the hashchange event. Unfortunately the hashchange event is not cross-browser compatible, though luckily there are many “history/remote plugins” available – our preferred one over the years has proven to be jQuery History, it’s open-source, got great support and is actively developed :-).

Although, when it comes to adding AJAX functionality to the mix like such sites as Facebook, WBHomes and Balupton.com then you will start to face a whole series of seriously difficult problems! (I know as I was the lead architect for the last two sites!). Some of these problems are:

  • How to gracefully and easily upgrade certain internal links to use the History and AJAX functionality, and detect when the hash has changed? while keeping other links working just like before.
  • How to redirect from “www.yoursite.com/myapp/a/b/c” to “www.yoursite.com/myapp/#/a/b/c”? and still keep the experience smooth for the user such that the 3 necessary redirects are as smooth as possible.
  • How to submit form values and data using AJAX and update the hash? and vice versa if they don’t support Javascript.
  • How to detect which particular area of the page the AJAX request is wanting? Such that subpages are displayed with the correct page.
  • How to change the page title when the AJAX state changes? and other non-page content.
  • How to perform nice intro/outro effects while the AJAX state loads and changes? such that the user isn’t left in the dark.
  • How to update the sidebar login info when we login via AJAX? As obviously we don’t want that login button up the top left to be there anymore.
  • How to still support the website for users that do not have JS enabled? Such that it gracefully degrades and still is indexable by Search Engines.

The only open-source and reliable project I know of which tries to solve all those extremely difficult problems mentioned has proven to be jQuery Ajaxy. It’s effectively an extension to the jQuery History project mentioned before, providing a nice elegant high level interface to add AJAX functionality to the mix to take care of those difficult problems behind the scenes so we don’t have to worry about them. It’s also the chosen solution used in the last few commercial sites mentioned earlier.

Good luck, and if you have any further questions then just post a comment on this answer and I’ll get to it asap 🙂

Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js is now the sucessor to jQuery History and provides cross-browser compatibility for the HTML5 History API and an optional hashchange fallback for HTML4 browsers. jQuery Ajaxy will be upgraded for History.js

More Related Contents:

  1. How do I post multiple parameters to a URL
  2. Can anyone help me what is wrong in this code ajax using with php? [closed]
  3. How can I detect changes in location hash?
  4. Send JavaScript variable to PHP variable [duplicate]
  5. Laravel csrf token mismatch for ajax POST Request
  6. Redraw google chart based on user input via AJAX request
  7. Form submit with AJAX passing form data to PHP without page refresh [duplicate]
  8. Using Jquery Ajax to retrieve data from Mysql
  9. How to avoid echoing character 65279 in php?
  10. Sending JSON to PHP using ajax
  11. Ajax LARAVEL 419 POST error
  12. How to populate second dropdown based on selection of first dropdown using jQuery/AJAX and PHP/MySQL?
  13. Why are $_POST variables getting escaped in PHP?
  14. Resize iframe height according to content height in it
  15. .htaccess RewriteRule to preserve GET URL parameters
  16. php get url of redirect from source url
  17. Ajax File Download using Jquery, PHP
  18. Populate another select dropdown from database based on dropdown selection
  19. Sending images from Canvas elements using Ajax and PHP $_FILES
  20. Who Add “_” Single Underscore Query Parameter?
  21. PHPExcel download using ajax call
  22. Dynamic shipping fee based on custom radio buttons in Woocommerce
  23. Do AJAX requests retain PHP Session info?
  24. Insert data through ajax into mysql database
  25. Call PHP function from jQuery?
  26. Jquery AJAX post to PHP
  27. PHP .htaccess -> pretty url (in reverse)
  28. PhP Upload progress in PhP 5.4 is not working. Session variables not set
  29. How to Load Ajax in WordPress
  30. How can you use php in a javascript function [duplicate]

Leave a Comment