Ajax technology (web without refreshing submit data)

ajax|web| Data | refresh | no refresh Ajax internal communication document one, the main reason for using Ajax
1, through the appropriate AJAX application to achieve a better user experience;
2, some of the previous server burden to the client, to facilitate the client idle processing capacity to deal with, reduce the burden of server and bandwidth, so as to save the ISP space and bandwidth rental costs.
Second, the reference
Ajax This concept of the earliest proposed by Jesse James Garrett that:
Ajax is the abbreviation 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 role in the same collaboration, it includes
Standardized rendering using XHTML and CSS;
Use DOM to implement dynamic display and interaction;
Data exchange and processing using XML and XSLT;
Using XMLHttpRequest for asynchronous data reading;
Finally, bind and process all data with JavaScript;
Ajax works by adding a middle tier between the user and the server, enabling the user to respond asynchronously to the server.
Not all user requests are submitted to the server, such as data validation and processing, which are given to the AJAX engine itself
The Ajax engine submits the request to the server only if it is determined that new data needs to be read from the server.
Iii. Overview
Although Garrent lists 7 Ajax components, it is personally believed that the so-called Ajax core is only JavaScript, XMLHttpRequest and Dom,
If the data format is XML, you can add XML as well (the data that Ajax returns from the server side can be in XML format, or in other formats such as text).
In the old interactive way, the user triggers an HTTP request to the server, the server processes it, and then returns a new HTHL page to the client,
Each time the server processes a client-submitted request, the customer can only wait, and even if it is only a small interaction,
By simply getting a very simple piece of data from the server, you return a full HTML page, and the user wastes time and bandwidth each time to reread the entire page.
With Ajax, the user will quickly respond to a wait without a page overload (screen) from almost every operation it feels.
1, XMLHttpRequest
One of the biggest features of Ajax is that you can transfer or read or write data to the server without refreshing the page (also known as no Refresh update page),
This feature mainly benefits from the XMLHTTP component XMLHttpRequest object. This allows the secondary desktop application to be exchanged only with the server for the data level,
Instead of refreshing the interface every time, you do not have to submit the data to the server every time.
This reduces the burden on the server, accelerates the response, and shortens user waiting times.
The first applications xmlhttp Microsoft, IE (IE5) by allowing developers to use XMLHTTP ActiveX components within a Web page to extend their functionality,
Developers can transmit data directly to or from the server without navigating from the current Web page.
This feature is important because it helps to reduce the pain of stateless connections, and it also eliminates the need to download redundant HTML, thereby increasing the speed of the process.
The response of Mozilla (Mozilla1.0 above and above NetScape7) is to create its own inherited XML proxy class:
XMLHttpRequest class. Konqueror (and Safari v1.2, also a khtml based browser) also supports XMLHttpRequest objects,
Opera will also support XMLHttpRequest objects in later versions of its v7.6x+. For most cases,
XMLHttpRequest objects are similar to XMLHTTP components, and methods and properties are similar, except that a small subset of properties are not supported.
Application of XMLHttpRequest:
IE Support
if (window. ActiveXObject &&!window. XMLHttpRequest) {
Window. XMLHttpRequest = function () {
return new ActiveXObject (Navigator.userAgent.toLowerCase (). IndexOf (' msie 5 ')!=-1)? ' Microsoft.XMLHTTP ': ' msxml2.xmlhttp ');
};
}
Text processing for server process return data
Get Requests
Example:
var req = new XMLHttpRequest ();
if (req) {
Req.onreadystatechange = function () {
if (req.readystate = = 4 && req.status = 200) {
alert (Req.responsetext);
}
};
Req.open (' Get ', ' pageurl.html ');
Req.send (NULL);
}
POST Requests
Example:
var req = new XMLHttpRequest ();
if (req) {
Req.onreadystatechange = function () {
if (req.readystate = = 4 && req.status = 200) {
alert (Req.responsetext);
}
};
Req.open (' POST ', ' scripturl.cgi ');
Req.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Req.send (' var1=data1&var2=data2 ');
}
XMLHttpRequest Object 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 (Param must do this, because the background can not get hidden params)
setRequestHeader ("label", "value") sets the header and sends it along with the request (the ' post ' method must)
XMLHttpRequest Object Attribute Description
onReadyStateChange state-Changed event triggers (Req.open (' post ', ' servlet ') or Req.open (' post ', ' servlet ', true) when asynchronous processing
ReadyState Object State (integer):
0 = not initialized
1 = in read
2 = Read
3 = in interaction
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
Responsebody server returned theme (non-text format)
Responsestream the data stream returned by the server
Status code returned by the status server, such as: 404 = "Found at end of file", 200 = "Success"
StatusText status text information returned by the server
2. JavaScript
JavaScript is a programming language that is used heavily in browsers, and he has been degraded to a bad language (he does use it rather boring),
In a form that is often used to show off gadgets and pranks or monotonous trivial forms. But the truth is, he's a real programming language,
has its own standards and is widely supported in various browsers.
3, DOM
Document Object Model.
A DOM is a set of APIs for use with HTML and XML files. It provides a structural representation of the file, allowing you to change the contents and visible objects.
Its essence is to build a bridge between Web pages and Script or program language.
The properties, methods, and events that all Web developers can manipulate and create files are represented by objects (for example, the document represents the "file itself" image,
The Table object represents the HTML table object, and so on). These objects can be used by most browsers in today's Script.
A Web page built with HTML or XHTML can also be viewed as a structured set of data that is blocked in the DOM (Document Object Model).
The DOM provides support for reading and writing of individual objects in a Web page.
function loadcnt () {
var req=new xmlhttprequest ();
if (req) {
Req.onreadystatechange=function () {
if (req.readystate==4 && req.status==200) {
if (req.responsetext!=-1) {
Nodes=req.responsexml.documentelement.childnodes;
Browse_cnt.innertext=nodes.item (0). text;
Comment_cnt.innertext=nodes.item (1). text;
Score_cnt.innertext=nodes.item (2). text;
}
}
}
Req.open (' POST ', ' $path/ajaxcntctrl ');
Req.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Req.send ("photo_id=" +document.form1.photo_id.value);
}
}
ResponseXML.documentElement.getAttribute (' stat ') = = ' OK '
ResponseXML.documentElement.getElementsByTagName (' title ') [0].firstchild.data;
4, XML
Extensible Markup Language (extensible Markup Language) has an open, extensible, self-describing language structure,
It has become the standard for data and document transmission on the web. It is a language used to describe data structures, just like his name.
He makes it easier to define some structured data, and he can exchange data with other applications.

5, comprehensive
The Ajax engine that Jesse James Garrett refers to is actually a more complex JavaScript application that handles user requests,
Read and write servers and change DOM content.
JavaScript's Ajax engine reads the information and interactively rewrites the DOM, which enables the Web page to be seamlessly refactored,
That is, after the page has been downloaded, change the page content, which we have been using JavaScript and Dom in a wide range of methods,
But to make the page really dynamic, not only to internal interaction, but also to obtain data from the outside, in the past,
We are allowing users to enter data and change the content of the page through the DOM, but now, XMLHttpRequest,
Allows us to read and write the data on the server without overloading the page so that the user's input is minimal.
Xml-based network communication is not new, in fact, Flash and Java applets have a good performance, now this rich interaction on the Web page is also available,
Standards-based and widely supported and technical, and does not require plug-ins or download small programs.
Ajax is a transformation of traditional Web applications. Previously, the server generated the HTML page every time and returned it to the client (browser).
In most websites, at least 90% of the pages are the same: structure, format, header, footer, AD, etc.
The difference is only a small part of the content, but each server will generate all the pages and then return to the client, which is a waste of intangible,
Whether it's for user time, bandwidth, CPU consumption, or bandwidth and space for an ISP's high-priced lease. If you count by one page,
Only a few k or dozens of k may not be noticeable, but like Sina to generate millions of pages a day large ISP, can be said to be a huge loss.
Ajax can be the middle tier of both the client and the server to handle the client's requests and send requests to the server as needed.
Use what to take, how much to take, there will be no data redundancy and waste, reduce the amount of data download,
and update the page without overloading the entire content, only to update the part that needs to be updated, relative to the pure background processing and overloading the way to shorten the user wait time,
Also minimizes waste to resources, based on standardized and widely supported and technology, and does not require plug-ins or download small programs,
So Ajax is a double profit for users and ISPs.
Ajax separates the interface from the application in the Web (or the separation of data from the presentation), and in the past there was no clear boundary between the two.
Separation of data from presentation is beneficial to the Division of labor and to the reduction of Web application errors caused by non-technical changes to the page, increasing efficiency,
is also more applicable to the current release system. Can also put some of the previous server burden of work to the client, to facilitate the client idle processing capacity to deal with.
Four, the application
The emergence of Ajax concept, opened the era of refreshing update page, and there is a substitute for traditional web development in the form (form) submitted to update the trend of Web pages,
Can be regarded as a milestone. But Ajax does not apply to all places, its scope is determined by its characteristics.
An example of an application is the AJAX application of cascading menus.
Our previous approach to cascading menus is this:
In order to avoid the overload page that is caused by each action on the menu, do not take the back-end of each call
Instead, read all the data for the cascading menu all at once and write to the array, and then use JavaScript to control the rendering of its subset items based on the user's actions,
This solves the problem of operating response speed, not overloading the page, and avoiding sending requests frequently to the server.
However, if the user does not manipulate the menu or only part of the menu,
That part of the data that is read will become redundant data and waste the user's resources, especially in the case of complex menu structure and large amount of data
(such as the menu has many levels, each level of food and hundreds of items), this abuse is more prominent.
If Ajax is applied in this case, the results will be improved:
When we initialize the page, we read only the first level of all the data and show that when the user operates one of the menu items,
All data from 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 in 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 redundancy and waste of data, reduce the amount of data download, and update the page without overloading the entire content, only update the part that needs to be updated,
Compared to the background processing and overloading of the way to shorten the user waiting time, but also to minimize the waste of resources.
In addition, Ajax can also implement data aggregation because of its ability to invoke external data (and, of course, authorize it),
For example, the beta version of the online RSS reader, which Microsoft just released on March 15, can also benefit some open data, develop some of its own applications,
For example, using Amazon's data for some novel book Search applications.
In short, Ajax is suitable for Web applications that have more interaction, read data frequently, and classify data in a good way.
V. Advantages of Ajax
1, reduce the burden on the server. Because the fundamental idea of Ajax is "on-demand data", it is most likely to reduce the burden on the server of redundant requests and echoes;
2, no Refresh update page, reduce user actual and psychological waiting time;
First, the "on-demand data" model reduces the actual amount of data read, and, in a very figurative way,
If the way of overloading is to return from one end point to another, then Ajax is to reach another end point based on one endpoint;
Second, even if you want to read larger data, do not need to appear like reload white screen situation, because Ajax is sent with XMLHTTP request to get the server response data,
Using JavaScript to eventually update the page without loading the entire page, so in the process of reading the data,
The user is not faced with a white screen, but the original page state (or can add a loading to the user to understand the state of the data read),
The content of the corresponding section is updated only after receiving all the data, and the update is instantaneous, and the user can hardly feel it. In short, the user is very sensitive,
They can feel your thoughtfulness for them, though not likely to have immediate effect, but will accumulate their reliance on the site in the user's mind little by little.
3, a better user experience;
4, also can put some of the previous server burden of work to the client, conducive to client idle processing capacity to deal with,
Reduce the burden of server and bandwidth, save space and bandwidth rental costs;
5, Ajax because it can call external data;
6, based on standardized and widely supported and technology, and do not need Plug-ins or download small programs;
7, Ajax makes the Web interface and application separation (also can be said to be separated from the data and presentation);
8, for users and ISPs are double surplus.
Vi. Problems with Ajax
1, some handheld devices (such as mobile phones, PDAs, etc.) are not good enough to support Ajax;
2, with JavaScript Ajax engine, JavaScript compatibility and debug is a headache;
3, Ajax no refresh overload, because the page changes do not refresh the overload so obvious,
So it's easy to bring trouble to users-users are not sure whether the current data is new or updated; Existing solutions are:
In the related position hints, the Data update area design is more obvious, the data updates gives the user prompt and so on;
4, the streaming media support no flash, Java applet good;
Vii. concluding remarks
Better AJAX applications, need more client development, and thinking about the current Web application concept, and a good user experience,
Comes from the idea of being considered by every user, not simply a technology.