1. The main reasons for using Ajax
1. To achieve a better user experience through appropriate Ajax applications;
2. To transfer some of the previous work burdened by the server to the client, which is beneficial to the client's idle processing power and reduces server and bandwidth burden, thereby achieving the purpose of saving the ISP's space and bandwidth rental costs.
2. Quote
Jesse James Garrett, the earliest proposer of the concept of Ajax, believes that Ajax is the abbreviation of Asynchronous JavaScript and XML. Ajax is not a new language or technology. It is actually several technologies combined in a certain way to play their respective roles in a common collaboration. It includes:
· Using XHTML and CSS to standardize presentation;
· Using DOM Realize 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 a A middle layer is created to asynchronously make user operations and server responses asynchronous. Not all user requests are submitted to the server. Some data verification and data processing are left to the Ajax engine itself. Only when it is determined that new data needs to be read from the server, the Ajax engine will submit the request to the server on its behalf.
3. Overview
Although Garrent listed 7 Ajax constituent technologies, I personally believe that the core of so-called Ajax is only JavaScript, XMLHTTPRequest and DOM. If the data format used is XML, XML can also be added (Ajax starts from the server side) The returned data can be in XML format or other formats such as text).
In the old interaction method, the user triggers an HTTP request to the server, and the server processes it and then returns a new HTHL page to the client. Whenever the server processes a request submitted by the client, the client can only wait idle. , and even if it is just a small interaction and only needs to get a simple piece of data from the server, a complete HTML page must be returned, and the user has to waste time and bandwidth to re-read the entire page every time.
After using Ajax, users feel that almost all operations will respond quickly without waiting for page reload (white screen).
1. XMLHTTPRequest
One of the biggest features of Ajax is that it can transmit or read and write data to the server without refreshing the page (also known as updating the page without refreshing). This feature mainly benefits from the XMLHTTP component XMLHTTPRequest object. In this way, the desktop application can only exchange data with the server without having to refresh the interface every time or submit the data processing work to the server every time. This not only reduces the load on the server but also speeds up the processing time. Response speed and shortened user waiting time.
Microsoft was the first to apply XMLHTTP. IE (IE5 and above) expands its functions by allowing developers to use XMLHTTP ActiveX components inside Web pages. Developers can directly transfer data to or retrieve data from the server without navigating from the current Web page. data. This feature is important because it helps reduce the pain of stateless connections, and it can also increase the speed of the process by eliminating the need to download redundant HTML. Mozilla (Mozilla 1.0 and above and NetScape 7 and above) responded by creating its own inherited XML proxy class: the XMLHttpRequest class. Konqueror (and Safari v1.2, also a KHTML-based browser) also supports the XMLHttpRequest object, and Opera will also support the XMLHttpRequest object in its v7.6x+ and later versions. For the most part, the XMLHttpRequest object is very similar to the XMLHTTP component, and the methods and properties are similar, except that a small number of properties are not supported.
Application of XMLHttpRequest:
·Application of XMLHttpRequest object in JS
var xmlhttp = new XMLHttpRequest();
·Application of Microsoft's 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() | abort the current request |
| getAllResponseHeaders() | return the complete headers as a string |
| getResponseHeader("headerLabel") | return a single header label as a string |
| open("method","URL"[,asyncFlag[ ,"userName"[, "password"]]]) | Set the target URL, method, and other parameters of the pending request |
| send(content) | send the request |
| setRequestHeader("label", "value") | set the header and send it together with the request |
XMLHttpRequest object attribute
| attribute | description | |
| readyState | ||
| for | state change | |
| Object status (integer): 0 = not initialized 1 = Reading 2 = Read 3 = Interacting 4 = Complete | ||
| the text version of the data returned by the responseText server process | . | |
| The DOM-compatible XML document object returned by the | responseXML | server process.|
| status | code returned by the server, such as: 404 = "File not found", 200 = "Success" | |
| status returned by the | statusText | server.Text information |
2. JavaScript
JavaScript is a programming language widely used in browsers. It has been belittled as a bad language in the past (it is indeed boring to use) and is often used for some purposes. Showy gadgets and pranks or tedious form validation. But the fact is that it 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 a structural representation of the file, allowing you to change its content and visibility. Its essence is to establish a communication bridge between web pages and Script or programming languages.
All properties, methods and events that WEB developers can operate and create files are represented by objects (for example, document represents the "file itself" object, table object represents the HTML table object, etc.). These objects can be accessed from Script by most of today's browsers.
A web page built with HTML or XHTML can also be regarded as a set of structured data. This data is enclosed in DOM (Document Object Model). DOM provides support for reading and writing various objects in the web page.
4. XML
The Ajax engine mentioned by Jesse James Garrett is actually a relatively complex JavaScript application used to process user requests, read and write servers, and change DOM content.
JavaScript's Ajax engine reads the information and interactively rewrites the DOM. This allows web pages to be seamlessly reconstructed, that is, changing page content after the page has been downloaded. This is what we have been using extensively with JavaScript and the DOM. method, but to make a web page truly dynamic, it requires not only internal interaction, but also data acquisition from the outside. In the past, we let users enter data and change the content of the web page through the DOM, but now, XMLHTTPRequest allows us to Read and write data on the server without reloading the page, minimizing user input.
XML-based network communication is not new. In fact, both FLASH and JAVA Applet have performed well. Now this kind of rich interaction is also available on web pages. It is based on standardized and widely supported technologies and does not require plug-ins or plug-ins. Download the applet.
Ajax is a transformation of traditional WEB applications. In the past, the server generated an HTML page each time and returned it to the client (browser). In most websites, at least 90% of many pages are the same, such as: structure, format, header, footer, advertisements, etc. The only difference is a small part of the content, but every time the server will generate all Returning the page to the client is an invisible waste, whether it is the user's time, bandwidth, CPU consumption, or the bandwidth and space rented by the ISP at a high price. If calculated on a page basis, only a few K or dozens of K may not be impressive, but for a large ISP like SINA that generates millions of pages every day, it can be said to be a huge loss. AJAX can serve as the middle layer between the client and the server to handle the client's request and send the request to the server as needed. You can get what you use and how much you use, so there will be no redundancy and waste of data. , reducing the total amount of data downloaded, and there is no need to reload the entire content when updating the page. Only the part that needs to be updated can be updated. Compared with the pure background processing and reloading method, the user waiting time is shortened and the waste of resources is reduced. Minimized, based on standardized and widely supported technologies, and requiring no plug-ins or downloaded applets, Ajax is a win-win for both users and ISPs.
Ajax separates the interface and application in the WEB (it can also be said to separate data and presentation). In the past, there was no clear boundary between the two. The separation of data and presentation is conducive to division of labor and cooperation and reduces the need for non-technical personnel to interact with the page. The modification causes WEB application errors, improves efficiency, and is more suitable for the current publishing system. You can also transfer some of the previous work burdened by the server to the client, which is beneficial to the client's idle processing power.
4.
The emergence of the application of Ajax concept has opened the prelude to the era of updating pages without refreshing, and has the tendency to replace the use of form (form) submission in traditional web development to update web pages, which can be regarded as a milestone. But Ajax is not applicable everywhere, and its scope of application is determined by its characteristics.
An application example is an Ajax application for cascading menus.
Our previous processing of cascading menus was as follows:
In order to avoid reloading the page caused by each operation on the menu, we did not use the method of calling the background each time, but read all the data of the cascading menu at once. out and written into the array, and then use JavaScript to control the presentation of its subset of items based on the user's operations. This solves the problem of operation response speed, not reloading the page, and avoiding frequent requests to the server, but if the user does not respond to the menu If you operate or only operate on part of the menu, part of the read data will become redundant data and waste the user's resources, especially when the menu structure is complex and the amount of data is large (for example, the menu has There are many levels, and each level has hundreds of items), this disadvantage is even more prominent.
If Ajax is applied in this case, the result will be improved:
when initializing the page, we only read out all the data of the first level and display it. When the user operates one of the first-level menu items, the result will be sent to the user through Ajax. The background requests all the data of the second-level submenu to which the current first-level item belongs. If it continues to request an item in the already presented second-level menu, it then requests all the data of all third-level menus corresponding to the operated second-level menu item. Data, and so on... In this way, you can get whatever you use and as much as you need. There will be no redundancy and waste of data, reducing the total amount of data downloads, and there is no need to reload the entire content when updating the page, just Just update the part that needs to be updated. Compared with background processing and reloading, it shortens the user's waiting time and minimizes the waste of resources.
In addition, because Ajax can call external data, it can also realize the function of data aggregation (with corresponding authorization, of course), such as the BETA version of the online RSS reader just released by Microsoft on March 15; it can also facilitate the development of some open data Some of its own applications, such as some novel book search applications using Amazon's data.
In short, Ajax is suitable for WEB applications with a lot of interactions, frequent data reading, and good data classification.
1. Reduce the burden on the server. Because the fundamental concept of Ajax is "getting data on demand", it can reduce the burden caused by redundant requests and impact on the server to the greatest extent;
2. Update the page without refreshing, reducing the user's actual and psychological waiting time;
first, "press The "data required" mode reduces the actual amount of data read. To give a very vivid analogy, if the overloading method is to return to the origin from one end point and then to another end point, then Ajax is based on one end point. Reach another end point;
secondly, even if you want to read relatively large data, there is no need to have a white screen like RELOAD, because Ajax uses XMLHTTP to send requests to get server response data, without reloading the entire page. Use Javascript to operate the DOM and finally update the page, so during the process of reading data, the user is not faced with a white screen, but the original page status (or you can add a LOADING prompt box to let the user understand the data reading process status), only when all the data is received, the corresponding part of the content is updated, and this update is also instantaneous and almost imperceptible to the user. In short, users are very sensitive. They can feel your consideration for them. Although it is unlikely to have immediate results, it will accumulate their dependence on the website bit by bit in the hearts of users.
3. Better user experience;
4. It can also transfer some of the previous work burdened by the server to the client, which can be used by the client's idle processing power, reducing the burden on the server and bandwidth, and saving space and bandwidth rental costs;
5 , Ajax can call external data;
6. It is based on standardized and widely supported technology, and does not require plug-ins or downloaded applets;
7. Ajax separates the interface and application in the WEB (it can also be said to separate data and presentation) ;
8. It is a win-win situation for users and ISPs.
6. Problems with Ajax
1. Some handheld devices (such as mobile phones, PDAs, etc.) do not yet support Ajax well;
2. Ajax engines made with JavaScript, JavaScript compatibility and DeBugs are headaches;
3. , Ajax's non-refresh reload, because the page changes are not as obvious as refresh reload, so it is easy to cause trouble to users - users are not sure whether the current data is new or has been updated; existing solutions include: The relevant location prompts and data update areas are designed to be more obvious, and users are prompted after data updates, etc.;
4. The support for streaming media is not as good as FLASH and Java Applet;