ajax| Standard | program | browser
Case Study: Ajax forums with back buttons and deep links
The Backbase Ajax engine is a sophisticated, feature-rich Ajax package. Support for all traditional web-available features is one of the advantages of backbase.
Backbase devnet contains information about Backbase and Ajax that are provided for developers. And the developer Forum is part of the devnet.
Backbase Web applications, including devnet and its discussion forum, are built using Backbase. To demonstrate the richness and ease of accessibility of the Forum, we will step through the typical use cases of the forum:
- Developers browse the forums to read different topics.
- The developer copies the URI of the topic, pastes it into an e-mail message, and sends it to a friend. This friend copies the URI from the email to a browser and opens the same forum topic.
- Developers click the Back button to read the previous topic.
Forum Interface Status After several user interactions
Let's take a look at the status of the Forum interface and the corresponding URI in the address bar after developers came to the Bxml forum and checked the posts named "Issue with vertical and horizontal menus."
Forums and postings are selected and highlighted. The subject of the discussion is displayed for reading. All relevant information is included in the fragment identifier of the URI. Behind the #, we see the complete state for bookmarks and deep Links: "Forum" means that developers are browsing the Forum section of the Web site; "forum=2" indicates that the Bxml forum is currently selected, and "thread=211" records the currently selected topic. Finally, "[5]" in square brackets represents the processing of multiple back and forward steps that are combined with bookmarks.
Figure 3. Initial state of forum with Ajax URI (click picture to view larger image)
By visiting the Backbase forum, you can see how the URI is updated with each state change, even if the update is handled at the client or involves partial page updates through the XMLHttpRequest object.
recreate the status of the Forum interface within a new browser window
Now let's take a look at what happens when a developer sends the current URI to a friend. The friend opened the URI in a browser window, expecting to see the same interface state. The state needs to be recreated in a new browser. For this article, I copied the URI from a Firefox window into a newly opened IE window.
Entering a URI in the address bar will first produce a server-side request. Using the "#" section, the backbase.com is loaded, and in this process the Backbase Ajax engine is initialized. The active Backbase engine reads the part of "#" in the URI. With this information, the Backbase engine will go to the Forum (Forum) section and select the No. 211 topic in the Bxml Forum (id=2) to create the appropriate status. No need to refresh the page, just load the additional content from the server and update the interface partially in the client, and it can be implemented.
In subsequent browser capabilities, the new URI is added to the browser history, which can be used either in the address bar or as a deep link. ' [0] ' means there is no previous state that can be returned (using the Back button).
Figure 4. Recreate the forum status in a new browser window (click picture to view larger image)
Forum interface Status After the user clicks the back button
The first step is to examine how URIs are updated as the interface state changes triggered by user interaction. Below we will see the reverse: The user requests a new URI and the corresponding state is recreated.
By clicking the Back button, the user asks to return to the previously read page. The browser responds to the Back button by retrieving the previous URI from the history stack. The Backbase Ajax engine will monitor this change, read the new URI from the history record, and go to the 192th topic in the "Forum" section to select the Bxml Forum (id=2) to reconstruct the corresponding state. The new URI will appear in the address bar as described above.
Here, our case study is over.
Figure 5. Forum status after clicking the Back button (click picture to view larger image)
Ajax programs do need a back button!
In the past few years, Web developers have chosen to build the Web interface because of market demands for "ease of arrival" and their willingness to accept "feature-rich" sacrifices. However, the widespread attention given to the current Ajax situation clearly shows that this is actually only temporary. The market now strongly requires web programs to be as rich in functionality, interactivity, and responsiveness as desktop applications.
However, end users have become accustomed to the way web interacts. Using common patterns to interact with any web interface can improve productivity. End users expect the back/forward button and Refresh button to work correctly, create bookmarks and deep links, view source files, search the page using Find, and search engines can index AJAX applications.
The Ajax community must know: the technology that provides support for the back/forward buttons and other traditional browser features in AJAX applications is available as described in this article. While it's not easy to implement and increases costs, the success of the Ajax community requires the building of traditional browser capabilities into AJAX applications. So I strongly appeal to Ajax developers to build AJAX applications that support these features!
Concluding remarks
In this article, I highlighted why AJAX applications need to conform to traditional web interactions and provide traditional web-available functionality. I am sure that you can program these features into an AJAX application by creating an "Ajax URI" that contains client state information in the fragment identifier.
Reading the relevant code, you will find it difficult to implement a complete generic solution because the state processing code is often very important, plus the often incompatible browsers. The Backbase Ajax engine provides a solution to the problem by providing the required functionality in the Out-of-the-box scenario.
- Ajax: A new way to build Web apps
- Discussion on the error handling mechanism of AJAX (2)
- Discussion on the error handling mechanism of AJAX (1)
- First experience. NET Ajax Brushless New technology
- A brief analysis of Ajax development Technology in Rails system (4)
