What is your browser doing when browsing the web in a browser when the page is slow to refresh? What is your screen content? Yes, your browser is waiting to refresh, and your screen content is blank, and you wait in front of the screen for the browser's response. To overcome this embarrassment, the developer had to add a div to each page that might take a long time to respond, telling the user, "Please wait while the system is processing your request ...".
Now, there is an increasingly popular and hot "old" technology, can completely change this embarrassing situation. That's Ajax. Today, with Gmail, google-maps apps and various browsers, Ajax is attracting the world's attention.
One, Ajax definition
AJAX (Asynchronous JavaScript and XML) is actually a combination of multiple technologies, including JavaScript, XHTML and CSS, DOM, XML, and Xstl, XMLHttpRequest. which
Standardize rendering with XHTML and CSS, use DOM for dynamic display and interaction, data exchange and processing using XML and XSTL, asynchronous data reading with XMLHttpRequest objects, and use JavaScript to bind and process all data.
Before the AJAX proposed, the industry for the above technology is only a separate use, not integrated use, but also because of the previous technical needs of the decision. With a wide range of applications, Ajax has become a sweet pastry.
ii. Status quo and problems to be solved
The traditional Web application uses the synchronous interaction process, in which case the user first triggers an action or request call to the HTTP server. In turn, the server performs certain tasks and then returns an HTML page to the requesting user. This is an incoherent user experience, the server in processing requests, the user most of the time in the state of waiting, screen content is blank. The following figure:
Since the adoption of hypertext as a Web transmission and rendering, we have adopted such a set of transmission mode. When the load is relatively small, this does not reflect what is wrong. But when the load is relatively large, response time to be very long, 1 minutes, 2 minutes ... In a few minutes, the wait is intolerable. Serious, exceeding the response time, the server simply tells you that the page is not available. Also, sometimes I just want to change a small part of the page data, then why do I have to reload the entire page?! When software design becomes more and more human, such a bad user experience simply runs counter to this principle. Why do you always have to let the user wait for the server to fetch data? At the very least, we should reduce the time that users wait. Now, in addition to programming, coding optimization and server tuning, you can also use Ajax.
third, why use Ajax
Unlike traditional Web applications, Ajax uses an asynchronous interaction process. Ajax introduces an intermediary between the user and the server, eliminating the processing-waiting-processing-waiting for shortcomings in the network interaction process. The user's browser loads the Ajax engine when performing a task. Ajax engines are written in JavaScript language and are usually hidden in a hidden frame. It is responsible for compiling the user interface and interacting with the server. The AJAX engine allows the user to interact with the application in an asynchronous process, independent of the communication between the user and the network server. Now you can invoke Ajax engines with JavaScript instead of creating an HTTP user action, in-memory data editing, page navigation, data validation, and the need to reload the entire page can be done by Ajax.
With Ajax, you can make it easy for your ISP, developers, and end users to be visible:
- Reduce the burden on the server. The principle of Ajax is "data on demand", which minimizes redundancy requests and responds to the burden on the server.
- No Refresh update page, reduce the user's psychological and actual waiting time. In particular, when you want to read a lot of data, without the white screen like reload, Ajax uses the XMLHTTP object to send a request and get a response from the server, using JavaScript to eventually update the page without loading the entire page. So in the process of reading the data, the user is faced with is not a white screen, is the original page content (also can add a loading prompt box to let users know that the process of reading data), only when the data received after the corresponding part of the update content. This update is instantaneous and is almost impossible for the user to feel.
- Bring a better user experience.
- Some of the previous server load can be transferred to the client, the use of idle client capacity to deal with, reduce the burden of server and bandwidth, save space and broadband rental costs.
- External data can be invoked.
- Based on standardized and widely supported technologies, there is no need to download plug-ins or small programs.
- Further promote the separation of page rendering and data.
Four, who is using AJAX
Google is an example in the application of AJAX development. Orkut, Gmail, Google Groups, Google Maps, Google suggest all applied this technology. Amazon's a9.com search engine also uses a similar technique.
Microsoft is also actively developing a more sophisticated AJAX application: It is about to launch an AJAX tool code-named Atlas. The functionality of Atlas transcends AJAX itself, including the ability to consolidate the debugging capabilities of Visual Studio. In addition, the new ASP.net control makes it easier to bundle the client control with the server-side code. The Atlas Client Scripting Framework (Atlas Clent Script framework) also facilitates interaction with Web pages and related projects. However, this feature is not included in Visual Studio 2005.
Microsoft recently announced that the Atlas client scripting framework will contain the following (For more information, visit the Atlas planning website):
- An extensible core framework that adds JavaScript features such as life-time management, inheritance management, multicast processors, and interface management.
- A basic class library of common functions, with rich string processing, timers, and running tasks.
- A user interface framework that appends dynamic behavior to HTML.
- A set of network stacks used to simplify server connectivity and network access.
- A rich set of user interface development controls, such as automatically completed text boxes, animations, and drag-and-drop.
- Browser compatibility level that handles differences in browser script behavior.
Typically, Microsoft applies AJAX technology to MSN Spaces. Many people have always been surprised by the MS Space Service, and when a comment is submitted, the browser pauses for a moment and then displays the comments I submit without refreshing. This is the effect of applying Ajax. Just think, if add a comment to refresh the entire page, it is really trouble.
At present, the most common area of AJAX applications is the gis-map aspect. Regional search in GIS emphasizes fast response, and AJAX features coincide with this requirement.
Five, use Ajax to improve your design
Although Ajax can be implemented without refreshing the content of the page, but also not everywhere can be used, mainly used in interactive, frequent reading data, good data classification of Web applications. Now, let's take two examples to see how you can improve your design with Ajax.
Example 1: Data validation
When entering form content, we usually need to ensure that the data is unique. Therefore, the "Uniqueness Check" button is often provided on the page to allow the user to click, open a check window, or wait for form to be submitted to the server, after the server to determine the corresponding checksum information. The former, the window.open operation is a relatively resource-intensive, usually by window. ShowModalDialog Instead, even if you want to pop up a dialog box, the latter, you need to submit the entire page to the server and the server to determine the checksum, this process not only a long time and increased the burden on the server. With Ajax, this checksum request can be issued by the XMLHttpRequest object, the whole process does not need to eject a new window, and do not need to submit the entire page to the server, fast without aggravating the server burden.
Example 2: On-demand data-cascading menu
Previously, in order to avoid the overload page that was caused by each action on the menu, instead of every time the backend is invoked, all the data for the cascading menu is read all at once and written to the array, and then JavaScript is used to control the rendering of the subset item based on the user's actions, which resolves the response speed of the operation, Do not overload the page and avoid sending requests frequently to the server. However, if the user does not operate the menu or only a part of the menu, the read data will become redundant data and waste the user's resources, especially in the context of complex menu structure, the large amount of data (such as the menu has many levels , every level of food and hundreds of projects), this abuse is more prominent.
Now that we're applying AJAX, when we initialize the page, we just read out all of its first level data and show that when a user operates one of the first-level menus, all data for the level Two submenu to which the current level of the project belongs is requested by Ajax to the back desk, and if you continue to request an item from the level two menu that is already rendered, And then to request all the data of all level three menus for the two-level menu item that you are working on, and so on ... In this way, take what you use, take as much as you can, there will be no data redundancy and waste, reduce the total number of data downloads, and update the page without overloading the entire content, only update the part that needs to be updated, relative to the background processing and overloading of the way to shorten the user waiting time, but also to minimize the waste of resources.
Example 3: Reading external Data
Ajax can invoke external data, so you can do two processing of some developed data, such as XML documents, RSS documents, and implement data consolidation or development applications.
Six, the flaw of Ajax
Ajax is not the perfect technology. With Ajax, some of its flaws have to weigh:
- Ajax uses JavaScript and AJAX engines heavily, depending on the browser's support. IE5.0 and above, Mozilla1.0, NetScape7 and above support, Mozilla although also support Ajax, but the way to provide XMLHttpRequest is not the same. Therefore, programs that use AJAX must test compatibility for individual browsers.
- Ajax updates the content of the page does not refresh the entire page, so the back of the page function is invalid, and some users often do not know whether the current data is old or has been updated. This requires a clear location to alert the user to "data has been updated."
- Streaming media support is not as good as Flash or Java applets.
- Some handheld devices (such as cell phones, PDAs, etc.) are not yet well supported by Ajax.
