Ajax technology 3

Source: Internet
Author: User

Ajax application scenarios

1. Form-driven Interaction

For traditional form submission, after entering the content in the text box, click the button. After the background processing is complete, the page is refreshed, and then check whether the refresh result is correct. With Ajax, after clicking the "sunmit" button, asynchronous processing is performed immediately, and the updated results are displayed quickly on the page. There is no problem with refreshing the entire page.

2. Deep tree navigation

In-depth cascading menu (tree) traversal is a very complex task. using JavaScript to control the display logic, loading deeper data with Ajax latency can effectively reduce the burden on the server.

 

Most of the previously processed cascading menus are as follows:

To avoid page overloading caused by each menu operation, instead of calling the background every time, all the data in the cascading menu is read at one time and written into the array, then, you can use JavaScript to control the presentation of its subset projects based on your operations. This solves the problem of operation response speed, no page overloading, and frequent requests sent to the server, however, if you do not operate the menu or only operate a part of the menu, a part of the read data will become redundant data and waste your resources, especially when the menu structure is complex and the data volume is large (for example, the menu has many levels and each level of food has hundreds of projects), this disadvantage is even more prominent.

If Ajax is applied in this case, the results will change:

On the initialization page, we only read and display all the data of the first level, ajax is used to request all data in the level-2 sub-menu of the current level-1 project to the background. If you continue to request an item in the level-2 menu that has already been displayed, then, request all data of all level-3 menus corresponding to the level-2 menu items to be operated, and so on ...... In this way, there will be no data redundancy and waste, reducing the total amount of data downloads, and you do not need to reload all content when updating the page, only the part to be updated can be updated. Compared with the background processing and reload method, the user wait time is shortened and the resource waste is minimized.

3. fast communication and response between users

When many people participate in the discussion, the most unpleasant thing is to let the user refresh the page over and over again to know if there is any new discussion. New replies should be shown as quickly as possible, and Ajax is the best choice to free users from the refreshing of distraction.

4. Irrelevant scenarios such as voting and yes/no

In a scenario like this, if the submission process takes 40 seconds, many users will ignore the past and will not participate, but AJAX can control the time within 1 second, so that more users will join in.

5. Data Filtering and data manipulation scenarios

Use filters for data, sort by time, or sort by time and name, and switch filters. Javascript should be used for any scenario requiring highly interactive data manipulation, rather than a series of server requests. After each data update, it takes a lot of time to search for and process the data. Ajax can accelerate this process.

6. common text input prompts and Automatic completion scenarios

In the text box and other input forms, the input prompt or automatic completion can effectively improve the user experience, especially when the automatically completed data may come from the server, Ajax is a good choice.

Ajax not applicable scenarios

1. Some simple forms

Although form submission can get the greatest benefit from Ajax, a simple comment form rarely gets significant improvements from Ajax. Ajax is not helpful for some forms that are rarely used.

2. Search

Some search engines that use Ajax, such as start.com and live.com, do not allow the browser's back button to view the results of the previous search. This is intolerable for users who have developed the search habit.

Now, Dojo uses IFRAME to solve this problem.

3. basic navigation

It is a bad idea to use Ajax for site navigation. Why don't we put the time on making system programs better?

4. Replace a large amount of text

AJAX can be used to partially refresh the page. But if every part of the page changes, why not re-create a server request?

5. Rendering operations

Ajax looks like a pure UI technology, but in fact it is not. It is actually a technology for data synchronization, manipulation, and transmission. It is a good idea to not use ajax to control page rendering for maintainable and clean web applications. Javascript can easily process xhmtl/html/DOM, and use CSS rules to express data display.

 

Problems

1. The javascript-based Ajax engine makes JavaScript compatibility and debugging a headache;

2. Why is the refreshing and reloading of Ajax easy to disturb users because the page changes are not as obvious as refreshing and reloading? D? D. the user does not know whether the current data is new or updated. The existing solutions include: the relevant location prompts, data update areas are designed to be obvious, and user prompts are given after the data is updated;

3. The intermediate process cannot be bookmark. Solution: googlemaps provides a "link to this page" solution on the page. In addition, you can add invalid? ^ Mark, but not verified.

Ajax framework

  • DWR-web remoting
  • Buffalo-web remoting (based on prototype)
  • Prototype-js oo Library
  • Openrico-js UI component (based on prototype)
  • Dojo-js library and UI component
  • Qooxdoo-js UI component (C/S Style)
  • Yul-js UI component

Web remoting-DWR vs buffalo

DWR and buffalo are both web remoting frameworks, with the following differences:

  • DWR uses a custom simple text protocol, while buffalo uses the burlap protocol. Therefore, Buffalo resolution of large data volumes may be slow, but it can be applied to a variety of servers and clients, and the burlap protocol's integrity and supported data types are more abundant.
  • Buffalo is based on prototype. If your Ajax application is based on prototype, you can reduce the bandwidth for repeatedly loading prototype and obtain a fairly consistent programming concept.
  • The server implementation of DWR is better than that of buffalo.
  • DWR is more common and widely used, while buffaloo is written by Michael in China and rarely used by users (less famous)
  • We recommend that you use buffalo, which is relatively easy to use. However, the server functions need to be improved.

Javascript Component Library-prototype vs qooxdoo vs dojo vs Yul

  • Prototype is a very elegant JS library that defines JS object-oriented extensions, Dom operation APIs, events, and so on. There are also Rico/script. aculo. US implements some JS component functions and effects (but it is not perfect yet). With prototype as the core, it forms a variety of peripheral JS extension libraries, it is a promising underlying JS framework and is recommended for prototype and Rico/script. aculo. A special feature of us is that it is very easy to learn and use, and the threshold is very low. It is often done by one or two lines of JS Code. It is also an Ajax JS library integrated with ror.
  • Qooxdoo is a powerful JS component library that completely imitates GUI components of the Windows operating system. The feature is that the page is not constructed through regular HTML, and the Web GUI is constructed using Js in a programming method similar to VB/Delphi, it is suitable for intranet-oriented C/S-style Web applications, rather than Internet-oriented interface-changing applications. A major selling point of qooxdoo is that qooxdoo will provide a formdesigner ide that automatically generates C/s style Web page JS Code by visual drag-and-drop design in the IDE. Qooxdoo has the disadvantage that JS files are too large and exceed kb. The initial download is slow and is not suitable for Internet consumer websites.
  • Dojo is a well-developed JS library in all aspects, including JS language extensions, tool libraries in all aspects, and a relatively complete UI component library, it is also widely used in many projects. Its UI component is characterized by adding tags to HTML tags, rather than generating them by writing JavaScript, the dojo API imitates the Java class library organization. The advantage of dojo is that the Library is quite complete and the development time is relatively long. The disadvantage is that the file size is also relatively large, more than 200 kb, and the initial download is quite slow. In addition, the usage of the dojo class library is not so easy, at least it makes me feel very clumsy, especially it is more difficult to use than prototype.
  • Yul is the recently released Ajax Component Library of Yahoo. It is also a comprehensive JS library that covers all aspects, from tool library to communication to UI components. Yul's advantage lies in its comprehensive documentation and Yahoo support. The disadvantage is that the library is not complete yet and its functions are not powerful.


 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.