1. What is AJAX?

AJAX, Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications. It USES:

  • Use XHTML+CSS to standardize rendering;
  • Data exchange and related operations using XML and XSLT;
  • Asynchronous data communication with Web server using XMLHttpRequest object;
  • Using Javascript to operate the Document Object Model for dynamic display and interaction;
  • Use JavaScript to bind and process all data.

2. Compare with traditional Web applications

In a traditional Web application interaction, the user triggers an HTTP request to the server, which processes it and returns a new HTHL page to the client. Every time the server processes a request submitted by the client, the client has to wait idle and return a full HTML page for even a small interaction with a simple piece of data from the server, and the user wastes time and bandwidth to re-read the entire page each time. This wastes a lot of bandwidth, and since every application interaction requires a request to be sent to the server, the application’s response time depends on the server’s response time. This results in the user interface being much slower to respond than native applications.

In contrast, An AJAX application can send and retrieve only the necessary data to the server, using SOAP or some other XML-based Web Service interface and JavaScript on the client side to handle the response from the server. As a result, we are seeing more responsive applications because there is much less data being exchanged between the server and the browser. Also, much of the processing can be done on the requesting client machine, so the Web server’s processing time is reduced.

3. How AJAX works

Ajax works by placing an intermediate layer (the Ajax engine) between the user and the server, making user actions and server responses asynchronous. Not all user requests are submitted to the server. Some data validation and data processing are left to the Ajax engine itself, and only when new data needs to be read from the server can the Ajax engine submit requests to the server.

Ajax is composed of JavaScript, XMLHTTPRequest and DOM object at its core. It sends asynchronous requests to the server through XMLHTTPRequest object, obtains data from the server, and then updates the page by manipulating DOM with JavaScript. One of the most critical steps is getting the request data from the server. Let’s get to know these objects.

(1). The XMLHTTPRequest object

One of the biggest features of Ajax, thanks to the XMLHTTP component XMLHTTPRequest object, is the ability to transfer or read and write data to the server without refreshing the page (also known as updating the page without refreshing). XMLHttpRequest object method description:

XMLHttpRequest Object attribute description:

(2).JavaScript

JavaScript is a programming language that is widely used in browsers.

(3).DOM Document Object Model

DOM is a set of apis for HTML and XML files. It provides a representation of the structure of the file and allows you to change its contents and visibility. Its essence is to build a web page and Script or programming language communication bridge. All properties, methods, and events that WEB developers can manipulate and create files are represented as objects (for example, document represents the “file itself” object, table objects represent HTML table objects, and so on). These objects can be retrieved by Script in most browsers today. A web page built with HTML or XHTML can also be regarded as a set of structured data encapsulated in the DOM(Document Object Model), which provides support for reading and writing the various objects in the web page.

(4).XML

With an open, Extensible, self-describing Language structure, Extensible Markup Language has become the standard for data and document transfer on the Web and for other applications to exchange data.

(5). The comprehensive

The Ajax engine, in fact, is a fairly complex JavaScript application that handles user requests, reads and writes to the server, and changes DOM content. JavaScript’s Ajax engine reads the information and interactively rewrites the DOM, which allows for seamless refactoring of the page, changing the content of the page after the page has been downloaded, which is something we’ve been using extensively with JavaScript and DOM, but to make the page truly dynamic, Not only do you have to interact internally, but you also have to get data from the outside, so in the old days, we had the user enter the data and change the content of the web page through the DOM, but now XMLHTTPRequest allows us to read and write data from the server without reloading the page, with minimal user input.

Ajax WEB interface and application in the separation, also can saying is the data and present separation), and there is no clear boundaries in the previous two, the separation of data and present separation, is advantageous to the division of labor cooperation, reduce page changes caused by non-technical WEB application errors, improve efficiency, and more suitable for now the release of the system. Some of the previous server burden can also be transferred to the client, which is conducive to the client’s idle processing capacity to deal with.