Combination of ajax php development back, forward and refresh (1)

Introduction

Part 2 describes how to use Sajax, PHP, and JavaScript to develop basic albums. In the process of building a history stack for an application, we will rely on the Client technology and directly combine it with Part 1 of the Code. This article assumes that the reader understands JavaScript and browser cookies.

Save the status in the browser

When surfing the Internet, it is always from one page to another, from one site to another. In this process, the Web browser faithfully records the historical records where you have been, and creates a breadcrumbs digital track, along this track, we can return to the starting point step by step. The back button allows you to return to the position before the previous action. In this sense, it is the Undo button on the Web.

Web is a page-based media. The back and forward buttons in the browser toolbar direct the browser from one page to another. When Macromedia Flash went viral, developers and users found that Rich Internet applications (RIA) broke this pattern. Users can browse on several sites, and then log on to a Flash-based website to spend several minutes on it. When you click the back button, the game is over. The user did not return to the previous Flash site and did not know where it was.

This is also the case for an Ajax-based website-RIA. Websites that allow users to interact with a page multiple times are vulnerable to backend buttons or any history buttons (in this case ). The forward and reload buttons are the same as the Back buttons. The built-in internal history record mechanism of Web browsers is an unavoidable problem. For security reasons, developers cannot tamper with browser history or any related buttons. There are also availability issues. Imagine how confused the user would be if a mysterious warning prompt pops up or the user is sent to a new website.

Build a history stack

Although browser history cannot be changed, you can build a historical record used in RIA by yourself. Obviously, it should be separated from the standard browser navigation tool to some extent, but as mentioned above, rich applications deviate from the standard mode of Web pages to some extent.

We will create a stack to manage the historical event records of the application, that is, store a list and add elements at the end of the table. The stack is used to store data in the order of the last-in-first-out (LIFO. Although the data at the top of the stack is not deleted during rollback, this model is very similar to our needs. In JavaScript, stacks can be managed using arrays.

There is also a pointer with the stack to indicate our current position in the stack. When we click in the application, the new event is pushed to the top of the stack and the Pointer Points to the last added element. When you click the back and forward buttons of the application, no new events are added to the stack. Instead, the stack pointer is moved. Think about what will happen in the history stack when you use the back button: the browser returns to the last view page, and the previously unavailable forward button suddenly becomes available. When you browse a new page, the forward button turns gray again. The elements saved late in the browser history will pop up the stack, and new events will be pushed to the top of the stack. We will reproduce this behavior in our own history stack.

Our goal is to create a set of available history buttons: Back, forward, and refresh, as shown in 1.