Ajax and XML: drawing on the best Ajax applications

Follow this article to explore some of the top Asynchronous JavaScript + XML (Ajax) applications in the Web 2.0 world Program. Discover the secrets of successful applications at the user level, discover various skills, and develop your own Web 2.0 applications to create an exciting user experience.

This articleArticleFocusing on some of the best new-generation Web applications, we show you what you can learn from them-imitating the best applications is a proud tradition. I believe that these sites will not mind, after all, imitation is the most sincere admiration.

Visit the Ajax technical resource center, an all-in-one center for Ajax programming model information, including many documents, tutorials, forums, blogs, wikis, and news. Any new Ajax information can be found here.

However, I did not place technical issues first. Because of the technical problems of these sites-how data is transmitted in Ajax is important, but it is not a key factor for the success of a site. It is important to consider how websites use the Ajax features of browsers in combination with dynamic HTML (Dynamic HTML, DHTML) to create outstanding user experiences, and how websites interact with their users.CommunityFor interaction. I will explore all these factors and they play an important role in the success of the site, just like technology.

Google Maps

If "the most influential Web 2.0 application" has an Oscar or Ballon award, the winner is not Google map. I clearly remember the first time some of my colleagues saw Google Maps: Can browsers complete these tasks? In my impression, Google map redefined users' expectations for applications in browsers, leading a Web 2.0 movement.

I'm not sure whether the readers of this article have used Google Maps. However, I still show this site in Figure 1.

Figure 1. Latest version of Google Map

The Map Browsing operation is simple. You only need to click and drag a map, as if you were using a paper map. If you are looking for routes, they will appear in the map in the form of lines, the screen will not flash, the map will not move (unless you need to do so ). In fact, most functions of Google map do not need to interact with the server to obtain a new HTML page.

After the birth of Google Maps,Ajax and dynamic HTMLThese words are permanently engraved into the language of the second Web revolution. However, Google Maps are not running on AJAX strictly.AjaxDefined as useXMLHTTPObject sending and receiving requests ). Google Maps dynamically use the generated<SCRIPT>Mark and transfer data back and forth with the server. Definition in advanceXMLHTTPObjects are a technique.

But why does Google map not use Ajax? I cannot speak on behalf of Google engineers, but I feel that the design of Google Maps is inspired by JavaScript's "mashup capabilities ".

Mashup

At the beginning of the article, I talked about the support for the user community. I admit it is a bit bureaucratic, but I think it is important. Mashup is fundamental to supporting user communities.MashupIs to combine the functions of a site with those of another site, and then create something more interesting. A good example of mashup is to get a house rental list from Craigslist and use Google Maps to reflect the site where the house is located.

Mapmyrun.com is another example of Google map mashup. It uses Google map to allow runners (or anyone else) to calculate the distance of each route on the map. Figure 2 shows this feature.

Figure 2. Map my run Interface

Here, I enter the start point in the input field in the left pane. Then, use the mouse to specify the passing point of the running. When I click the mouse, the left pane immediately updates the displayed distance dynamically. I can zoom in the map to get more details or switch to satellite mode (if the route exceeds the view ).

All the heavy map work is done by Google Maps. The mapmyrun site only adds some JavaScript code to the map surface.CodeUsed to process mouse clicks and calculate the distance.

In this way, what inspiration can I get from Google maps when I want to successfully build a web 2.0 application ??

• Use a browser:Google Maps greatly utilizes the dynamic nature of today's browsers. These browsers give users an amazing experience. In the experience, users will be surprised by the functions that the browser can accomplish.
• The purity of AJAX is not important:Only a few people know that Google maps are not purely Ajax applications. But who really cares about this? Google map provides excellent functions for users. Not used in the programXMLHTTPIt does not matter. Do not focus too much on some specific technical methods.
• Javascript mashup:JavaScript code can be used to embed the functions of a site into another site, which is very commendable. It provides viral edge to bring you into a specific functionSource code.

Back to Top

Tadalist

Google Map sets a high threshold for Web 2.0 applications. However, AJAX can be used to quickly add a large number of values to an application. Tadalist is an example of this value. Tadalist is a simple and free to-do list management program. To demonstrate this site, I have created an account and a swimming list to remind me of the various things I will continue to complete my swimming training. The list is shown in figure 3.

Figure 3. Swimming list

If you want to add an event for purchasing goggles, you can enter the event in the text field and clickAdd to list. This item is immediately added to the corresponding position in the list without refreshing the page. The page is displayed, as shown in figure 4.

Figure 4. Add "buy new goggles"

It seems that there is nothing to do, and it is not difficult to use ajax to implement this function, but the end user will feel like the result from the desktop application.

Note that tadalist is written on the rails framework, which is very important. In fact, this program is a demo application that people use when learning rails. Moreover, the rails framework makes the development of such Ajax applications extremely easy.

For demonstration, I spent several minutes writing a simplified tadalist application using rails. The list of to-do items is shown in Figure 5.

Figure 5. To-Do item list

Then typeBuy earplugsAnd clickAdd. This item appears in the list without refreshing the page, as shown in figure 6.

Figure 6. Add "buy earplugs"

To implement this function, I created a small database to save the to-do item. Create a rails controller, as shown in Listing 1.

Listing 1. todo_controller.rb

Class todocontroller <applicationcontroller def list @ tasks = todo. find (: All) end def add task = todo. new task. name = Params [: task] [: Name] task. save @ tasks = todo. find (: All) end

The code in Listing 1 uses two methods.List ()To display the page.Add ()The method is used to add a new project to the list, and then return the list in HTML.

List ()The rhtml of the method is shown in Listing 2.

Listing 2. List. rhtml

<HTML>

Use this pageForm_remote_tagSubmit the content of a simple form to the Controller.Add ()Method.Add ()Method to add the to-do item to the table and<Div>Mark the returned content. The code for this function is shown in listing 3.

Listing 3. Add. rhtml

<% @ Tasks. Each {| T | %> <% = T. name %> <br/> <%} %>

So what can I learn from tadalists? First, a few Ajax applications will make the web application feel more like a desktop application. Second, choosing to use a web framework, especially those containing Ajax, can make this type of work quite simple.

Back to Top

Campfire

Campfire is a companion to tadalists and they are all developed by the same working group (37 signals ). In this example, the application will simulate a virtual campfire site that hosts an online chat room so that remote teams can chat with each other and transfer files conveniently.

I set up a trial account, and chatted and uploaded files. The result is shown in figure 7.

Figure 7. Virtual campfire designed for remote teams

The left side of the page is a simple chat window in which you can submit new messages at any time. The online user is displayed on the right of the interface, and an area is used to upload files.

The upload of files is completed in place and JavaScript code is used to monitor the File Upload process. This means that we can add files and images at the same time as the session, instead of leaving the session window because we want to move to another different page.

You can learn something interesting from campfire. First, it boldly replaces the types of chat services that users often use in desktop applications. Hosted chat in the context of a group meeting and replaced the original service with a system built. Compared with desktop applications, the system features quite limited, however, it is more valuable because it uses the Conference context.

Second, some operations that usually cause page refresh, such as uploading a file, are processed, so that the page does not need to be loaded. This allows the user to focus on the current task and enhances the desktop application feeling.

Back to Top

Yourminis

If some sites use Web 2.0 in a small amount, yourminis is just the opposite. It is enough to become a small part/gadgets site on the web. With this feature, we can create and customize widgets (orGadgetsIf you prefer Microsoft's industry terms. The page function is equivalent to the control panel, which can provide information in a timely and conspicuous manner.

Figure 8 shows the site after adding a rottentomatoes movie widget to the page.

Figure 8. yourminis of the movie comment

Rottentomatoes is a movie comment site. It gives a total score for a movie based on hundreds of movie comments and provides a percentage. Movies with scores equal to or higher than 60% are considered to beFresh(That is, good meaning ). In this example, I select ViewBridge to terebithiaYou only need to provide my zip code to get the score of the movie immediately in the same part. Figure 9 shows this feature.

Figure 9. Movie widgets that display local movie scores

The interface is clean and quick to open, and runs well in popular browsers. At the same time, these widgets can be placed in different locations-for example, in the blog of the site creator.

In addition to websites, yourminis also provides a Firefox extension to monitor browsers when users browse pages. When it finds something that yourminis may use, such as RSS feed or MP3, it will prompt you to tell users that these resources are available. This integration with the browser is relatively simple. Using this method to integrate the site into the user's desktop is a good choice.

In terms of Web 2.0, you can also learn something from yourminis. First, the minis and framework are implemented in Macromedia Flash. From the user's perspective, this is not a real problem. This has returned to another problem, that is, selecting a specific technology does not ultimately generate user benefits.

They encourage developers to think from the perspective of the user community and contribute their own page design for the whole user community. This is another form of collaboration with the user community, which enables the user community to promote the development of the site in a way we never imagined.

Lightbox

Although lightbox is very specific, I would like to point out that lightbox technology has played a major role in many websites today.LightboxIt is a combination of user interface technology and some Ajax technology. An example of a Web page is shown in figure 10.

Figure 10. lightbox JS Homepage

If you click an image, the entire page is dimmed and a box appears in the middle of the page. The enlarged image is displayed. Figure 11 shows this feature.

Figure 11. lightbox appears after you click the image

This technology has many advantages. It can shift users' attention from other areas of the page to the selected image. Because you can clickCloseReturn to the normal page, so this technology can display a lot of details for users without having to leave the current page.

This lightbox technology applies not only to images or videos, but also to text content. A site I often visit is to use lightbox technology to display the summary of each article in a suitable area on the home page. However, the page will only load the summary of this article after you click the lightbox Link (via Ajax. Therefore, you can read the summary of several articles at the same time on a page, and building a large number of pages will make the service bandwidth insufficient, although the user does not access all pages at the same time. This is the best for computers and users.

Some open-source JavaScript libraries can be used to develop lightbox. Lightbox JS version 2 is displayed.

Back to Top

Other Web 2.0 sites

At the time of writing this article, I visited a large number of Web 2.0 sites. Most sites do not use the above skills-although all the skills in this article are worth using. Google has some outstanding content. Google Documents and workbooks demonstrate what tasks can be edited using WYSIWYG in a browser. Google Reader demonstrates that if RSS feed is applied and provides a solution that allows users to view news anywhere. Google emails use Ajax, JavaScript, DHTML, and Google Maps.

Another application area is that Google's table processing software can be accessed by mobile devices. All of their services have a simplified version, which can run well in telephone and other small settings. With a googel account, you can customize your home page on the web and customize a home page for mobile phones.

Google is not the only one who uses ajax to create amazing results. Meebo is an outstanding example. It is a hosted chat application running on top of Ajax and has a simple but elegant interface. Kiko is a calendar application that skillfully uses DHTML to edit calendars and uses ajax to update appointments, contact methods, and related information on the server.

Back to Top

Conclusion

All the sites in this article are worth learning and learning. In particular, you can learn some useful skills. The common feature of all these sites is to respect the power of combining HTML and JavaScript code. Recently, the programming world often has negative news about JavaScript code. I think this is unfair, because most of the shortcomings I have heard are not so much about the Javascript language itself as about the browser and Document Object Model (DOM). Obviously, JavaScript should be used as an excellent Web 2.0 application.Programming LanguageAnd should be given due respect. None of the top enterprises in the industry do this.

As I mentioned at the beginning of this article, this article is not limited to discussing technology. We also discussed how to create amazing user experiences. All the sites selected in this article have opened up a new world in the industry. Some are encapsulated in a simple form (Google map), and some use ajax to seamlessly enhance the interface.

Welcome to the Web 2.0 APPLICATION community. Google Map allows users to separate their technologies to apply to their own applications. Websites such as campfire are more focused on enhancing the community experience.

Of course, you can learn a lot. But additionally, the ease of building JavaScript and DHTML applications makes it easier to build Web 2.0 applications.