Ajax full access

From: http://www.dragonson.com/doc/ajax.html
I. Main reasons for using Ajax 1. Better User experience through appropriate Ajax applications;
2. Transfer the previous server workload to the client, which facilitates the idle processing capability of the client to reduce the burden on the server and bandwidth, this saves ISP space and bandwidth rental costs. Ii. References Jesse James Garnett, the earliest author of the Ajax concept, believes that:
Ajax is short for Asynchronous JavaScript and XML.
Ajax is not a new language or technology. It is actually a combination of several technologies in a certain way to play their respective roles in the same collaboration, including
Use XHTML and CSS for standardized rendering;
Use dom for Dynamic Display and interaction;
Use XML and XSLT for data exchange and processing;
Use XMLHttpRequest for asynchronous data reading;
Finally, use JavaScript to bind and process all data;
The working principle of AJAX is equivalent to adding an intermediate layer between the user and the server, so that user operations and server responses are asynchronous. Not all user requests are submitted to the server, for example, some data verification and data processing are handed over to the Ajax engine, the Ajax engine submits requests to the server only when it is determined that new data needs to be read from the server.
Figure 2-1

Figure 2-2 3. Overview although garrent lists seven Ajax components, I personally think that the core of the so-called Ajax is JavaScript, XMLHttpRequest, and Dom, if the data format is XML, you can add XML (the data returned by Ajax from the server can be XML or text or other formats ).
In the old interaction mode, the user triggers an HTTP request to the server. After the server processes the request, it returns a new hthl page to the client, each time the server processes a request submitted by the client, the client can only wait idle, and even if it is only a small interaction, it only needs to get a simple data from the server, you must return a complete HTML page, and each time you have to waste time and bandwidth to re-read the entire page.
After Ajax is used, users feel that almost all operations will quickly respond to the waiting without page overloading (white screen.
1. XMLHttpRequest
One of the biggest features of AJAX is that data can be transmitted to or read/written to the server without refreshing the page. This feature is mainly due to the XMLHTTPRequest object of the XMLHTTP component. In this way, you can send a desktop application Program Exchange data only with the server, instead of refreshing the interface every time or submitting data processing to the server, in this way, the server load is reduced, the response speed is accelerated, and the user waiting time is shortened.
Microsoft was the first to apply XMLHTTP. IE (ie5 or above) allowed developers to use the XMLHTTP ActiveX component to expand their functions on the web page, developers can directly transfer data to the server or retrieve data from the server without having to navigate the current web page. This function is very important because it helps reduce the pain of stateless connections. It can also eliminate the need to download redundant HTML, thus improving the process speed. Mozilla (mozilla1.0 or later and netscape7 or later) responds by creating its own inherited XML proxy class: XMLHttpRequest class. Konqueror (similar to Safari v1.2 and khtml-based browsers) also supports XMLHttpRequest objects, while opera will also support XMLHttpRequest objects in Versions later than v7.6x +. In most cases, the XMLHTTPRequest object is similar to the XMLHTTP component, and the methods and attributes are similar, but a small part of the attributes are not supported.
Application of XMLHttpRequest: Application of XMLHttpRequest object in JS
VaR XMLHTTP = new XMLHttpRequest ();
Application of Microsoft XMLHTTP component in JS
VaR XMLHTTP = new activexobject (Microsoft. XMLHTTP );
VaR XMLHTTP = new activexobject (msxml2.xmlhttp );

XMLHTTPRequest object method /**
* Cross-browser XMLHttpRequest instantiation.
*/

If (typeof XMLHttpRequest = "undefined "){
XMLHttpRequest = function (){
VaR msxmls = ["msxml3", "msxml2", "Microsoft"]
For (VAR I = 0; I <msxmls. length; I ++ ){
Try {
Return new activexobject (msxmls [I] + ". XMLHTTP ")
} Catch (e ){}
}
Throw new error ("No XML component installed! ")
}
}
Function createxmlhttprequest (){
Try {
// Attempt to create it "The Mozilla way"
If (window. XMLHttpRequest ){
Return new XMLHttpRequest ();
}
// Guess not-now the IE way
If (window. activexobject ){
Return new activexobject (getxmlprefix () + ". XMLHTTP ");
}
}
Catch (Ex ){}
Return false;
};

XMLHTTPRequest object Method

Method	Description
Abort ()	Stop current request
GetAllResponseHeaders ()	Returns the complete headers as a string.
GetResponseHeader ("headerlabel ")	Returns a single header tag as a string.
Open ("method", "url" [, asyncflag [, "username" [, "password"])	Set the target URL, method, and other parameters for pending requests
Send (content)	Send request
SetRequestHeader ("label", "value ")	Set the header and send it together with the request

XMLHTTPRequest object attributes

Attribute	Description
Onreadystatechange	Event triggers with status changes
Readystate	Object status (integer ): 0 = not initialized 1 = reading 2 = read 3 = interaction in progress 4 = complete
Responsetext	The text version of the data returned by the server process
Responsexml	XML document objects compatible with Dom returned by Server Processes
Status	Status Code returned by the server, for example, 404 = "found at the end of the file", 200 = "successful"
Statustext	Status text returned by the server

2. Javascript
Javascript is widely used in browsers. Programming Language , He used to be devalued as a bad language (he is really boring ), it is often used for show-off gadgets, pranks, or monotonous form verification. But the fact is that he is a real programming language, has its own standards and is widely supported in various browsers.
3. Dom
Document Object Model.
Dom is a set of APIS for HTML and XML files. It provides the structure of the file, allowing you to change the content and visible objects. In essence, it is a bridge between web pages and scripts or programming languages.
All the attributes, methods, and events that web developers can operate and create files are displayed as objects. For example, document represents the object, table objects represent HTML table objects ). These objects can be used as scripts by most browsers today.
A webpage built with HTML or XHTML can also be seen as a group of structured data, which is blocked in the DOM (Document Object Model, dom supports reading and writing of objects in a webpage.
4. xml
The Extensible Markup Language (Extensible Markup Language) has an open, scalable, and self-descriptive language structure that has become the standard for online data and document transmission. It is a language used to describe the data structure, just like its name. He makes it easier to define some structured data and can exchange data with other applications.
5. Comprehensive
The Ajax engine mentioned by Jesse James Garret is actually a complicated JavaScript Application that processes user requests, reads and writes servers, and changes Dom content.
The Ajax engine of JavaScript reads information and interactively overwrites the Dom, which enables the webpage to be modularized and restructured, that is, after the page has been downloaded, the page content is changed, this is a method that we have been using JavaScript and Dom extensively. However, to make webpages truly dynamic, not only internal interaction, but also external data needs to be obtained. In the past, we allow users to input data and Change Webpage content through DOM. But now, XMLHttpRequest allows us to read and write data on the server without reloading the page, minimize user input.
XML-based network communication is not a new thing. In fact, flash and Java Applet both have a good performance. Now this rich interaction is available on the web page, it is based on standardized and widely supported technologies, and does not require plug-ins or downloading applets.
Ajax is a transformation of traditional Web applications. Previously, the server generated HTML pages each time and returned them to the client (browser ). In most websites, at least 90% of the pages are the same, such as the structure, format, header, footer, and advertisement. The difference is only a small part of the content, but every time the server generates all the pages and returns them to the client, this is an invisible waste, whether it is for the user's time, bandwidth, CPU consumption, for ISP bandwidth and space rented at high prices. If you calculate by one page, only a few K or dozens of K may be inconspicuous, but for example, a large ISP that generates millions of pages every day in Sina, it can be said that the loss is huge. AJAX can process client requests as the middle layer of the client and server, and send requests to the server as needed, there will be no data redundancy or waste, reducing the total amount of data downloads. In addition, you do not need to reload all the content when updating the page, just update the part that needs to be updated, compared with the pure background processing and reload method, this method shortens the user wait time and minimizes the waste of resources. Based on standardized and widely supported technologies, there is no need for plug-ins or downloading small programs, so Ajax is double-profit for users and ISPs.
Ajax separates web interfaces from applications (data and presentation). In the past, there were no clear boundaries between the two. Data and presentation were separated, it is conducive to the division of labor and cooperation, reduces web application errors caused by non-technical staff modification, improves efficiency, and is more suitable for the current release system. You can also transfer the previous server workload to the client, which facilitates the idle processing capability of the client. 4. The emergence of the Ajax concept opens the prelude to the non-Refresh page era, and there is a tendency to update web pages by submitting forms in traditional web development, it can be regarded as a milestone. However, Ajax is not applicable in all places, and its applicability is determined by its features.
An example of an application is an Ajax application on cascading menus.
We previously processed cascading menus as follows:
To avoid page overloading caused by each menu operation, instead of calling the background every time, all the data in the cascading menu is 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.
If Ajax is applied in this case, the results will change:
On the initialization page, we only read and display all the data of the first level, 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.
In addition, AJAX can call external data or aggregate data (authorization required), such as the beta version of online RSS reader launched by Microsoft in March 15; it also facilitates some open data and develops some applications, such as some novel book search applications using Amazon data.
In short, Ajax is suitable for Web applications with high interactions, frequent data reading, and good data classification. V. Ajax advantages 1. reduce the burden on the server. Because the fundamental idea of AJAX is to "retrieve data on demand", it is possible to minimize the burden on servers caused by redundant requests and sound shadows;
2. The page is refreshed to reduce the user's actual and psychological waiting time;
First, the "retrieve data on demand" mode reduces the actual amount of data read, if the method of overloading is to return from one end point to the origin point and then to another end point, Ajax means to reach another end point based on one end point;
Figure 5-1

Figure 5-2

second, even if you want to read large data, you do not need to use a white screen like Reload. Because Ajax uses XMLHTTP to send a request to obtain the server response data, when the entire page is not re-loaded, JavaScript is used to operate the Dom to finally update the page. Therefore, when reading data, the user is not facing a white screen, but the original page status (or you can add a loading prompt box to let the user know the status of Data Reading). The content of the corresponding part is updated only after receiving all the data, this kind of update is also instantaneous, and users can hardly feel it. In short, users are very sensitive. They can feel that you are considerate to them. Although they are unlikely to have immediate results, they will accumulate their dependence on the website by 1.1 in the hearts of users.
3. Better User Experience;
4. You can also transfer the previous server workload to the client, this helps clients handle idle processing capabilities, reduces the burden on servers and bandwidth, and saves space and bandwidth rental costs;
5. Ajax can call external data;
6. Standard-based and widely supported and widely used technologies. Plug-ins or downloading applets are not required;
7. Ajax isolates the web interface from the application (data and presentation );
8. This is a double profit for users and ISPs. 6. Ajax Problems 1. Some handheld devices (such as mobile phones and PDAs) cannot support Ajax yet;
2. Javascript-based Ajax engines, JavaScript compatibility, and debug are all headaches.
3. No need to reload Ajax, because the page changes are not as obvious as refresh and reload, it is easy to cause problems to users-users are not sure whether the current data is new or updated. The existing solutions include: the location prompts and data update areas are clearly designed, and user prompts are provided after the data is updated.
4. Streaming Media Support is not as good as flash and Java Applet; 7. Conclusion: Better Ajax applications require more client development and reflection on current web application concepts. A good user experience comes from the idea of thinking for users everywhere, not simply a technology. 8. Demo Ajax image browser Demo:
http://www.DragonSon.com/pic/

Huashanlin notes:

1, TraditionalWebApplication Model andAjax WebApplication Model Comparison
[Missing diagram]
2,AjaxCommunication Technology

CurrentlyAjaxThe communication technology used includes two aspects:

(1) Frame Hiding Technology(Hidden Frame)

This hidden frame is used for client-server communication. You can set the width and height of the frame0Pixel to hide a frame.

[Missing diagram]
Advantages:

The biggest reason for using hidden frames is that it can maintain the browser's history so that users can still use the forward and backward buttons on the browser.

This isGmailAndGoogle MapWhy the technology is still used

Disadvantages:

The disadvantage of this technology is that you have little knowledge about what is happening behind it. For background eventsHTTPThe specific content of the request lacks sufficient information. When the Hidden Frame page fails to be loaded, it may not be known, although there are still some alternatives to remedy.

(2)XMLHTTPRequest

In Microsoft Ie5.0 Introduced MSXML Of Active Library, which provides XMLHTTP Object
[Missing diagram]
XMLHTTP Object provides XML A simple way to access information in the document format. XMLHTTP Objects are more like Javascript Specific HTTP Request

Currently, all existing browsers provideXMLHTTPObject support.

advantages: Compared with hidden frames, use XMLHTTP object substitution for hidden frames also enables communication between the client and the server, the written Code is clearer and the meaning of the Code An image is easier to understand than a large number of callback functions in hidden frames. You can also access HTTP status code, this allows you to determine whether the request processing is successful.

disadvantage: the browser's historical records cannot be saved as hidden frames. The browser's backward and forward buttons do not have the XMLHTTP requests are bound together and thus will be ineffective.

Another disadvantage: It only exists inIEIn the browserActiveWhen using the control, this will not be accessibleXMLHTTPObject. In this case, only the frame hiding technology can be used.

Conclusion:

Both communication technologies have their own advantages and disadvantages. Therefore, when used together, a more available user interface can be generated.

3 , Ajax It is not a professional technical term, but a synonym after the combination of several technologies. Actually Ajax Several technologies have existed and developed for a long time 2005 Year 2 Month, Adative path Company Jesse James garret An article published onlineArticleThe name is 《 Ajax : Web The New Method for application development, which explains why Web Applications are bridging the gap with traditional desktop applications. Several new technologies are introduced Google Project as an example to illustrate how to apply the traditional desktop-based application user interaction mode Web . In his article, a word is introduced: Ajax This is short "--". Ajax As a result, articles, application code, and disputes are spread on the Internet.

 

4,AjaxTechnology behind

Html/XHTML

CSS

Dom

XML

XSLT

XMLHTTP