Use Ajax technology to develop a new generation of Web application 1

Source: Internet
Author: User
  I. Introduction

An ideal user interface should be invisible to users-only provide choices when users need them, otherwise they will not interfere with their work and let them focus on the work at hand. However, this is not an easy task. Today, we become accustomed to daily work through a less satisfactory UI until someone shows us a better way. Now, we gradually realize how hard our current approach is to do these things.

As the basic web browser technology used to display document content is pushed further beyond the scope of their previous capabilities, today's Internet is experiencing such an implementation.

Ajax (Asynchronous JavaScript + XML) is a very new name, created by Jesse James Garret of Adaptive Path. Some parts of Ajax were previously described as dynamic HTML and remote scripts.

The emergence of AJAX is not just a new name. From a technical and commercial perspective, there are a lot of exciting things around Ajax. Technically speaking, Ajax has realized a lot of unrealized potential in Web browser technology. In terms of business, Google and other major businesses are gradually using Ajax technology to make the public realize what a web application can do.

The typical web applications we used to use today are under tremendous pressure, because the increasingly sophisticated world wide web-based services are becoming increasingly mature and applied to the Internet. Various new technologies are emerging to overcome these problems, and AJAX can better express these ideas only by using existing Internet technologies.

Using ajax, We have reused a bunch of original technologies, but expanded their original capabilities. We need to be able to manage the complexity we introduced. This article will discuss how to implement these technologies and how to manage large Ajax projects. We will introduce the Ajax design pattern and how it can help us complete our work. Design Patterns help us capture our knowledge and experience and use our current technology to communicate with other objects. By introducing rules to the code base, they allow you to easily create applications-you can modify and scale your project based on changes. Using design patterns for development is even a joy!

Why Is Ajax a rich client?

Building a rich client interface is more complex than designing a web page. So what causes us to do this? What are the benefits? What are rich clients?

A rich client has two key features: it is rich, and it is a client.

Let me explain it a little. Multiple methods refer to the client mode. A rich client model-it supports various input methods and provides intuitive and timely responses. Although we call it "rich", it must be as rich as modern desktop applications such as word processors and worksheets. Let's take a look at the implementation technologies that meet the specific requirements for this purpose.

  2. Compare User Experience

Here, let's discuss an instance of a worksheet program. When I enter some simple formulas in a worksheet, I can interact with it in several ways-edit data on site, navigate data with the keyboard and mouse, and drag the mouse to re-organize the data.

When I was doing this, the software gave me feedback-the shape of the mouse and cursor changed. When I moved the button, the button was highlighted and the selected text changed the color, the highlighted window and dialog box are displayed in different forms (figure 1 ).


Figure 1 this desktop worksheet application illustrates the possibility of multiple user interactions.

These are the main manifestations of today's rich user interaction. Is such a worksheet application a rich client? Not yet.

In a worksheet or similar desktop application, the logic and data models run in a closed environment-where they are clearly visible to each other, however, the outside world is rejected (figure 2 ). My client is defined as a program-it can communicate with a different independent process-typically it runs on a server. Traditionally, this server is larger and stronger than the client and stores massive amounts of information. The client allows end users to view and modify the information, and if some customers connect to the same server, it allows them to share the data. Figure 3 shows a simple diagram of the client/server architecture.


Figure 2 graphic architecture of an independent desktop application.

The application runs in its own processes-the data model and program logic are clearly visible to each other. The second instance of the application running on the same computer cannot access the data model of the First Instance except through the file system. Typically, all program statuses are stored in a single file-when the application is running, it is locked to prevent synchronous exchange of any information.


Figure 3 client/server system and layer-N architecture Diagram.

This server provides a data model that customers can use for interaction. Clients still maintain some of their own data models for fast access. Multiple customers can interact with the same server. In this case, resources controlled at a fine granularity of a single object or database row are locked. The server can be a single process, just like the traditional client/server model in the early 1990s s or a modern model consisting of multiple middleware layers and external web services. In any case, from the customer's perspective, the server has a single entry point and can be considered as a black box.

Of course, in a modern N-layer architecture, servers can communicate with backend servers such as databases-This leads to the emergence of the middleware layer-they act as both clients and servers. Typically, our Ajax application is located at one end of the chain-serving only the client, so we may regard the entire N-layer system as a single black box-we mark it as a server, to facilitate our current discussion.

My worksheet only focuses on data stored in local memory and local file systems. If the architecture is good, the coupling between the data layer and the description layer may be quite loose, but I cannot break it down and share it through the network. Therefore, from the perspective of our description layer goal, it is not a client.

Of course, a Web browser is a client that connects to the Web server and sends page requests from it. These browsers provide rich functions to manage users' web browsing, such as the back button, history list, and multi-page storage of multiple documents. However, if we regard a website's web page as an application, these general browser controls cannot be associated with the application, just like the Windows Start Menu or window list related to my worksheet.

Let's look at a modern web application. Because everyone may have heard of it, we will use Amazon-Online booksellers as an example (figure 4 ). Now, I direct my browser to the Amazon site, because the site remembers who I am from my last visit, so it shows me a friendly greeting, a list of recommended books, and historical information about the books I have bought.


Figure 4 home page of Amazon.com. The system remembers that I visited the site before, and the navigation link is a mixture of general information and private information.

Clicking a title in the suggestion list directs me to an independent page (that is, the screen blinks, and I lose the list I can see a few minutes ago ). Therefore, the new page will be filled with various context information (see figure 5 ).


Figure 5 Detailed information page of the Amazon.com website.

Once again, a large number of hyperlinks that combine common and private information appear. Despite this, a large number of details are very similar to those shown in Figure 4-this is because the document-based operations of Web browsers must be re-transferred to each page.

In short, I have shown you a wealth of closely related information. In addition, the only way for me to interact with such information is by clicking the hyperlink and entering a text form. If I fell asleep during keyboard input while browsing the site and woke up the next day, I would not know that the new Harry Potter book was released before I refreshed all the pages. I cannot take my list from one page to another, and I cannot zoom in or out a part of the document to view multiple contents at a time.

This is not a slander of Amazon, but it works very well within a very limited limit. However, compared with a worksheet, the interaction model it depends on is undoubtedly quite limited.

So why are there so many restrictions in modern Web applications? Currently, there are many technical reasons. Therefore, let's perform further analysis.

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.