The definition and summarization of Ajax __ajax

Combine some of the documentation to explore where the Ajax magic is.

Ajax (that is, asynchronous JavaScript and XML) is a Web application development tool that uses client script to exchange data with a Web server. Therefore, you can dynamically update Web pages without having to use a full page refresh that interrupts interaction. With Ajax, you can create richer, more dynamic WEB application user interfaces, with immediacy and availability even closer to native desktop applications.
　　
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,
Use JavaScript to bind and process all data.

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 sends the requested
The user returns an HTML page. 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. In addition, at some point,
I just want to change the page a small part of the data, then why do I have to reload the entire page? When software design is more and more humane, such a bad user experience is simply the principle
Opposite. 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 the Ajax engine with JavaScript instead of generating an HTTP
User action, in-memory data editing, page navigation, data validation these requirements that do not need to reload the entire page can be handed to Ajax for execution.


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, do not need to appear like reload white screen situation, Ajax use
The XMLHTTP object sends the request and gets a response from the server, and uses 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.
Seven, Ajax development
Here, you can already know what Ajax is, what Ajax can do, and where the Ajax is bad. If you think Ajax is really going to improve your development effort, go ahead and see how to use Ajax.
7.1, AJAX applications to the technology
Of the 7 technologies involved in Ajax, individuals think JavaScript, XMLHttpRequest, DOM, and XML are more useful.

A, XMLHttpRequest objects
XMLHttpRequest is the object of the XMLHTTP component, through which Ajax can only exchange data levels with the server like a desktop application, without refreshing the interface every time, and without handing over data processing to the server every time. This reduces the server burden, accelerates the response speed, and shortens the time that users wait.
IE5.0 begins, developers can use the XMLHTTP ActiveX component inside a Web page to extend their functionality without having to navigate directly from the current Web page to the server or receive data from the server. , Mozilla1.0 and NetScape7 are proxy classes that create inherited XML XMLHttpRequest; For most cases, XMLHttpRequest objects are similar to XMLHTTP components, with methods and properties similar, except for partial properties.
XMLHttpRequest Object initialization:
<script language= "JavaScript" >
var http_request = false;
IE browser
Http_request = new ActiveXObject ("Msxml2.xmlhttp");
Http_request = new ActiveXObject ("Microsoft.XMLHTTP");
Mozilla browser
Http_request = new XMLHttpRequest ();
</script>
Ways to XMLHttpRequest objects:
Method description
Abort () Stop the current request
getAllResponseHeaders () returns the complete headers as a string
getResponseHeader ("Headerlabel") returns a single header label as a string
Open ("Method", "URL" [, asyncflag[, "UserName" [, "Password"]]) sets the target URL, methods, and other parameters for pending requests
Send (content) request
setRequestHeader ("label", "value") sets the header and sends it along with the request
Properties of the XMLHttpRequest object:
Attribute description
onReadyStateChange event triggers with state changes
ReadyState Object State (integer): 0 = uninitialized 1 = read 2 = Read 3 = Interactive 4 = complete
ResponseText The server process returns a text version of the data
Responsexml a compatible DOM XML Document object that returns data to the server process
Status code returned by the status server, such as: 404 = "File not found", 200 = "Success"
StatusText status text information returned by the server

B, Javascript
JavaScript has always been positioned as a scripting language for clients, and the most widely used is the validation of form data. Now, you can work with a database by using JavaScript to manipulate XMLHttpRequest.

C, DOM
DOM (document Object Model) is a set of APIs that is provided to HTML and XML, provides a presentation structure for the file, and can be used to change the content and visibility of it. Scripting languages can interact with pages through the DOM. The properties, methods, and events that Web developers can manipulate and create files are presented as objects. For example, document represents the Page object itself.

D, XML
Through XML (extensible Markup Language), we can standardize the definition of structured data, the data and documents transmitted on the Internet conform to the unified standard. Data and documents expressed in XML can be easily shared by all programs.