The working principle of Ajax __ajax

Main reasons to use Ajax: 1, through the appropriate AJAX application to achieve a better user experience; 2, the previous work of some server to the client, to help 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.

Ajax is the abbreviation for asynchronous JavaScript and XML. 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;

Working principle

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, and the Ajax engine submits the request to the server only if it is determined that the new data needs to be read from the server.

Ajax has only the core of JavaScript, XMLHttpRequest and Dom, in the old interactive way, the user triggers an HTTP request to the server, the server processing it and then returns a new HTHL page to the client, whenever the server processing the client submitted requests, Customers can only wait, and even if only a small interaction, only to get a very simple data from the server side, to return a full HTML page, and users each time to waste time and bandwidth to re-read 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 the fact that you can transfer or read or write data to the server without refreshing the page (also known as no Refresh Update page), which is mainly thanks to the XMLHTTP component XMLHttpRequest object.

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

setRequestHeader ("label", "value") sets the header and sends it along with the request (the ' post ' method must)

XMLHttpRequest Object Attribute Description

onReadyStateChange event triggers for state change, ReadyState object State (integer):

0 = uninitialized 1 = read 2 = Read 3 = 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.

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), which provides the support for reading and writing of the objects in the Web page.

4, XML

Extensible Markup Language (extensible Markup Language) has an open, extensible, self-describing language structure that has become the standard for data and document transmission on the web.

5, comprehensive

The Ajax engine, in fact, is a more complex JavaScript application used to process user requests, read and write servers, and change DOM content. The JavaScript Ajax engine reads the information and interactively rewrites the DOM, which enables the web to be seamlessly refactored, which is the way that we've been using JavaScript and DOM to change the content of the page, which we've always used in a wide variety of ways, but to make the page truly dynamic, Not only to internal interaction, but also to obtain data from the outside, in the past, we are to allow users to enter data and through the DOM to change the content of the page, but now, XMLHttpRequest, we can not overload the page to read and write data on the server, so that the user's input to the minimum.

Ajax separates the interface from the application in the Web (or the separation of the data from the presentation), whereas in the past there was no clear boundary between the separation of data and presentation, which was beneficial to the Division of labor and the reduction of Web application errors caused by non-technical changes to the page, increased 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 updates the prologue, and there is a substitute for traditional web development in the form (form) submitted to update the trend of the Web page.

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;

3, can also put some of the previous server burden of work to the client, to facilitate the client idle processing capacity to deal with, reduce the burden of server and bandwidth, save space and bandwidth rental costs;

4, Ajax makes the Web interface and application separation (also can be said to be separated from the data and presentation);