Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "what is AJAX development". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When browsing the web with a browser, what is your browser doing when the page refreshes slowly? What is the content of your screen? Yes, your browser is waiting to refresh, and your screen is blank, and you are waiting in front of the screen for the browser to respond. In order to overcome this awkward situation, developers have to add a DIV to every page that may need to wait a long time for a response, telling the user, "the system is processing your request. Please wait a moment." .

Now, there is an increasingly popular and hotter "old" technology that can completely change this embarrassing situation. That's AJAX. Nowadays, with the application of Gmail and Google-maps and the support of various browsers, AJAX is gradually attracting the attention of the world.

I. definition of AJAX

AJAX (Asynchronous JavaScript and XML) is actually a combination of many technologies, including Javascript, XHTML and CSS, DOM, XML and XSTL, XMLHttpRequest. Where:

Standardized rendering using XHTML and CSS, dynamic display and interaction using DOM, data exchange and processing using XML and XSTL, asynchronous data reading using XMLHttpRequest objects, binding and processing of all data using Javascript.

Before AJAX was proposed, the industry only used the above technologies alone, not in a comprehensive way, and it was also determined by the previous technical requirements. With the wide range of applications, AJAX has become popular.

Second, the present situation and the problems to be solved

Traditional Web applications use synchronous interaction process, in which case the user first triggers a request for a behavior or request to the HTTP server. The server, in turn, performs certain tasks and returns a HTML page to the user who made the request. This is an incoherent user experience, when the server is processing requests, users spend most of their time waiting, and the screen content is blank. As shown below:

Since the use of hypertext as Web transmission and presentation, we have adopted such a set of transmission methods. When the load is small, there is nothing wrong with it. But when the load is relatively large, the response time is very long, 1 minute, 2 minutes. In a few minutes, the wait became unbearable. Seriously, beyond the response time, the server simply tells you that the page is not available. In addition, sometimes, I just want to change a small part of the data on the page, so why do I have to reload the whole page? When software design is becoming more and more human, such a bad user experience simply runs counter to this principle. Why do users always have to wait for the server to get the data? At the very least, we should reduce the waiting time for users. AJAX is now available in addition to programming, coding optimization, and server tuning.

3. Why use AJAX

Different from traditional Web applications, AJAX uses asynchronous interaction process. AJAX introduces an intermediary between the user and the server, thus eliminating the disadvantage of processing-waiting-processing-waiting in the process of network interaction. The user's browser loads the AJAX engine when performing the task. The AJAX engine is written in the JavaScript language, usually hidden in a hidden framework. It is responsible for compiling the user interface and interaction with the server. The AJAX engine allows the interaction between the user and the application software to proceed asynchronously, independent of the communication between the user and the network server. Now, you can use Javascript to call the AJAX engine instead of generating a HTTP user action, in-memory data editing, page navigation, data validation, which do not need to reload the entire page, can be handed over to AJAX to perform.

With AJAX, you can bring visible convenience to ISP, developers, and end users:

Lighten the burden on the server. The principle of AJAX is "fetch data on demand", which minimizes the burden of redundant requests and responses on the server.

Update the page without refreshing, reducing the user's psychological and actual waiting time. In particular, when you want to read a large amount of data, instead of having a blank screen like Reload, AJAX uses the XMLHTTP object to send a request and get a response from the server, and use Javascript to manipulate DOM to update the page without reloading the entire page. So in the process of reading data, the user is not faced with a blank screen, but the original page content (you can also add a Loading prompt box to let the user know that he is in the process of reading data), and the corresponding part of the content will be updated only after the data has been received. This update is instantaneous and can hardly be felt by users.

Bring a better user experience.

We can transfer the work of some previous servers to the client, make use of the idle ability of the client to deal with it, reduce the burden of the server and bandwidth, and save space and broadband rental costs.

External data can be called.

Based on standardized and widely supported technology, there is no need to download plug-ins or Mini Program.

Further promote the separation of page rendering and data.

Who is using AJAX

In the application of AJAX development, Google is an example. Orkut, Gmail, Google Groups, Google Maps, Google Suggest all apply this technology. Amazon's A9.com search engine uses a similar technology.

Microsoft is also actively developing more sophisticated AJAX applications: it is about to launch an AJAX tool codenamed Atlas. The functions of Atlas go beyond AJAX itself, including integrating the debugging capabilities of Visual Studio. In addition, the new ASP.NET control will make it easier to bundle client-side controls with server-side code. The Atlas client scripting Framework (Atlas Clent Script Framework) also makes it easier to interact with web pages and related projects. However, this feature is not included in Visual Studio 2005.

Microsoft recently announced that the Atlas customer scripting framework will include the following (for more information, please visit the Atlas plan website):

An extensible core framework that adds JavaScript functions such as life synchronization management, inheritance management, multicast processors, and interface management.

A basic class library with common functions, with rich string processing, timers, and running tasks.

A user interface framework for attaching dynamic behavior to HTML.

A set of network stacks 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.

The browser compatibility level that handles differences in the behavior of browser scripts.

Typically, Microsoft applies AJAX technology to MSN Space. Many people have always been surprised by the MS Space service. When a reply is submitted, the browser pauses temporarily and then displays my submitted comments without refreshing. This is the effect of applying AJAX. Just imagine, if you add a comment, you have to refresh the entire page, which is really troublesome.

At present, the most common area of AJAX application is GIS-Map. GIS's regional search emphasizes fast response, and the characteristics of AJAX meet this requirement.

Use AJAX to improve your design

Although AJAX can update page content without refreshing, it can not be used everywhere. It is mainly used in Web applications with more interaction, frequent data reading and good data classification. Now, let's give two examples of how to improve your design with AJAX.

Example 1: data check

When entering the contents of an form form, we usually need to make sure that the data is unique. Therefore, the "uniqueness check" button is often provided on the page for users to click and open a small verification window, or wait for form to be submitted to the server, and the corresponding verification information will be returned after judgment by the server. In the former, window.open operations are resource-consuming and are usually performed by window. Instead of showModalDialog, a dialog box pops up; in the latter case, the entire page needs to be submitted to the server and checked by the server, which not only takes a long time but also increases the burden on the server. With AJAX, this verification request can be made by the XMLHttpRequest object, and the whole process does not need to pop up a new window or submit the entire page to the server, quickly without burdening the server. Example 2: fetch data on demand-cascading menu

In the past, in order to avoid overloading the page caused by each operation on the menu, instead of calling the background every time, all the data of the cascading menu was read out and written into the array at a time, and then JavaScript was used to control the presentation of its subset items according to the user's operation, although it solved the problems of operation response speed, not overloading the page and avoiding frequently sending requests to the server. However, if the user does not operate on the menu or only operates on a part of the menu, some of the data read will become redundant data and waste the user's resources. especially in the case of complex menu structure and large amount of data (for example, the menu has many levels, each level of food has hundreds of items), this malpractice is more prominent.

Now applying AJAX, when initializing the page, we only read out all the data of its first level and show that when the user operates one of the first level menu items, he will request all the data of the second level submenu to which the current first level project belongs to the background through Ajax. If he continues to request one of the second level menu items that has already been presented, then request all the data of all the third level menus corresponding to the second level menu item to which he operates. And so on. In this way, if you take what you use and take as much as you use, there will be no redundancy and waste of data, reducing the total amount of data download, and updating the page without reloading all the content, only updating the part that needs to be updated. compared with background processing and reloading, it shortens the user waiting time and minimizes the waste of resources.

Example 3: reading external data

AJAX can call external data, so some developed data, such as XML documents and RSS documents, can be reprocessed to achieve data integration or develop applications. VI. Defects of AJAX

AJAX is not a perfect technology. With AJAX, some of its drawbacks have to be weighed:

AJAX uses a lot of Javascript and AJAX engines, depending on browser support. IE5.0 and above, Mozilla1.0, NetScape7 and above are supported. Although Mozilla also supports AJAX, XMLHttpRequest is provided in different ways. Therefore, programs that use AJAX must test compatibility for individual browsers.

When AJAX updates the content of the page, it does not refresh the entire page, so the back function of the page is invalid; some users often don't know whether the current data is old or updated. This requires reminding the user that "the data has been updated" in an obvious place.

The support of streaming media is not as good as FLASH and Java Applet.

Some handheld devices (such as mobile phones, PDA, etc.) can not support Ajax very well.

This is the end of "what is AJAX Development". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.