What is your browser doing when the page is refreshed slowly while browsing the webpage through a browser? What is your screen content? Yes, your browser is waiting for Refresh, and your screen content is blank, and you are waiting for the browser to respond in front of the screen. To overcome this embarrassing situation, developers have to add a DIV on every page that may take a long time to wait for a response and tell the user that "the system is processing your request, please wait ......".
Nowadays, there is an increasingly popular "old" technology that can completely change this embarrassing situation. That is AJAX. Nowadays, with the applications of Gmail and Google-maps and the support of various browsers, AJAX is gradually attracting worldwide attention.
I. AJAX Definition
AJAX (Asynchronous JavaScript and XML) is actually a combination of a variety of technologies, including Javascript, XHTML and CSS, DOM, XML and XSTL, XMLHttpRequest. Where:
Use XHTML and CSS for standardized presentation, use DOM for Dynamic Display and interaction, use XML and XSTL for data exchange and processing, and use XMLHttpRequest object for Asynchronous Data Reading, use Javascript to bind and process all data.
Before AJAX was put forward, the industry only used the above technologies independently and did not use them comprehensively. It was also determined by the previous technical requirements. With the wide application, AJAX has become a kind of charm.
Ii. status quo and problems to be solved
Traditional Web applications adopt synchronous interaction. In this case, the user first triggers a behavior or request Call request to the HTTP server. In turn, the server executes some tasks and returns an HTML page to the user who sends the request. This is a non-coherent user experience. When the server processes requests, users are waiting most of the time, and the screen content is blank. For example:
Since hypertext is used for Web transmission and presentation, we have adopted such a set of transmission methods. When the load is relatively small, this does not reflect what is wrong. However, when the load is large, the response time is long, 1 minute, 2 minutes ...... In a few minutes, this kind of wait is intolerable. If the response time exceeds the limit, the server will tell you that the page is unavailable. In addition, sometimes I just want to change a small part of data on the page. Why do I have to reload the entire page ?! When software design becomes more user-friendly, such a bad user experience is simply contrary to this principle. Why do users always have to wait for the server to fetch data? At least, we should reduce the user waiting time. Now, in addition to program design, encoding optimization, and server tuning, AJAX can also be used.
Iii. Why AJAX?
Unlike traditional Web applications, AJAX uses Asynchronous interaction. AJAX introduces an intermediate media between the user and the server, thus eliminating the disadvantages of processing-waiting-processing-waiting during network interaction. Your browser loads the AJAX engine when executing tasks. The AJAX engine is written in JavaScript language and is usually hidden in a hidden framework. It compiles the user interface and interacts with the server. The AJAX engine allows Asynchronous interaction between users and applications, independent of communication between users and network servers. Now, you can use Javascript to call the AJAX engine to generate an HTTP user action, the data editing, page navigation, and data validation in the memory do not need to be re-loaded to the entire page, which can be executed by AJAX.
With AJAX, you can make it visible to ISPs, developers, and end users:
- Reduce the burden on the server. The principle of AJAX is to "retrieve data on demand", which can minimize the burden on the server caused by redundant requests and responses.
- Without refreshing the new page, reducing users' psychological and actual waiting time. In particular, when you want to read a large amount of data, you don't need to use a white screen like Reload. AJAX uses the XMLHTTP object to send a request and get the server response, use Javascript to operate the DOM to update the page without re-loading the entire page. Therefore, in the process of reading data, the user is not facing a white screen, but the original page content (you can also add a Loading prompt box to let the user know that the data is being read ), the content of the corresponding part is updated only after the data is received. This kind of update is instantly invisible to users.
- Provides a better user experience.
- The previous server workload can be transferred to the client, and the client's idle capabilities can be used to reduce the burden on servers and bandwidth, saving space and bandwidth rental costs.
- You can call external data.
- Based on standardized and widely supported technologies, you do not need to download plug-ins or applets.
- Further promote the separation of page rendering and data.
4. Who is using AJAX?
In the case of application AJAX development, Google is definitely not a table rate. Orkut, Gmail, Google Groups, Google Maps, and Google Suggest all use this technology. Amazon's A9.com search engine also uses similar technologies.
Microsoft is also actively developing more sophisticated AJAX applications: it is about to launch the AJAX Tool named Atlas. Atlas functions go beyond AJAX itself, including debugging functions integrated with Visual Studio. In addition, the new ASP. NET control makes it easier to bind the client control with the server code. The Atlas client Script Framework also facilitates interaction with webpages and related projects. However, Visual Studio 2005 does not include this function.
Microsoft recently announced that the Atlas client script framework will contain the following content (for details, visit the Atlas plan website ):
- A scalable core framework that adds JavaScript features such as lifecycle management, inheritance management, multi-point transfer processor, and interface management.
- A basic class library for common functions, including string processing, timers, and running tasks.
- A user interface framework that attaches dynamic behaviors to HTML.
- A group 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 for handling differences in browser script behavior.
Typically, Microsoft applies AJAX technology to MSN Space. Many people have always been surprised by the MS Space service. When a comment is submitted, the browser will pause temporarily and display the comments I submitted without refreshing the content. This is the effect of applying AJAX. Imagine that it would be very troublesome to refresh the entire page if you add a comment.
Currently, the most common application of AJAX is GIS-Map. Regional search in GIS emphasizes fast response, and AJAX features exactly match this requirement.
5. Use AJAX to improve your design
Although AJAX can be used to update page content without any need, it is mainly used in Web applications with a large number of interactions, frequent data reading, and good data classification. Now let's take two examples to see how to use AJAX to improve your design.
Example 1: Data Verification
When entering the form content, we usually need to ensure the uniqueness of the data. Therefore, the "unique verification" button is often provided on the page, allowing users to click to open a small verification window; or wait for the form to be submitted to the server, after being determined by the server, the server returns the corresponding verification information. The former is window. open operations are resource-consuming, usually by window. showModalDialog is replaced by showModalDialog. Even in this case, a dialog box is displayed. The latter submits the entire page to the server and the server determines the verification. This process takes a long time and increases the burden on the server. With AJAX, this verification request can be sent by the XMLHttpRequest object. A new window does not need to be popped up or the entire page needs to be submitted to the server, which quickly does not burden the server. Example 2: On-Demand Data Acquisition-cascade menu
Previously, to avoid page overloading caused by each menu operation, instead of calling the background every time, all the data in the cascading menu was read at one time and written into the array, then, you can use JavaScript to control the presentation of its subset projects based on your operations. This solves the problem of operation response speed, no page overloading, and frequent requests sent to the server, however, if you do not operate the menu or only operate a part of the menu, a part of the read data will become redundant data and waste your resources, especially when the menu structure is complex and the data volume is large (for example, the menu has many levels and each level of food has hundreds of projects), this disadvantage is even more prominent.
Now with AJAX, when initializing the page, we only read all the data of its first level and display it. When one of the user operation level menus, ajax is used to request all data in the level-2 sub-menu of the current level-1 project to the background. If you continue to request an item in the level-2 menu that has already been displayed, then, request all data of all level-3 menus corresponding to the level-2 menu items to be operated, and so on ...... In this way, there will be no data redundancy and waste, reducing the total amount of data downloads, and you do not need to reload all content when updating the page, only the part to be updated can be updated. Compared with the background processing and reload method, the user wait time is shortened and the resource waste is minimized.
Example 3: Read external data
AJAX can call external data. Therefore, it can perform secondary processing on some developed data such as XML documents and RSS documents to achieve data integration or application development. 6. AJAX Defects
AJAX is not a perfect technology. When AJAX is used, some of its defects have to be weighed:
- AJAX uses a lot of Javascript and AJAX engines, depending on the support of browsers. IE5.0 and later versions, Mozilla1.0, NetScape7 and later versions are supported. Although Mozilla also supports AJAX, XMLHttpRequest is provided in different ways. Therefore, AJAX programs must test the compatibility of various browsers.
- When AJAX updates the page content, the entire page is not refreshed. Therefore, the page's back-up function is invalid. Some users often do not know whether the current data is old or updated. In this case, you need to clearly remind the user that "data has been updated ".
- The support for streaming media is not as good as FLASH and Java Applet.
- Some handheld devices (such as mobile phones and PDAs) cannot support Ajax yet.
