AJAX design pattern: How to build a refresh and brushless Newest Application

It's also the title of an opening mouth! Since it is a "no refresh" application, why does it mean a "no refresh" application? Not at all --

Problem

As we all know, the so-called AJAX-based "no refreshing application" generally refers to the use of XmlHttp components in WEB applications to implement a certain amount of no refreshing page Switching Based on JavaScript background asynchronous data transmission, to replace the traditional HTML-based link-based "refresh" Page switch.

This refreshing effect is really cool, but developers who love to think about it will find the biggest problem after trying some time: Since I am not refreshing, for a set of refreshing functions, that is, starting from opening a webpage, all results are transmitted in the background of the current page using JavaScript asynchronous call XmlHttp to pass data and replace the display content on the current page. There is no traditional "refresh" Page switch. However, if a page is paused due to network issues and needs to be refreshed manually, or you want to manually refresh the page to obtain updated data, or even if you accidentally press F5 or the Refresh button on the browser, what will happen? By the way, this is the concern raised by the title of this article. If there is no special processing, after the page is manually refreshed, the content on the page will naturally return to the content originally displayed, rather than the data we actually wanted before it was manually refreshed. Is my heart suddenly sulking again? :) Not required ~~

Analysis

Of course, there are solutions to the above problems! For example, the famous AJAX application website ~~ No? Did you find any xuanjicang? By the way, it is "#"! We can see that after every refreshing page switch, the content in the address bar of the browser changes. What is it? The changed content is added after the same URL (for BackBase, it is usually http://www.backbase.com/) and # xxxx is added. What is this? Readers familiar with HTML should think of it. When will this "#" appear? By the way, it is the most cute and familiar to us. The originator of our web HYPERLINK "<a> ".

I don't know how many readers remember the original use of "#", that is, the internal positioning function of the current page. If you forget the notebook, you can try to build the following HTML as test.html to see the simple effect.

<A name = "top"> top </a>
<A href = "# bottom"> go to bottom </a>
<Div style = "height: 800px"> & nbsp; </div>
<A name = "middle"> middle </a>
<A href = "javascript: var tmp = document. location = 'test.html # top '"> go to top </a>
<Div style = "height: 800px"> & nbsp; </div>
<A name = "bottom"> bottom </a>
<A href = "test.html # middle"> go to middle </a>

If the inner name after "#" specified in href is not defined on the specified page, the browser simply locates the top of the specified page. In addition to being transferred in the form of a link, you can also rewrite the order by modifying document. location = 'test.html # top. The page jumps like this because it is still in the current page. Therefore, the page will not be physically refreshed. OK. This is our solution for implementing "refresh and refreshing Applications.

Mode

As a design pattern, the "refresh and no refreshing Applications" Scheme Based on # links is equally applicable to any AJAX framework or directly using unencapsulated XmlHttp. This requires us to use the # tag to change the url address of the current page when executing any AJAX callback. Therefore, when the user refreshes the page, because the # parameter in the url is different, you can parse and judge the current # parameter during refresh to get the "Refresh without refreshing" effect.

Digress

Today, my lightweight AJAX & JSRS framework AjaxHelper is slightly modified and encapsulated, and a Flat version that supports ASP, PHP, JSP is also provided, interested friends can download in http://ilungasoft.com.

Also, I would like to talk about how to try Atlas. In general, what we really expect is the support for AJAX-effect Web Control Data Binding and events, but now everything needs to be manually input, and XML of internal migration in HTML, it is not convenient to use. We hope that visual Wizard like other Web controls can be provided in the official version. In addition, I don't feel much essential improvement than Ajax. Net in general, and I'm not necessarily more flexible than AjaxHelper.