Thinking in Ajax (2) -- Ajax-based Web Design

ArticleDirectory

• I. Ajax is most commendable for its Asynchronous interaction, rather than refreshing new content.
• 2. We recommend lightweight Web-based Ajax applications.
• Iii. MVC Architecture Design of AJAX

I. Ajax is most commendable for its Asynchronous interaction, rather than refreshing new content.

Many people are optimistic about Ajax's refreshing technology, so they agree that AJAX is used for refreshing. This recognition is wrong. What is refreshing? Without refreshing, the page does not need to be reloaded. What is Asynchronous interaction? Asynchronous interaction is a simple multi-thread process. When you read an article in a blog, you can also use ajax to submit a refreshing reply. Although Asynchronous interaction is refreshing, but the most important thing here is Asynchronization, that is, you can read the article while submitting your reply information to the server. Using this Asynchronization, You can grasp the essence of Ajax. In many cases, no refreshing is a visual experience presented to users, while Asynchronous interaction is behind the scenes, which leads to the misunderstanding of Ajax weights.

2. We recommend lightweight Web-based Ajax applications.

The famous image storage website, Flickr, uses ajax to become superb. I think that is because I think that Flickr is well aware of the advantages and disadvantages of Ajax, and firmly grasp the functional characteristics of its website. It is not because of Ajax, but because it drives technology first, integrating Ajax into websites provides better functional services for websites. For example, the Ajax technology is applied to modify the title and description of an image on the Multi-image list page or single-image details page in the Flickr, so that users do not need to jump to a separate editing page, after editing, click Save. Asynchronous interaction is also used for data submission. When a loading character is displayed on the page, other parts are not affected. This is a considerate service.

For example, Technorati, a tag-based professional blog search service provider, also uses Ajax. When searching for a tag, the dominant part of the page immediately displays the data entries found in all Technorati databases, two loading icons will be displayed on the left sidebar. After a while, the two loading icons will display the specific content, displays the images and bookmarks of the QR code associated with this tag (furl & Del. icio. US), because the two parts are taken from other websites, if the server obtains data first and displays the data to the page together, the network speed will slow down, the Asynchronous interaction mode of Ajax first displays local data immediately, and then the client goes to the console to access the QR code, furl, and Del. icio. US gets their data separately, which saves traffic bandwidth and does not affect user access speed.

Through the above two foreign websites that successfully applied Ajax, we found that they all use lightweight Ajax, that is, simple interaction and less data operations. This is also in line with the intention of Ajax, although www.backbase.com and bindows both have amazing performance in RIA, however, problems such as slow speed, poor search engine support, and high development difficulty still cannot satisfy users. Remember: The ultimate goal of AJAX is to improve user experience and facilitate user interaction, it is not technical.

Iii. MVC Architecture Design of AJAX

Many people think that applying Ajax in a mature framework will undermine the integrity of the framework. A common saying is that a Web application with a three-tier architecture destroys the MVC pattern. I will not talk much about MVC theory. The three classic layers and five lines are familiar to everyone. In Web applications, the browser/server's inherent disconnected Network Communication Mode for requests/responses determines that data update events cannot be actively sent to the view layer at the model layer, therefore, the classic MVC theory is slightly modified in common mature MVC frameworks: the model layer notifies the control layer after processing the business, and the control layer assumes the obligation to send data updates to the view. However, Ajax is inherently capable of listening. The onreadystatechange event That Ajax implements asynchronous response hasProgramEvent listening function. The MVC model implemented using Ajax is as follows:

The idealized design is as follows:

• File objects corresponding to Layer 3: view. jsp (view), Action. Do (Controller), model. Java (model)
• View. jsp is the interface you see and sends a request to action. Do asynchronously using the built-in Ajax object. Ajax. onreadystatechange starts listening.
• Action. Do receives the request sent from view. jsp (in the get or post mode), and sends the request to the corresponding business/data model. java.
• Model. java starts to execute business operations. After the execution is complete, directly view. the JSP page sends a data update notification. The notification message may be XML-encapsulated data, text, or HTML.CodeOf course, since MVC is used, we do not recommend that you use a model to send HTML code. We recommend that you use XML to encapsulate business data.
• Onreadystatechange of the Ajax object on the view. jsp page receives the data update notification, and uses Dom to update the page.

A typical MVC-based layer-3 interaction is completed with the preceding steps in one go. Of course, users who are familiar with MVC frameworks on the web, such as Java developers who are familiar with Struts may not be accustomed to sending data update notifications directly to the view at the model layer, so we can also change it, after the model layer service is processed, the update notification is sent to control first, and the view can also be notified by control.