Ajax and XML: Learn from the best AJAX applications

Ajax and XML: Learn from the best AJAX applications

Improve the user experience with the best WEB 2.0 application Learning

Document Options

send this page as an e-mail message

Level: Primary

Jack D Herrington (jherr@pobox.com), senior software engineer, Leverage Software Inc.

May 21, 2007 follow this article to explore some of the top asynchronous JavaScript + XML (Ajax) applications in the WEB 2.0 world. Explore these applications for success at the user level, discover the techniques and start developing your own WEB 2.0 applications to create an exciting user experience.

This article looks at some of the best new generation WEB applications and shows you what you can learn from it-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 Technology Resource Center, a one-stop center for information about AJAX programming models, including many documents, tutorials, forums, blogs, wikis, and news. Any new Ajax information can be found here.

However, I have not put the technical aspects of the problem in the first place. Because the technical issues with these sites-how data is passed in Ajax-are important, but not the key to a site's success. It is important to consider how the site uses the Ajax features of the browser to create an outstanding user experience with Dynamic HTML, and how the site interacts with their user communities. I'll explore all of these factors, and they play an important role in the success of the site as well as technology.

Google maps

If the "most influential Web 2.0 apps" feature an Oscar or a Golden Globe, winners are not Google maps. I remember clearly how some of my colleagues reacted the first time they saw Google maps: browsers could have done these tasks. In my impression, Google maps redefined the user's expectations of the application in the browser, leading to a WEB 2.0 campaign.

Browsing the map is very simple, just click and drag the map, just like in the paper map of the same operation. If you are looking for routes, they will appear as lines in the map, the screen will not flicker, and the map will not move (unless you need to). In fact, most features of Google maps do not need to interact with the server to get a new HTML page.

After the birth of Google maps, the words Ajax and Dynamic html were permanently carved into the language of the second Web Revolution. But the most exciting thing is that Google maps are strictly not running on Ajax (if you define AJAX as sending and receiving requests using the XMLHTTP object). Google maps dynamically use the generated <script> tag to pass data back and forth to the server. Defining XMLHTTP objects in advance is a skill.

But why don't Google maps use Ajax? I can't speak on behalf of Google's engineers, but I feel that Google Maps is inspired by JavaScript's "mashup capabilities".

mashups

At the beginning of the article, I talked about support for the user community. I admit, it's a little bureaucratic, but I think it's important. Mashups are fundamental to support the user community. Mashups mean merging the functionality of a site with the functionality of another site, and then creating something more interesting. A good example of a Mashup is a site that takes a home rental list from Craigslist and uses Google maps to reflect its location.

Mapmyrun.com is another example of a Google map mashup that uses Google Maps to allow runners (or anyone else) to figure out the distance of each route on the map. 

Here, I enter the starting point in the input field in the left pane. Then use the mouse to specify the passing point of the run. When I click the mouse, the left pane updates dynamically to show the distance. I can zoom in on the map for more details or switch to satellite mode (if the route exceeds the view).

All the heavy mapping work is done by Google maps. The MapMyRun site just added some JavaScript code to the surface of the map to handle mouse clicks and computational distances.

So what can I get from Google maps when I'm going to build a WEB 2.0 application successfully? using the browser: Google maps take advantage of the dynamic nature of today's browsers. By using these browsers to give users an amazing experience, users will be amazed at the functionality that browsers can accomplish in the experience. The purity of Ajax is not important: only a handful of people know that Google maps are not purely AJAX applications. But who would really care about that? Google Maps provides a very good feature for users. It doesn't matter if you don't use XMLHTTP in your program. Don't focus too much on certain technical methods. JavaScript mashups: The ability to embed a site's functionality into another site through JavaScript encoding is highly appreciated. It provides viral edge, bringing you into the source code that implements a particular function.

Back to the top of the page

Tadalist

Google maps set a high threshold for WEB 2.0 applications. However, you can use Ajax to quickly add a large number of values in your application. Tadalist is an example of this numerical value. Tadalist is a very simple and free to-do list management program. To demonstrate this site, I created an account and a swimming list to remind me of the various things that I continued to do swimming training. 

If I want to add an event to buy goggles, you can fill out the event in the Text field and click Add to List. The item is immediately added to the appropriate location in the list without the need to refresh the page.

It doesn't seem to be a hit, and it's not difficult to do this with Ajax, but the end user feels like the result from a desktop application.

Note that it is important that Tadalist is written on top of the Rails framework. In fact, this program is a demo application that people use to learn Rails. And the Rails framework makes the development of this type of Ajax application extremely easy.

To demonstrate, I spent a few minutes using Rails to write a simplified version of the Tadalist application.

Then type the buy earplugs and click Add. The item appears in the list and does not need to refresh the page.

To do this, I created a small database for saving to-do items. Then 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. The list () method is used to display the page. The Add () method is used to add a new item to the list and then return the list in HTML.

The RHTML of the list () method is shown in Listing 2.

Listing 2. List.rhtml

               

This page uses Form_remote_tag to submit the contents of a simple form to the Add () method in the controller. The Add () method adds the to-do entry to the table, and then returns the new content for the resulting <div> tag. The code for this feature is shown in Listing 3.

Listing 3. Add.rhtml

               

<% @tasks. Each {|t|%>

<%= t.name%><br/> <%

}%>

So, what can I learn from tadalists? First, a little Ajax application will make it more likely that the Web application feels more like a desktop application. Second, choosing to use WEB frameworks-especially those that contain Ajax-can make this type of work quite simple.

Back to the top of the page

Campfire

Campfire are Tadalists's companions, all of which are developed by the same workgroup (37signals). In this case, the application simulates a virtual campfire site that hosts an online chat room that allows remote teams to chat with each other and easily transfer files.

I set up a trial account and have a chat and upload file operation. 

The left side of the display interface is a simple chat window in which users can submit new messages at any time. The right side of the interface shows the online users, as well as an area for uploading files.

The file upload is done in place, and the JavaScript code is used to monitor the file upload process. This means that we can add files and images to the session while not leaving the session window because we want to move to another different page.

There are some interesting things to learn from the campfire. First, it boldly replaces the types of chat services that users use in desktop applications. Hosting chat In the context of a group meeting replaces the original service and builds a system that is rather limited to the desktop application, but is more valuable because it uniquely uses the context of the meeting.

Second, some of the actions that usually cause page refreshes, such as uploading a file, are processed, eliminating the need to load the page. This keeps the user's focus on the current task, and strengthens the sense of the desktop application.

Back to the top of the page

Yourminis

If some sites use Web 2.0 in small quantities, then yourminis, on the contrary, is enough to be a widget/gadget site on the Web. Using it, we can create and customize pages that contain a variety of widgets (or gadgets, if you prefer Microsoft's industry terminology). The function of the page is equivalent to the dashboard, which provides information in a timely manner in a compelling way.

RottenTomatoes is a movie review site. It is based on hundreds of movie reviews given a total score for the movie and provides a percentage. A film with a score equal to or above 60% is considered to be fresh (ie, good meaning). In this case, I choose to view Bridge to Terebithia, and I can get the movie score in the same widget immediately with my zip code. 

The interface is clean, open quickly, and works well on popular browsers. These widgets can also be placed in a variety of locations--for example, the site creator's blog.

In addition to the site, Yourminis has a Firefox extension that monitors browsers when users browse the page. When it finds something Yourminis might use, such as an RSS feed or MP3, it pops a hint to tell the user 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.

There are also a few things you can learn from Yourminis in Web 2.0. First, the Minis and framework are implemented in Macromedia Flash. From the user's point of view, this is not a real problem. This goes back to the question of choosing a particular technology that is not important to the end-user benefit that ultimately arises.

They encourage developers to think in terms of the user community and contribute their own page designs to the entire user community. This is another manifestation of collaboration with the user community, which will enable the user community to advance the site in ways we have never imagined.

Lightbox

Although Lightbox is a very specific site, I would like to point out that Lightbox technology has played a significant role in many of today's sites. Lightbox is a combination of user interface technology and some Ajax technologies. 

If you click an image, the entire page darkens, and a box appears in the middle of the page, displaying the selected picture when it is enlarged. 

This technology has many advantages. It can take the user's attention from other areas of the page to the transfer of selected pictures. Because the user can click Close to return to the normal browsing page, this technique can display a lot of detail for the user without having to leave the current page.

This lightbox technique applies not only to images or video, but also to text content. One site I often visit is to use Lightbox technology to display a summary of each article in the appropriate area on the home page. However, the page does not load a summary of the article until the user clicks the Lightbox link (via Ajax). As a result, users can read the summary content of several articles in one page at a time, and building a large number of pages will make the service less bandwidth, although users will not be able to access all the pages at the same time. This is best for both the computer and the user.

Some open source JavaScript libraries can be used to develop lightbox. The image above shows the Lightbox JS version 2.

Back to the top of the page

Other Web 2.0 sites

In writing this article, I visited a number of Web 2.0 sites. Most sites do not apply these techniques-although all of the techniques in this article are worth applying. Google has some particularly good content. Google docs and spreadsheets (spreadsheets) demonstrate what you can do with WYSIWYG editing in your browser. Google Reader demonstrates that if you apply an RSS feed and provide a solution that allows users to view the news anywhere. Google email uses Ajax, JavaScript, DHTML, and Google Maps.

Another area of application is that Google forms processing software can move access. All of their services have a compact version that works well in phones and other small settings. With a Googel account, you can customize your home page on the Web while also customizing a home page for your mobile phone.

Google is not the only use of Ajax to create surprises. Meebo is an excellent example. It is a hosted chat application that runs on 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 in the server.

Back to the top of the page

Conclusion

All the sites that appear in this article are worthy of our learning and reference. In particular, you can learn some very useful skills from them. The common feature of all these sites is respect for the power of combining HTML and JavaScript code. Recently, the programming world often has negative messages about JavaScript code. I don't think that's fair, because for most of the flaws I've heard, it's more a matter of compatibility between the browser and the document object model than the JavaScript language itself. Obviously, if you want to develop an excellent WEB 2.0 application, you should use JavaScript as a programming language and should give it the respect it deserves. None of the top companies in the industry are acting on this.

,

share this article ... ....

Submit this article to Digg

Publish to del.icio.us