Time to use Ajax in applications

Time to use Ajax in applications Make careful decisions to avoid common traps and enhance user experience.

Document options <Tr valign = "TOP"> <TD width = "8"> </TD> <TD width = "16"> </ TD> <TD class = "small" width = "122"> <p> <SPAN class = "Ast"> the required JavaScript document options are not displayed </span> </P> </TD> </tr> Print this page Send this page as an email Discussion Original ENGLISH Level: elementary Jesse Skinner, Web Developer, freelance March 18, 2008 Ajax has changed the way web applications are written. Learn how to use ajax to improve web sites and avoid poor user experience. Encounter Ajax When the first time a technology-enhanced application was developed using Asynchronous JavaScript + XML (Ajax) on the Internet, web developers began to respect it. Overnight, the potential value of web sites and Web applications seems to be endless. In the past, many developers and users thought that web sites and Web applications were just a rough, ugly, and complex version of their desktop applications. But after learning about Ajax-enhanced applications and web sites, developers and users are aware that what they can do in browsers is beyond imagination. With the ability of today's Web browsers to process advanced Document Object Models (DOM) scripts and Cascading Style Sheet (CSS, you need to create an interface that can be changed, updated, and responded immediately through a conversation with the background server. Ajax has successfully completed this task. However, sometimes the user experience is unsatisfactory due to too much excitement. The web-based game rules have changed. Many developers can use ajax to complete their work as soon as they have the opportunity. Many sites have even abandoned the hypertext markup language (HTML) and switched to completely using JavaScript to build sites. Innovation and predictability Ajax makes web innovation possible, but it also increases the possibility of violating the user's will. Remember, while adding ajax to a site, you are also responsible for fixing any problems caused by the site. If you ask a general web user what Ajax technology is like, he or she may just look at you with a sigh of relief. Many users do not care about the website construction technology they use. They are more interested in a good user experience, that is, they can do the necessary work as easily as possible. As for the specific structure of the application, let it stay in the background safely. This article analyzes Ajax capabilities and discusses under what circumstances Ajax will do more harm than good. I hope you can get inspiration from this, use Ajax in a way you never imagined, and you will not be crazy about building a popular site. Back to Top Get rid of refresh Nothing is more annoying than Refreshing Web pages constantly. For users waiting to see if they have won the auction, watching the game score, and paying close attention to the weather forecast, AJAX can greatly improve the user experience for these types of web pages. Before the emergence of Ajax technology, you can use simple JavaScript code to automatically update web pages. However, to update a javascript web page, you must refresh the entire page. This is why the emergence of Ajax technology in Web applications has such a significant impact on the web. When you use the original method to refresh the page, the user cannot interact with it. The Ajax page can beAsynchronous location(A in Ajax) requests data from the Web server, and the user cannot notice that the background is processing transactions. After the data is returned, only some pages are updated. Back to Top Web does not need to be real-time Some pages of auto-updates help users get rid of the refresh experience, but it is a disaster for the Web server architecture. If a web site has only 1,000 visitors a day, the web server may be able to cope with it. However, if each web page of the site is refreshed using Ajax every second and each user opens the page for an average of 10 minutes, the page requests of the site will surge to 600,000 times every day. To avoid this situation on the Web server, developers must minimize the update frequency. If you know that the information is updated every few minutes, you can try to adjust the Ajax request to the same frequency. If the information is updated once per second, you can consider extending the Refresh Interval (for example, every 5 or 10 seconds) without compromising the user experience ). You can also provide a simple Refresh link to trigger Ajax calls only when the user needs it. This is similar to the "refresh" button of the browser. However, if you only need to obtain a small amount of data, this method is faster and requires less Web servers. Back to Top Small changes, great impact The advantage of Ajax lies in the small modification and updating of pages. Once upon a time, even minor updates required refreshing the entire web page. With Ajax and JavaScript code, pages can be updated in almost real time. For example, you can update the comment list, display a note about the latest entry, or display the progress bar in real time when adding a new comment to the page. The key goal of developers should be to increase availability, that is, to facilitate users. Users may feel that they are wasting time while waiting for page responses. Before Web applications introduce Ajax, many users prefer to use desktop applications because desktop applications are faster, rapid response. Ajax enhancement eliminates the waiting and rolling time, and enables the web application to respond to the level of many traditional desktop applications. Back to Top Big changes, catastrophic If you want to make small changes to the page to enhance the user experience, such large changes (such as almost or completely replacing the content of the entire page) may make users feel overwhelmed and lead to bad results. If the site uses ajax to update too quickly, you may thinkBackAndForwardButton and bookmarks are faulty. (Like pure Ajax sites, flash sites are easy to make people feel this way .) You can clickBackButton to return to the previous page or previous view. What is worse for the user experience is that when the user clicksForwardThey did not return to the view they just viewed, but returned to the initial page, just like refreshing the Ajax site. If the user loads a page temporarily and returns to the site he just viewed, the user may be disappointed if the page has changed. Unfortunately, the browser is likely to load the page into the initial state, and all changes are often lost. Similarly, if you want to share a specific view or page of a website with others, they believe that they only need to copy the URL from the browser and use it (this is true currently ). If the page content changes too much and the user feels like a new page, it is better to send a new page directly to them. However, if developers really need to use ajax to change the page content, it is best to use the Ajax history tool to storeBackAndForwardButton and bookmarks. These tools use the hash value (for example, "# tab3") to change the URL without loading a new page. When you clickBackOrForwardButton, or when loading a URL to add bookmarks, the JavaScript code will view the hash table and regenerate the view you want. Of course, this is only useful for browsers that support the Javascript language. Back to Top Release web page information You may have noticed that the Internet has another important feature: It seems that you can access an unlimited amount of information without copying it on a local machine. With Ajax, you can build an interactive interface that connects to a large database (no matter which server it is located in the world) to achieve unprecedented functionality. Google maps is one of these Ajax applications, which embodies the imagination of developers and users. On this Web site, you can browse Earth maps and satellite photos without refreshing the page. Releasing data in this way may be the most valuable potential use of Ajax. Before the advent of Google Maps, map websites have been around for many years, but Google maps is different because Ajax allows unprecedented interfaces. On a traditional MAP website, you need to click a link to move the view to the west. A new page is displayed, which contains the generated adjusted map. Therefore, you must wait for the page to be cleared, load it again, and then scroll to the map. This bad interface is caused by the fundamental limitations of the web. The only way to obtain web server data is to access a new URL and then download a new web page containing new content. If you want to view any minor changes to the current view (such as moving a little westward), you must load the entire new map. Because Ajax allows asynchronous data retrieval in the background, you do not need to clear or load the entire page. You only need to load map data and image fragments. You can also generate a URL for a specific map view, but this is no longer the only way To load more information. You can use web pages as interfaces for data in many other scenarios. Consider a paging scenario, for example, when you view search results that are divided into multiple pages. User interface controls (suchPrevious PageAndNext Page) You do not need to load the entire web page every time. With Ajax, You Can asynchronously load the results of the next page and update the page accordingly. You can even pre-load the next page to display it immediately when you want to view it. By separating documents and information, you can speed up and save bandwidth. In most cases, the raw data in the XML or Javascript serialized object notion (JSON) format is smaller than the HTML representation of the web page, in particular, the rest of the page (such as the title, navigation, and footer are particularly obvious ). Back to Top Leave the information on the web page Ajax opens the door to getting raw data from the Web server, but it does not mean that you no longer need older web pages. It is very important for a user to access a data segment through a URL, because it can be shared with others. Ajax also allows search engines to crawl your site. The optimization of site content for search engines is not only to attract users to sites, but also to availability. You may find most websites using the search engine, or you may only use one or two pages of most websites. If the content provided by the site is hidden behind the Ajax technology, the search engine will not be able to search, and most people in the world will not be able to find your site. Therefore, it is very important to allow the site information to be browsed through the traditional HTML page, even if the site information can be browsed through JSON or XML. Back to Top AJAX can save the site The Web user interface allows users to save data on the Web server or easily create, update, and delete entries. Of course, these tasks can always be implemented in HTML format, but AJAX can send data asynchronously in the background more conveniently. Imagine using Ajax and JavaScript code to simplify adding, editing, and deleting content, making it easier to manage the entry list. You can also enhance the addition of a single entry. For example, to write a message on the message board, you only need to use ajax to send a message to the server and then use the DOM script to add the message to the page immediately. Back to Top AJAX can destroy websites Most users do not want the web site to use Ajax. Many users have never heard of Ajax. Therefore, when designing pages using Ajax, make sure that the program can communicate with the target user. For example, if Ajax is used to submit a form or send data to the server, the application must communicate with the user in the following actions: Sending or retrieving data. This action is often indicated by a dynamic image, such as a rotating pointer, or by the phrase "loading ..." Or "Saving ..." . When data is successfully sent or retrieved. The "success" message can be displayed, or the user's attention can be attracted to a specific part of the page through javascript animation. An error or timeout occurs during dialog with the Web server. An explanation message is usually provided, prompting the user to try again. If the application cannot communicate, the user will not know what happened. If you clickForm submitWhen the button does not occur, the user will think that the web site has a problem. If the application cannot prompt that an error occurs, the user will generally think that their operation is successful. If it is not successful, this assumption may lead to extreme disappointment, especially when it takes a long time to complete the form content. If the application notifies the user of problems or timeout, at least the user still has the opportunity to copy and paste the data and save the data locally, thus avoiding the worst user experience. Back to Top Finding the balance between Ajax power Progressive enhancement-golden rule: To help ensure that the design of the application provides the best experience, it is best to follow the golden rule of progressive enhancement: First, you do not need to develop any JavaScript code, and then add JavaScript code after the site starts running. Ajax makes web innovation possible, but it also increases the possibility of violating the user's will. Remember, when adding ajax to a site, you must fix any problems caused by it. Progressive enhancementIs a web development strategy that ensures that all content and functions can be used in all browsers, but also supports more advanced Web browsers to use JavaScript programming and Ajax to create a better user experience. To help ensure that the design of the application provides the best experience, it is best to follow the golden rule of progressive enhancement: First, you do not need to develop any JavaScript code, and then add JavaScript code after the site starts running. Basically, you build a basic web site so that the actual link and form point to the real URL. Then, use JavaScript programming and Ajax to change the functions of these links and forms. For example, if you want to have a comment form that can use ajax to submit a comment and update the page to display the comment in a proper position, you do not need to refresh the page in all processes. First, build a Comment Form as usual without using any JavaScript code to ensure that it runs properly. Next, add a javascriptonsubmitEvent. When submitting a form, save the comment to the server using Ajax and update the page using Dom scripts. In this way, Web browser forms that do not support the Javascript language can run well, and more advanced Web browsers will run better. Developerworks Ajax Resource Center Access the Ajax Resource Center, a one-stop center that contains free tools, code, and information for developing Ajax applications. You can find answers to the questions you are looking for in an active Ajax Community Forum maintained by Ajax expert Jack herrington. Some web sites are fully built using JavaScript code and Ajax, and I suggest you avoid doing so under any circumstances. Building such a site means that some potential network users are excluded, and not only users who select to disable javascript language support. At the same time, there are also excluded search engines and people who search on the web. In addition, potential users accessing site content using untested devices and browsers are also excluded. Remember that for pure JavaScript sites, the smallest JavaScript error will also cause damage to the entire site. With the support of non-JavaScript sites, you can ensure that no potential users (and potential customers!) are blocked !) Access your content. Back to Top Conclusion Ajax completely subverts the way developers build Web applications, and the results are good or bad. The focus is to ensure that the Ajax enhancement included in the application can improve the user experience. Avoid confusing, unpredictable, and disappointing situations as much as possible. For many developers, these decisions may be related to the success or failure of the company. Share this article ...... Submit to Digg Release to Del. icio. us Slashdot! References Learning For more information, see the original article on the developerworks global site. Progressive enhancement: paving the way for future Web Design: view this article on hesketh.com to learn more about progressive enhancement web development policies. "Progressive enhancement with Ajax": This article by Jeremy Keith also introduces progressive enhancement. Unobtrusive Ajax(O 'Reilly, 2007, July): Learn how to separate behavior, content, and display when developing a web. Developerworks technical activities and broadcasts: Stay tuned to the latest technologies in these fields. The developerworks web development area contains a lot of tools and information about Web 2.0 development. The developerworks Ajax resource center contains an ever-increasing number of Ajax content libraries and various useful resources to help you develop Ajax applications immediately. Technical bookstore: browse books on topics and other technical topics described in this article. Discussion Participate in Forum discussions. Developerworks blog: view these blogs and join the developerworks community. About the author Jesse Skinner is a free web developer dedicated to JavaScript and CSS development. He moved from Canada to Germany, mainly studying how to make Web use more interesting, and solving the long-standing problem of CSS browser compatibility. If you want to learn more about Jesse or learn more about web development, refer to his blog

 
Transferred from: IBM developer community