Ajax asynchronous data Operations detailed (1/3)

Ajax asynchronous data Operation detailed

Ajax is all called "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), a Web development technology that creates interactive Web applications.

Mainly includes the following technologies:

The definition of Ajax (asynchronous JavaScript + XML)

A representation based on the Web Standard (standards-based presentation) xhtml+css;

Use DOM (Document Object Model) for dynamic display and interaction;

Use XML and XSLT for data exchange and related operations;

Using XMLHttpRequest to query and retrieve asynchronous data;

Use JavaScript to bind all things together. English See the author of Ajax The original of Jesse James Garrett A

Like DHTML or Lamp,ajax is not a single technology, but an organic use of a range of related technologies. In fact, some Ajax-based "derivation/Synthesis" (derivative/composite) technologies are emerging, such as "Aflax".

Ajax applications use a Web browser that supports the above technologies as a running platform. These browsers currently include: Mozilla, Firefox, Internet Explorer, Opera, Konqueror and Safari. However, Opera does not support XSL format objects, nor does it support XSLT.

Comparison with traditional Web applications

Traditional Web applications allow users to fill out forms, sending a request to the Web server when a form is submitted. The server receives and processes the form, and then returns a new page. This approach wastes a lot of bandwidth, because most of the HTML code in the last two pages is often the same. Because each application interaction needs to send a request to the server, the response time of the application depends on the response time of the server. This causes the user interface to respond much more slowly than the local application.

In contrast, AJAX applications can send and retrieve only the necessary data to the server, using SOAP or some other xml-based Web service interface, and using JavaScript on the client to handle the response from the server. Because the amount of data exchanged between the server and the browser is much reduced, the result is that we can see applications that respond faster. At the same time, a lot of processing work can be done on the requesting client machine, so the Web server has less processing time.

The advantage of AJAX applications is that:

1. Improved user experience through asynchronous mode

2. Optimizes the transmission between the browser and the server, reduces the unnecessary data round-trip, reduces the bandwidth occupation

3. The Ajax engine runs on the client, taking on a portion of the work that was originally undertaken by the server, thereby reducing the server load under large user capacity.

How Ajax Works

The core of Ajax is the JavaScript object XMLHttpRequest. This object was first introduced in Internet Explorer 5, which is a technology that supports asynchronous requests. In short, XMLHttpRequest allows you to use JavaScript to make requests to the server and process the response without blocking the user.

When you create a Web site, performing a screen update on the client provides a lot of flexibility for the user. Here are the features you can do with Ajax:

Dynamically update the total number of items in a shopping cart without requiring the user to click Update and wait for the server to resend the entire page.

Improves the performance of the site by reducing the amount of data downloaded from the server. For example, on a shopping cart page, when the number of items in a basket is updated, the entire page is loaded again, which must download the entire page's data. If you use Ajax to calculate the new total, the server will only return the new total, so the required bandwidth is only 1%. Eliminates page refreshes each time the user enters. For example, in Ajax, if a user clicks Next on a paging list, the server data refreshes the list instead of the entire page.
Edit the table data directly instead of requiring the user to navigate to the new page to edit the data. For Ajax, when a user clicks Edit, the static table can be refreshed to a table that is editable by the content. After the user clicks Done, an AJAX request can be made to update the server and refresh the table so that it contains static, read-only data.

Everything is possible! Hopefully it will inspire you to start developing your own AJAX based sites. Before we begin, however, let's introduce an existing Web site that follows the traditional submission/wait/re-display paradigm, and we'll discuss how Ajax can improve the user experience.

Ajax works by adding a middle tier between the user and the server, enabling the user to respond asynchronously to the server. In this way, some of the previous server burden of work to the client, 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.

We use two examples to verify the existence of the pass account to illustrate the application of Ajax in practice:

(1) A text string to return the response of the server to verify the existence of NetEase pass account;

(2) To return the response to XmlDocument object to verify the existence of Jinshan pass account;

First, we need JavaScript to create the XMLHttpRequest class to send an HTTP request to the server, the XMLHttpRequest class is first introduced by Internet Explorer as an ActiveX object, known as XMLHTTP. And then Mozilla? Netscape? Safari and other browsers also provide XMLHttpRequest classes, but they do not create xmlhttprequest classes in a different way.

For Internet Explorer browsers, create the XMLHttpRequest method as follows:

Xmlhttp_request = new ActiveXObject ("msxml2.xmlhttp.3.0"); 3.0 or 4.0, 5.0 xmlhttp_request = new ActiveXObject ("Msxml2.xmlhttp"); Xmlhttp_request = new ActiveXObject ("Microsoft.XMLHTTP");

Home 1 2 3 last