When using the browser to browse the web, what is your browser is doing when the page is refreshed? What is your screen content? Yes, your browser is waiting to refresh, and your screen content is a blank, and you wait for the browser in front of the screen. In order to overcome this embarrassing situation, developers have to add a DIV on each page that may take a long time waiting for a response. "The system is processing your request, please wait ...".
Now, there is an increasingly popular "old" technology that can thoroughly change this embarrassment situation. That is AJAX. Today, with Gmail, Google-Maps and various browsers support, Ajax is gradually attracting attention around the world.
First, AJAX definition
Ajax (Asynchronous JavaScript and XML) is actually a combination of many technologies, including JavaScript, XHTML, and CSS, DOM, XML, and XSTL, XMLHttpRequest. among them:
Using XHTML and CSS standardization rendering, use the DOM to dynamically display and interact, using XML and XSTL to perform data exchange and processing, use the XMLHTTPRequest object to perform asynchronous data read, using JavaScript binding and processing all data.
Before Ajax proposed, the industry is only separate use, and is not integrated, and it is also determined by the previous technical requirements. As the application is wide, Ajax has become a fragrant.
Second, the status quo and problem solved
Traditional web applications use synchronous interaction processes, in which case users first trigger a behavior or request for the HTTP server. Conversely, the server performs some tasks, and then returns an HTML page to the requestible user. This is an incoherent user experience. When the server is processed, the user is in a state of waiting, and the screen content is also blank. As shown below:
We all use such a transmission mode since he uses hypertext as a web transmission and presence. When the load is relatively small, this does not reflect anything wrong. However, when the load is relatively large, the response time is very long, 1 minute, 2 minutes ... A few minutes, this kind of waiting cannot be endured. Serious, more than the response time, the server simply tells you that the page is not available. In addition, some time, I just want to change the page a small number of data, then why do I have to reload the entire page? ! When the software design is getting more and more human, such a bad user experience is simply backed by this principle. Why should I wait for the user to wait for the server to take the data? At least, we should reduce the time of the user waiting. Now, in addition to program design, encoding optimization, and server tuning, Ajax can be used.
Third, why use AJAX
Unlike traditional web applications, Ajax uses asynchronous interactions. Ajax introduces an intermediate medium between the user and the server, eliminates the processing - waiting-processing-wait-processing in the network interaction. The user's browser is loaded with an AJAX engine when performing tasks. The AJAX engine is written in JavaScript language, usually hidden in a hidden framework. It is responsible for compiling user interfaces and interactions with the server. The AJAX engine allows the user to communicate with the interaction process between the application software, independent of the communication between users and network servers. Now, you can use JavaScript to call the AJAX engine instead of generating an HTTP user action, data editing, page navigation, and data check these without reloading the entire page, can be handed over to Ajax.
Using AJAX, you can bring visible convenience for ISP, developers, and end users:
Redight the burden of the server. The principle of AJAX is "Data by Data", which can minimize redundant requests, and the burden on the server. Non-refresh update page, reduce user psychology and actual wait time. In particular, when you want to read a lot of data, you don't have a white screen like Reload. AJAX uses the XMLHTTP object to send a request and get the server response, and use the JavaScript operation DOM final update without reloading the entire page. page. Therefore, in the process of reading the data, the user faces is not a white screen, which is the original page content (you can also add a loading prompt to let the user know that the data process is read), only when the data is received. The content of the corresponding part. This update is instant, and the user can't feel almost. Bring a better user experience. You can transfer the work of some of the previous server burden to the client, using the client's idle ability to deal with, reduce the burden on the server and bandwidth, save space and broadband rental cost. External data can be called. Based on standardized and widely supported technologies, you don't need to download plugins or applets. Further promote the separation of the page presentation and data. Four, who is using ajax
On the application of Ajax development, Google is not allowed to be an episode. This technology is applied to ORKUT, GMAIL, Google Groups, Google Maps, Google Suggest. Amazon's A9.COM search engine also uses a similar technology.
Microsoft is also actively developing a more complete AJAX application: it is about to launch an AJAX tool for code-based Atlas. Atlas's features beyond Ajax itself, including the debugging of Visual Studio. In addition, the new ASP.NET control will make the bundle of client controls and server-side code easier. Atlas Clent Script Framework also makes interactions with the web page and related items more convenient. But Visual Studio 2005 does not contain this feature.
Microsoft recently announced the ATLAS customer scripting framework will contain the following (detail, please visit the Atlas Plan Website):
An scalable core framework, which adds JavaScript features: such as life management, inheritance management, multi-point transmission processor, and interface management. A basic class library of a common feature, rich string processing, timer, and running tasks. A user interface framework for HTML attached to a dynamic behavior. A set of network stacks for simplifying server connectivity and network access. A set of rich user interface development controls, such as: Automatically complete text box, animation, and drag and drop. Handle browser compatibility at the browser script behavior.
Typically, Microsoft uses AJAX technology to the MSN Space. Many people have always been very strange to MS Space service. After submitting a reply comment, the browser will temporarily stop, and then display the comments I submitted in the case of no refresh. This is the effect of applying AJAX. Imagine if you add a comment to re-refresh the entire page, that is really trouble.
Currently, the most common field of AJAX is GIS-MAP. The regional search of the GIS emphasizes the fast response, and the characteristics of Ajax are in line with this requirement.
V. Improve your design with Ajax
Although Ajax can achieve no refresh update page content, it is not possible to use, mainly in a web application that interacts more, frequent read data, and has a good data classification. Now let's give two examples to see how to improve your design with Ajax.
Example 1: Data check When you enter the Form form content, we usually need to ensure the uniqueness of the data. Therefore, the "unique check" button is often provided on the page, allowing the user to click, open a check small window; or wait for the Form to submit it to the server side, and then returns the corresponding check information after the server is determined. The former, Window.open operation is originally consuming resource, usually replaced by Window. ShowModalDialog, even if this also pops up a dialog; the latter, you need to submit the entire page to the server and determine the verification by the server, this process not only time Long and aggravated the server burden. Use AJAX, this check request can be issued by the XMLHttpRequest object, and the entire process does not need to pop up a new window, nor does it need to submit the entire page to the server, quickly and not aggravated the server burden. Example 2: Before you need to take the data-cascade menu, in order to avoid the overload page caused by the operation of the menu, you do not use all the data of the cascade menu to read all the data of the cascade menu. Out and write an array, then according to the user's operation JavaScript to control its subset project, though solve the problem of operational response speed, no overload page, and avoid frequent sending requests to the server, but if the user is not a menu Operation or only a part of the menu, the part of the data is used to be redundant data, especially if the menu structure is complex, the data is large (for example, the menu has Many levels, each group has hundreds of projects), which is more prominent.
Now use Ajax, when we initialize the page, we only read all the data of its first level and display it. When the user operates one menu, it will request the current level project to the background to the background. All data, if you continue to request an item in the second-level menu that has been rendered, then request all the data of all the three-level menus corresponding to the second-level menu item, in this class ... This way, what is it? What is taking, how much it takes, does not have data redundancy and waste, reducing the total data download, and updating the page does not need to overload all content, only the part of the update is needed, it is relative to the background The processing and overloading method shorten the user waiting time and minimizes the waste of resources.
Example 3: Reading external data AJAX to call external data, so some development data can be used for secondary processing, and data integration or development applications can be implemented in the RSS document.
Six, Ajax's defect
Ajax is not perfect technology. Using Ajax, some of its defects have to be tried:
Ajax uses the JavaScript and Ajax engines, which depend on the support of the browser. IE5.0 and above, Mozilla 1.0, Netscape7 and above are supported, although Mozilla also supports Ajax, but the way to provide XMLHttpRequest is different. So, using AJAX programs must test compatibility for each browser. When the AJAX updates the page content, there is no refreshing page, so the backup function of the web page is invalid; some users often don't know that the current data is old or has been updated. This needs to remind the user "data has been updated" in the obvious position. The support of the streaming media does not have flash, Java Applet. Some handheld devices (such as mobile phones, PDA, etc.) are still not well supported by Ajax.
