How to show Ajax requests in URL?
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
Ajax request url and display response in a div is not working?
Adding the JSON property name you're trying to insert into the HTML should only insert that value. For example, in your code below, I added the "sentence" property in "response.sentence".
$(document).ready(function(){
$('#buttonClick').on('click', 'button',function(){
$.ajax('http://ShakeItSpeare.com/api/sentence', {
success: function(response){
console.log(response)
//changed original code from ".html(response)" to ".html(response.sentence)"
$('.screen').html(response.sentence).fadeIn();
}
})
});
});
Working code pen: Working Codepen
Detect request url of an ajax request
After searching a lot this is the best way to do this. Though only tested on chrome.
(function() {
var proxied = window.XMLHttpRequest.prototype.open;
window.XMLHttpRequest.prototype.open = function() {
arguments[1] = arguments[1] + '&debug=1';
console.log( arguments[1] );
return proxied.apply(this, [].slice.call(arguments));
};
})();
How do I check the AJAX request in Chrome
Follow the steps
Open developer console by pressing
CTRL + SHIFT + I
and go toNetwork
tab.Click on
XHR
tab( uncheck all other tab to see only ajax) and selectURL
you want to check(left side).Then You can inspect
Header
,Cookies
,Response
etc from respective tab(right side)
Google chrome:
Firefox:
Access the URL of an jQuery Ajax Request in the Callback Function
Set a break point in success method, then watch
this.url
is the real url for the request.
How to make Code Igniter ajax request URL appear to browser URL.
There are loads of articles, even here in SO, that explain how to change the url of the adress bar wihtout refreshing the page( while performing an ajax call for instance). The base idea is to use HTML5 History API (the pushState()). Something like:
var ajaxUrl = '<?php echo base_url(); ?>' + 'main/userinfo/' + gender + '/' + age_min + '/' + age_max;
$.ajax({
url: ajaxUrl,
dataType: "JSON",
type: "POST",
success: function(retdata) {
window.history.pushState({"html":retdata.html,"pageTitle":retdata.pageTitle},"", ajaxUrl);
});
There is also a polyfill for this libaray called history.js for old browsers.
ajax GET request does not show params in the URL
What you want can be done in modern browsers like Chrome, Safari, FF4+, and IE10 using window.history.pushState.
A good article is here http://spoiledmilk.com/blog/html5-changing-the-browser-url-without-refreshing-page/
You would need to add something like this into your code.
window.history.pushState(“object or string”, “Title”, “/new-url”);
Also if you dont want the user to be able to navigate back then use replaceState instead
window.history.replaceState(“object or string”, “Title”, “/another-new-url”);
Related Topics
How to Fake $_Server['Remote_Addr'] Variable
PHP Login System: Remember Me (Persistent Cookie)
PHP Mail() Function on Localhost
MySQL Datetime Fields and Daylight Savings Time - How to Reference the "Extra" Hour
How to Replace Different Newline Styles in PHP the Smartest Way
When to Use Static VS Instantiated Classes
Date Difference in PHP on Days
How to Add Custom Stock Status to Products in Woocommerce 4+
PHP Variables in Anonymous Functions
Display Numbers With Ordinal Suffix in PHP
How to Remove Both .PHP and .Html Extensions from Url Using Nginx
PHP Foreach Pass by Reference: Last Element Duplicating (Bug)
PHP: Access Array Value on the Fly
PHP Library For Parsing Xml With a Colons in Tag Names