AJAX Introduction and Technology

AJAX stands for "Asynchronous JavaScript and XML". AJAX is not an abbreviation, but a noun created by Jesse James Gaiiett. It refers to a web development technology for creating interactive web applications.

Introduction to AJAX

The Chinese pronunciation of "Ajax" is the same as that of the Ajax football team. Web applications such as Flickr, Backpack and Google have made a qualitative leap in this regard. The term originated from describing the transition from web applications based on web pages to data-based applications. In data-based applications, data required by users, such as contact lists, can be obtained from a server independent of the actual web page and can be dynamically written to the web page, coloring the slow web application experience to make it like a desktop application. Although most developers have used XMLHttp or used Iframes to load data in the past, only now are we seeing traditional developers and companies begin to adopt these technologies. Just as new programming languages ​​or models come with more pain, developers need to learn new skills and how to best use these new technologies.

AJAX Mode

Many important technologies and AJAX development patterns can be obtained from existing knowledge. For example, in an application that sends a request to a server, it must include request order, priority, timeout response, error handling, and callback, many of which are already included in Web services, just like the current SOA. AJAX developers have a complete knowledge of system architecture. At the same time, as the technology matures, there will be many areas that need to be improved, especially the ease of use of the UI part.

AJAX development is very different from traditional CS development. These differences introduce new programming problems, the biggest of which is usability. Since AJAX relies on the browser's JavaScript and XML, browser compatibility and supported standards become as important as JavaScript's runtime performance. Most of these problems come from the combination of browsers, servers, and technologies, so it is necessary to understand how to best use these technologies.

Combining various changing technologies and a tightly coupled client-side environment, AJAX proposes a new development approach. AJAX developers must understand the traditional MVC architecture, which limits the boundaries between application layers. At the same time, developers also need to consider the outside of the CS environment and use AJAX technology to redefine the MVC boundaries. Most importantly, AJAX developers must not think of Web applications as a collection of pages but as a single page. Once the scope between UI design and service architecture is strictly separated, developers need to update and change the technology collection.

Always think about the user

The biggest opportunity for AJAX is in user experience. In the process of making applications more responsive and innovative, the rules that define web applications are being rewritten; therefore, developers must pay more attention to users. Users are now accustomed to how to use web applications. For example, users usually expect that each button click will cause a delay of several seconds and a screen refresh, but AJAX is breaking this long-term situation. Therefore, users need to experience the responsiveness of button clicks again.

Usability is the exciting part of AJAX and has spawned several novel techniques. The most notable is a technique called "yellow fade-out," which turns the user interface yellow before data is updated and returns to its original color immediately after the update is complete. AJAX developers free users from the burden of Web applications; carefully exploit the rich interface provided by AJAX, and soon desktop developers will find that AJAX is their direction.

Several tools and techniques

As AJAX quickly gained attention, I think developers' expectations for this technology have also increased rapidly. Like any new technology, the prosperity of AJAX also requires an entire development tool/programming language and related technical system to support it.

JavaScript

As the name suggests, the most important and most overlooked concept of AJAX is that it is also a JavaScript programming language. JavaScript is the glue that keeps the various parts of an AJAX application together. Most of the time, JavaScript is often considered by server-side developers to be something that is not needed for enterprise applications and should be avoided as much as possible. This view comes from the experience of writing JavaScript code in the past: a complex and error-prone language. Similarly, it is also considered to scatter application logic arbitrarily between the server and the client, making problems difficult to find and code difficult to reuse. In AJAX, JavaScript is mainly used to pass data on the user interface to the server and return the results. The XMLHttpRequest object is used to respond to the data passed through HTTP, and once the data is returned to the client, it can be immediately placed on the web using the DOM.

XMLHttpRequest

The XMLHttpRequest object is implemented in most browsers and has a simple interface that allows data to be passed from the client to the server without interrupting the user's current operation. The data transmitted using XMLHttpRequest can be in any format, although the name suggests XML format data.

Developers should already be familiar with many other XML-related technologies. XPath can access data in XML documents, but understanding XML DOM is required. Similarly, XSLT is the simplest and fastest way to generate HTML or XML from XML data. Many developers are already familiar with Xpath and XSLT, so it makes sense for AJAX to choose XML as the data exchange format. XSLT can be used on both the client and the server, and it can reduce the amount of application logic written in JavaScript.

CSS

In order to properly browse AJAX applications, CSS is an important weapon that AJAX developers need. CSS provides a mechanism to separate application style and design from content. Although CSS plays a vital role in AJAX applications, it is also a major obstacle to building cross-browser applications because different browser vendors support different CSS levels.

Server Side

But unlike on the client side, on the server side AJAX applications still use mechanisms built on languages ​​like Java, .Net and PHP; there is no major change in the way things are done in this area.

In this case, our interest in the Ruby on Rails framework has increased rapidly. More than a year ago, Ruby on Rails has attracted a large number of developers to build Web and AJAX applications based on its powerful features. Although there are many rapid application development tools in existence, Ruby on Rails seems to have the ability to simplify the construction of AJAX applications.

Development Tools

When it comes to actually building AJAX applications, you need more than just a text editor. Since JavaScript is uncompiled, it can be easily written and run in a browser. However, many tools provide useful extensions such as syntax highlighting and smart completion.

Different IDEs offer different levels of support for JavaScript. IntelliJ IDEA from JetBrains is a better IDE for JavaScript development, although many developers also prefer Microsoft's Visual Studio product (which promises improved AJAX support in the latest version). Eclipse includes two free JavaScript editor plug-ins and a commercial Komodo IDE from ActiveStat.

Another problem with JavaScript and AJAX development is that debugging is difficult. Different browsers provide different, often hidden, runtime error messages, and JavaScript flaws such as double variable assignments (usually due to lack of data types) make debugging even more difficult. In AJAX development, debugging is even more complicated because it requires identifying whether the error is generated by the client or the server. In the past, the method of JavaScript debugging was to delete all the code and then add it line by line until the error appeared. Now, more developers are returning to Microsoft Script Debugger for IE and Venkman for Mozilla browsers.

Browser compatibility

The biggest problem with JavaScript programming comes from the different browsers' support for various technologies and standards. Building a JavaScript application that runs in different browsers (such as IE and Firefox) is a difficult task. Therefore, several AJAX JavaScript frameworks either generate JavaScript based on server-side logic or tag libraries, or provide client-side JavaScript libraries that meet cross-browser AJAX development requirements. Some popular frameworks include: AJAX.Net, Backbase, Bitkraft, Django, DOJO, DWR, MochiKit, Prototype, Rico, Sajax, Sarissa, and Script.aculo.us.

These frameworks give developers more room to worry about cross-browser issues. Although these frameworks improve the ability of developers to build applications, there are other factors to consider in the AJAX component market as vendors have developed packaged component solutions for more detailed user interfaces. For example, several vendors provide common user interface components such as combo boxes and data grids, which can be used to create a good experience in viewing and editing data in an application in a spreadsheet-like manner. However, these components not only encapsulate the user interface of the component but also include the communication method with the server-side data. These components are usually implemented using a markup-based approach such as ASP.Net or JSF controls.

Outlook

The browser war between IE and Firefox has become hot lately, so AJAX developers need to be agile enough to react. The key point is some issues such as CSS or XML, although various browsers form different camps to adopt the latest standards (such as Mozilla embraces SVG and E4X standards and uses XUL in the latest Firefox BETA version, while Microsoft uses its own XAML technology). All these technologies represent a change in the market direction of the current mainstream JavaScript and XML in AJAX.

In general, AJAX developers must keep up with the latest technologies as quickly as possible and utilize a productive toolset. Successful AJAX developers also need to be mindful of their users to avoid amplifying any problems. And AJAX developers also need to continue to innovate to create new ways to enhance the usability of Web applications.

It mainly includes the following technologies

Definition of Ajax (Asynchronous JavaScript + XML)

Web 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;

Use XMLHttpRequest for asynchronous data query and retrieval;

Use JavaScript to tie everything together. For the English version, see the original text of Jesse James Garrett, the originator of Ajax, the original title (Ajax: A New Approach to Web Applications).

Similar to DHTML or LAMP, AJAX does not refer to a single technology, but organically utilizes a series of related technologies. In fact, some AJAX-based "derivative/composite" technologies are emerging, such as "AFLAX".

AJAX applications use web browsers that support the above technologies as their operating platforms. These browsers currently include: Mozilla, Firefox, Internet Explorer, Opera, Konqueror and Safari. However, Opera does not support XSL format objects or XSLT.

Development History

The technology was used around 1998. The first component that allowed client scripts to send HTTP requests (XMLHTTP) was written by the Outlook Web Access team. The component was originally part of Microsoft Exchange Server and quickly became part of Internet Explorer 4.0. Some observers believe that Outlook Web Access was the first successful commercial application to use Ajax technology and became a leader in many products, including Oddpost's webmail product. However, in early 2005, a number of events made Ajax popular. Google used asynchronous communication in its famous interactive applications such as Google Groups, Google Maps, Google Search Suggestions, and Gmail. The term Ajax was coined by the article "Ajax: A New Approach to Web Applications", and the rapid spread of the article increased people's awareness of the use of this technology. In addition, the support of Mozilla/Gecko made the technology mature and easier to use.

AJAX has a very optimistic prospect, which can improve system performance and optimize user interface. AJAX has a direct framework AjaxPro, which can introduce AjaxPro.2.dll file, and can directly call the method of the background page in the front page JS. However, this framework conflicts with FORM validation. In addition, Microsoft has also introduced AJAX components, which require adding AjaxControlToolkit.dll file, so that related controls can appear in the control list.

Pros and Cons

传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然後返回一个新的网页。这个做法浪费了许多带宽，因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。

In contrast, AJAX applications can only send and retrieve necessary data to the server. It uses SOAP or other XML-based web service interfaces and uses JavaScript on the client to process the response from the server. Because the data exchanged between the server and the browser is greatly reduced, we can see faster responsive applications. At the same time, a lot of processing work can be done on the client machine that makes the request, so the processing time of the Web server is also reduced.

The biggest advantage of using Ajax is that it can maintain data without updating the entire page. This makes web applications respond to user actions more quickly and avoids sending unchanged information over the network.

Ajax does not require any browser plug-ins, but requires users to allow JavaScript to run on the browser. Just like DHTML applications, Ajax applications must be rigorously tested on many different browsers and platforms. As Ajax matures, some libraries that simplify the use of Ajax have also emerged. Similarly, another technology that assists programming has also emerged to provide alternative functions for users who do not support JavaScript.

The main criticism of using Ajax is that it can break the normal behavior of the browser's back button. In the case of dynamically updated pages, users cannot return to the previous page state because the browser can only remember static pages in the history. The difference between a fully loaded page and one that has been dynamically modified is very subtle; users usually expect to be able to click the back button to cancel their previous operation, but in Ajax applications, this is not possible. However, developers have come up with various ways to solve this problem, most of which are to create or use a hidden IFRAME to reproduce the changes on the page when the user clicks the back button to access the history. (For example, when the user clicks back in Google Maps, it searches in a hidden IFRAME and then reflects the search results to the Ajax element to restore the application state to the state at that time.)

A related argument is that using dynamic page updates makes it difficult for users to save a specific state to their favorites. Solutions to this problem have also emerged, most of which use URL fragment identifiers (commonly called anchors, the part after the # in the URL) to keep track and allow users to return to a specific application state. (Many browsers allow JavaScript to dynamically update anchors, which allows Ajax applications to update anchors while updating the displayed content.) These solutions also solve many of the arguments for not supporting the back button.

When developing Ajax, network latency - the interval between a user's request and the server's response - needs to be carefully considered. Not giving users a clear response, not properly pre-reading data, or improperly handling XMLHttpRequest will cause users to feel a delay, which is something they don't want to see and they can't understand. The usual solution is to use a visual component to tell users that the system is performing background operations and reading data and content.

Some handheld devices (such as mobile phones, PDAs, etc.) cannot support Ajax well yet;

The Ajax engine is made of JavaScript, and JavaScript compatibility and debugging are both headaches;

Ajax non-refresh reload, because the page changes are not as obvious as refresh reload, it is easy to cause confusion to users - users are not sure whether the current data is new or has been updated; the existing solutions include: prompting in relevant locations, designing the data update area more obvious, and prompting users after data is updated, etc.

The support for streaming media is not as good as FLASH and Java Applet;