AJAX distinct web address

Question

AJAX distinct web address

Similar Query:
How does Facebook alter the source URL in the browser address bar?

Perhaps this question may seem trivial, and I apologize if it is basic, but I am uncertain about the correct terminology which has hindered my ability to find answers via Google.

I am interested in changing/modifying the current page's URL (specifically its GET variables) using AJAX. Initially, I didn't believe this was feasible, but it seems to be achievable on Facebook.

For example, when on my Facebook profile, the URL appears as follows:

Then, upon clicking the info link below my profile picture, it transforms into:

This transition occurs seamlessly without any visible page refreshes.

So, how is this phenomenon achieved?

javascript ajax facebook url

Answer 1

Answer №1

To my knowledge, it is not possible to alter the URL without refreshing the page, except by adding a hashtag anchor. You can achieve this using the location.replace method:

http://www.w3schools.com/jsref/met_loc_replace.asp

Updated based on @Crescent Fresh's suggestion

Another option seems to be available with HTML 5's history.pushState() (currently supported only by Webkit):

How does facebook rewrite the source URL of a page in the browser address bar?

Answer 2

To my knowledge, it is not possible to alter the URL without refreshing the page, except by adding a hashtag anchor. You can achieve this using the location.replace method:

http://www.w3schools.com/jsref/met_loc_replace.asp

Updated based on @Crescent Fresh's suggestion

Another option seems to be available with HTML 5's history.pushState() (currently supported only by Webkit):

How does facebook rewrite the source URL of a page in the browser address bar?

Answer 3

Answer №2

Modifying the page URL query-string requires a new request, but the fragment identifier (the part after the #) can be changed using javascript (Ajax).

You can utilize this feature by enabling ScriptManager's EnableHistory property.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" onnavigate="ScriptManager1_Navigate" />

and

protected void Button_Click(object sender, EventArgs e)
{
   //Do something.
   // ...

   //Remember the state.
   ScriptManager1.AddHistoryPoint("SomeState", "SomeStateValue"); 
}

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
  //Retrieve the state.
  String statevalue = e.State["SomeState"];
  // ...
}

Answer 4

Modifying the page URL query-string requires a new request, but the fragment identifier (the part after the #) can be changed using javascript (Ajax).

You can utilize this feature by enabling ScriptManager's EnableHistory property.

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" onnavigate="ScriptManager1_Navigate" />

and

protected void Button_Click(object sender, EventArgs e)
{
   //Do something.
   // ...

   //Remember the state.
   ScriptManager1.AddHistoryPoint("SomeState", "SomeStateValue"); 
}

protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
{
  //Retrieve the state.
  String statevalue = e.State["SomeState"];
  // ...
}

AJAX distinct web address

Answer №1

Answer №2

Similar questions

place nested components inside the cursor

Encountering an error message stating "Please enable JavaScript to run this application" when making React API calls after deploying a ReactJs app on the Firebase server

How can I use Ajax code to send data to a PHP page and receive the results as a JSON-encoded multidimensional array containing information on each item?

Explore the input field to find relevant information, triggering an Ajax PHP call that displays search results in a convenient dropdown

What is the best way to create an index for a user-provided value in a textbox

Employing Ajax long-polling to dynamically refresh content on my webpage by fetching data from an external API

Experiencing browser crashes following the incorporation of asynchronous functions into a JavaScript file. Seeking solutions to resolve this

Tips for configuring a file using javascript and angular.js

Transmit information using jQuery to an MVC controller

Retrieving a file from FormData using ExpressJS

Guide to retrieve the Last-Modified date using Javascript

Common mistakes encountered when utilizing webpack for react development

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

MySQL field being updated upon page unload

Is it possible to divide a column in an HTML table into two separate

identical remarks appear on numerous php websites

Arranging data structures in JavaScript: Associative arrays

What is the method for extracting latitude and longitude values individually from JSON data?

Having trouble with printing the $length variable? Attempting to input data from duplicated forms

Problem arises with chai-http middleware when employing dynamic imports in chai 5.1.1 version