Ajax (programming)
Ajax [ eidʒæks ] (also AJAX ; acronym of English A synchronous J DavaScript a nd X ML ) denotes a concept of asynchronous data transmission between a browser and the server . This makes it possible to carry out HTTP requests while an HTML page is displayed and to change the page without reloading it completely.
Building an Ajax application
An Ajax application is based on the following web technologies:
- HTML (or XHTML )
- Document Object Model (DOM) to represent the data or content
- JavaScript to manipulate the Document Object Model and to dynamically display the content. JavaScript also serves as an interface between individual components.
- The XMLHttpRequest object, part of many browsers, to be able to exchange data on an asynchronous basis with the web server
- Another transport method is on-demand JavaScript , in which a JavaScript file is requested using DOM manipulation.
There are the following approaches for calling resources, functions or methods ( API ):
-
REST - call using classic HTTP techniques, e.g. B.
GET http://localhost/person/4 - SOAP - transmission of method name and parameters as XML document
Various methods have been established for the asynchronous transmission of data:
- REST -like procedures to transfer user data in text form
- JSON , a text-based format for data and objects tailored to JavaScript
- Various proprietary XML formats
- SOAP , a protocol for web services that mostly uses XML as the exchange format
Other web technologies are also used in connection with Ajax applications, but they have no causal connection with Ajax:
history
Origins
Who originally created the term Ajax is no longer clearly traceable. What is certain, however, is that the term Jesse James Garrett (employee of the Adaptive Path agency) in his essay Ajax: A New Approach to Web Applications of February 18, 2005, coined the term. Basically, the technological basics and the procedure were already known and were generally described with the term XMLHttpRequest . So if you will, Garrett created the Ajax brand to summarize various software technologies under one term.
The idea and the associated technologies on which the Ajax concept is based have been around in a comparable form since around 1998. The first component that made it possible to trigger an HTTP request on the client side was based on remote scripting developed by Microsoft -Component. Initially implemented as a Java applet, it was later replaced by an inline frame element. This idea was later refined by the Outlook Web Access team. This component is part of the Microsoft Exchange Server and was soon delivered as part of Internet Explorer 4.0 in the form of XML support . Some observers rate Outlook Web Access as the first successful representative of the Ajax concept. However, some of these very early implementations of the concept were not yet based on the XMLHttpRequest object.
First Ajax applications
Applications such as Oddpost's webmail service (now Yahoo Mail ) followed later . In 2005, the term Ajax gained increasing media presence through some landmark events. On the one hand, Google used the asynchronous communication paradigm in some popular interactive applications such as Google Groups , Google Maps , Google Suggest , Gmail and Google Finance . The article written by Garrett has now achieved a certain level of awareness in the Ajax environment. Ultimately, the Ajax support of the Gecko engine has developed to a degree that makes it possible to use Ajax technology in a variety of ways.
Standardization of Ajax technologies
The latest standardization endeavors of the XMLHttpRequest object on the part of the W3C and the establishment of the OpenAjax Alliance show that the industry will in future integrate Ajax technology into its products and thus support it on a broad basis.
In the area of standardization of the protocol between web browser and web server, the SOAP communication standard can be used for Ajax applications in order to reuse applications that are already available on a server and are based on web services .
Comparison with traditional web applications
Ajax applications appear to be running entirely on the user's computer . The process flow of a traditional web application, on the other hand, is determined by the stateless nature of an HTTP request. The thus directly related Request -Response- paradigm means that each time a user action, a corresponding request (English Request is) directed to the server. The required response is delayed (English Response ) of the server or remains may destroy them, so inevitably long waiting times or at worst caused breaks in the flow of the application. The scenario described makes it clear to the user of a traditional web application that it has been distributed over several areas - a circumstance that should be made more transparent and therefore more fault-tolerant with Ajax programming technology .
Garrett describes an "Ajax engine" for processing Ajax requests, a component written in JavaScript that does the client-side work:
"Every user action that would normally generate an HTTP request now generates a JavaScript call that is delegated to the Ajax engine [...] Every response to an action by the user that does not require a connection to the server - such as validating data, changing data that is in memory, and even navigating between individual elements of the website - all of this can be handled by the Ajax engine. If the Ajax engine needs data from the server in order to be able to carry out a certain action successfully - this can be, for example, the transfer of data that has to be processed, the reloading of individual components of the user interface or the loading of new data -, this makes an asynchronous request, usually in the form of an XML document, to the server. However, the interaction of the user with the application, as is the case with normal web applications, was not interrupted [...]. "
Traditionally, web applications submitted forms that were previously filled out by the user to a web server . The web server responds by sending the user's browser a newly generated website based on the previously transmitted form data . Because the web server has to generate and transmit a new website for every request from the user, the application appears to the user as sluggish and not very intuitive when compared with a normal desktop application.
Ajax applications, on the other hand, are able to send queries to the server that only request the data that is actually needed. This is done by calling a web service in one of the variants described above ( REST , SOAP ). The call takes place as asynchronous communication , i.e. H. While the data is being loaded from the server, the user can continue to interact with the interface. Once the data has been loaded, a previously named JavaScript function is called that can integrate the data into the website.
The result is a user interface that reacts much more quickly to user input: partly because significantly less data has to be exchanged between the web browser and web server, partly because the data is loaded asynchronously. In addition, the web server load is reduced, as many processing steps can already be carried out on the client side.
Imagine a web application for managing photographs. If the user wants to add a description or title to a photo, a traditional programming approach must be used to retransmit the entire page including the scaled-down photo views. With the Ajax technology, only the changed area of the website is renewed. The example shows how it is possible to change the title of individual images within the Flickr application.
example
A simple example program can be found in the Wikibook "Website Development" (see web links ). The JavaScript library prototype is used as the Ajax engine, which handles the details of asynchronous communication with the web server. On the server side, a PHP script is used that does not deliver XML, but an HTML fragment.
The Ajax request is sent as follows:
var myAjax = new Ajax.Request(
"datum.php",
{ method: 'get', onComplete: zeige_datum }
);
The PHP script delivers a piece of unformatted text that can be understood as an HTML fragment:
<?php
echo "Jetzt ist es " . date("r");
?>
As soon as the data has been transferred to the browser, the function show_date is called, which can then process the data further and integrate it into the website. In this example, only conventional JavaScript methods and properties are used.
function zeige_datum( originalRequest ) {
document.getElementById('output').innerHTML = originalRequest.responseText;
}
The Ajax platform
Since Ajax applications correspond to the client-server model , a component is required both within the web browser and on the corresponding server that enables Ajax-based communication.
Client platform
In most cases, the implementation within the web browser takes place with the help of extensive functionality based on JavaScript and the XMLHttpRequest object. There are two categories of platforms:
Direct Ajax implementations: These provide an API on the client for direct communication of data. In addition to the page initially displayed, another entry point for the transmission of the data must be implemented on the server.
Indirect Ajax implementations: New HTML fragments are sent from the server to the client in order to supplement the existing page or to replace parts of it. Usually the complete page to be displayed is rebuilt on the server, but only the relevant differences are transmitted to the client.
Both methods have advantages and disadvantages. While direct use often saves server-side resources, the indirect variant simplifies implementation.
Server platform
The actual program logic or the process flow of the application is stored on a server. This takes place, for example, in the form of EJBs , .NET components or in the form of script components, such as are part of the Ruby scripting language . The Ajax concept itself does not require any specific technology by means of which the server-side program logic must be implemented. Both the server and the application logic are referred to as the server platform in the Ajax context .
An essential task of the server in Ajax applications is to provide the components required in the browser. Since cross-site scripting is not permitted due to the security settings of the browser ( same-origin policy ), the web server must also make data from other servers available to the client and thus take on the function of a proxy computer.
Pros / cons and criticism
No reloading of built-up pages
The greatest advantage of Ajax technology is the fact that data can be changed without having to reload the entire website from the web browser. This allows web applications to respond more quickly to user input. In addition, it avoids that static data, which may not have changed, have to be continuously transmitted over the Internet.
No browser plug-in is required
Since Ajax technologies are freely accessible, they are supported by web browsers, which also support JavaScript, regardless of the operating system . A browser plug-in is not required. This requires that JavaScript support is not disabled - exactly represents the largest point of criticism and the biggest problems when using comparable techniques such as. Adobe's Shockwave or Flash , but are still subject to the disadvantage that they are proprietary, are , require a browser plug-in and are only available for certain platforms .
Extensive testing required
As has become the practice with dynamic HTML applications, an Ajax-based application must also be rigorously tested in order to be able to handle the peculiarities of the various web browsers accordingly. In the course of time, Ajax technology has developed further, which means that various program libraries are now available for it. These can contribute to largely error-free and simpler application programming. Well-known JavaScript libraries are Dojo Toolkit , jQuery , Prototype and Qooxdoo (especially for applications that are supposed to resemble desktops).
Server-side browser detection
Techniques have also been developed, such as the JSF technology developed by Sun , Apache Wicket or the Webforms technology developed by Microsoft, which make it possible to design web-based applications that are close to a desktop application. In addition, they offer the option of using a suitable way for users who use a web browser without JavaScript support. The browser type of the respective user is determined on the server side, so that it is possible to only send him HTML pages that can also be displayed by his web browser.
Using the "Back" button
One of the most common complaints about Ajax technology is the fact that it is difficult to keep the browser's "back" button working . There is a risk that clicking the "Back" button will not restore the application to its previous state, since browsers usually only save static pages in their history. Distinguishing between a static page that has been completely cached in the browser and a page that has been dynamically modified can be tricky. Basically, a user expects that clicking the "Back" button will revise the last action taken. Clicking the "Back" button also often tries to go back one page in the navigation path. Due to the dynamics with which many Ajax applications are afflicted, this is not always possible, since the individual navigation steps of the user are technically very difficult to reproduce. Software developers must explicitly notify the browser of a change in the status. Modern browsers offer the history API for this. A widespread variant is also to add a hashtag and a client path to the URL, which represents the current navigation status of a web application. In particular, the so-called hash bang ( #!) is discussed here in order to differentiate URLs for this purpose.
Polling problem
Since before standards such as websockets were introduced, web servers were not able to pass asynchronous events to an Ajax client if they were not requested by it, so the Ajax client had to constantly ask the web server (the actual polling ) whether a new one Event was generated or a change in the application status has taken place. This creates a completely different load on a web server compared to the load created by conventional applications.
In order to avoid continuous polling, the technique was developed to withhold poll responses until an actual event or a timeout occurs. As a result, an Ajax application is ideally linked on the server side with a request that can ultimately be used to send a response to the application client when a corresponding event occurs.
However, this technique poses new problems. Until now, it was common practice to generate a thread for each request to the server , the resource of which could be released again immediately after the request was processed. However, this release of the resources is not possible with the polling technique described. Resources such as memory remain occupied. This problem places new demands on the scalability of an Ajax application. One possible solution to this problem is to use an application server that supports the principle of continuation .
bookmark
A similar problem is the fact that with web pages that are updated dynamically, it is almost impossible to bookmark a specific state of a web application. Solutions have now been developed for this problem as well. Most of the time, the anchor in the current URL address that comes after the hash sign (#) is used in this context . In this way it is possible to follow the process flow of an application. In addition, this enables the user to restore a specific application status via the named URL part. Many web browsers allow the anchor to be dynamically updated through JavaScript. This enables an Ajax application to update the content of the displayed website in parallel with the processing. These approaches also fix some of the problems caused by the back button not working.
feedback
.svg)
The latency , i.e. the time interval between an HTTP request from the browser and the associated server response, must be taken into account when developing an Ajax application. Without clearly visible feedback for the user, predictive loading of individual application data and correct handling of the XMLHttpRequestobject, a user can get the impression that the entire application is only reacting slowly to his actions. Usually this is a fact that is difficult to understand for the user. For this reason, it is important to use so-called visual feedback, such as the symbol of an hourglass, to make the user aware that certain background activities are currently taking place or that data, such as content, is being loaded.
Differentiation between concept and term
Aside from the technical difficulties associated with Ajax, there has been repeated criticism in the past that the company Adaptive Path, which originally coined the term Ajax , or other companies use the term as a marketing vehicle. In this context, the main reason for criticism is that the fundamentals of Ajax were developed before the term was coined. However, the coining of the term has also helped to revitalize the discussion about the browser as a fat client .
Support of the MVC architecture pattern
.svg)
Although an Ajax-based environment does not support per se, the MVC - architecture patterns , but this can be easily implemented. An implementation can have the entire browser window as the basis for the presentation layer. Ajax also enables a cyclic or nested MVC model to be implemented. In this case, individual presentation layer elements of a website have both a separate controller and a separate model. Both relationships are shown in the illustrations in this article.
Accessible internet
If the Ajax technology is to be used, this is a challenge if the web application is to follow the WAI rules. For this reason, software developers have to offer alternatives if, for example, a website is to be accessible to visually impaired users with a screen reader . This is necessary because the majority of all Ajax applications are designed for traditional graphical web browsers.
At the moment, the so-called hook approach is often discussed, whereby a purely static application is first sent to the browser and then all AJAX functionalities are embedded with activated Javascript.
Search engines / deep links
There are several ways to make an Ajax application accessible to a search engine . Each approach varies in the degree of indexing that can be achieved and the way in which it is achieved. For some websites, such as that of a university course, it is necessary that each individual area can be recorded by a search engine. However, a site that provides a webmail service will not require this. Below are some strategies that make it possible to have a website indexed by a search engine:
- Lightweight indexing
- No structural changes will be made to the actual website. However, existing elements such as meta tags or heading elements are used for indexing.
- Extra link strategy
- Additional links are placed on the website that search robots can follow in order to be able to index the entire website. The additional links should, however, be visible, even if they are only intended for the search robot of a search engine. Invisible links are a specialty of modern search engines and they are viewed as a deception.
- Secondary Site Strategy
- A second website is being designed. This is fully accessible to a search engine and either simulates the functions of the Ajax page or refers to its functions from the corresponding search term.
At this point it should be pointed out that the use of the Extra Link Strategy and the Secondary Site Strategy could possibly be seen as an attempt at deception by search engines ( cloaking ). The best way to avoid this is to include one in the original <meta name="robots" content="noindex" />page.
Since May 2014, Google has been able to index Ajax websites without any further tools. The above strategies are no longer fully necessary for indexing by Google. However, experiments by Bartosz Goralewicz indicate that websites that use JavaScript extensively require more resources from search engine bots (crawler budget). Compared to pure HTML applications, search engine bots crawl fewer pages on JS-based websites.
Status / distribution
The following web browsers are currently able to run Ajax applications. Only the first software version is named that made it possible to run Ajax applications. All subsequent versions imply the same support.
| Surname | First version with Ajax support | Native support | Support through an add-on | comment |
|---|---|---|---|---|
| Microsoft Internet Explorer | 5.0 | 7.0 | yes ( ActiveX component) | Version 4.0 supported XML for the first time, but not the XMLHttpRequest API required for Ajax. This API was later implemented as an ActiveX component and is a native part of the IE from version 7.0. Browsers based on Internet Explorer technology are also Ajax compatible. |
| Mozilla Firefox | 1.0 | Yes | - | All other Gecko based browsers too . |
| Opera | 8.0 | Yes | - | - |
| Apple Safari | 1.2 | Yes | - | Apple's Safari browser is based on WebKit , a KHTML - Fork . |
| Shiira | 0.9.1.1 | Yes | - | Shiira is based on WebKit . |
| Google Chrome | 0.2 | Yes | - | Google Chrome is based to version 27 on Apple's WebKit , version 28 coming WebKit - elimination Blink used. |
| Netscape | 7.1 | Yes | - | - |
| Konqueror | 3.2 | Yes | - | The HTML rendering is implemented by KHTML . |
| iCab | 3.0 beta | Yes | - | Older versions such as the version for m68k -based computers do not support Ajax. |
Application examples
The following web links refer to typical representatives of an Ajax-based application. Some of them have achieved a certain level of awareness thanks to their new, intuitive user interface. In this context, the link list itself can only represent an exemplary selection due to the current variety of Ajax applications and is deliberately kept very short.
-
Virtual globes / virtual maps
- Google Maps - interactive world map
- OpenStreetMap - interactive free world map, geographic wiki
-
Web-based office applications
- AjaxWrite - word processor
- iRows - Spreadsheet
- Applications that use Wikipedia
- Gollum Wikipedia browser
- Social software
- Miscellaneous
- eyeOS - web desktop
- Gmail - offers a type of e-mail program for the web browser .
- Google Suggest - displays suggestions that the user might be looking for
- Meebo - web-based instant messenger, supports AOL , ICQ , Yahoo Messenger , MSN Messenger , Jabber and Google Talk accounts
- ET-Chat - web chat system
- Customer Relationship Management (CRM)
swell
- ↑ Ajax Patterns - On-Demand Javascript . Ajaxpatterns.org. Archived from the original on April 22, 2011. Retrieved September 11, 2010.
- ↑ Jesse James Garret: Ajax: A New Approach to Web Applications ( Memento of July 2, 2008 in the Internet Archive )
- ↑ Remote scripting . Msdn.microsoft.com. Retrieved September 11, 2010.
- ↑ Microsoft: XML versions that are included with Microsoft Internet Explorer Knowledge Base Q269238 - Version list for the Microsoft XML parser
- ↑ Zimbra.com: opinion of the company Zimbra, Inc. with respect to the Open Ajax initiative . Zimbra.com. Retrieved September 11, 2010.
- ↑ Browser-independent Ajax engine based on web services technology . Mathertel.de. February 24, 2007. Retrieved September 11, 2010.
- ↑ Jakob Nielsen : Top-10 New Mistakes of Web Design , 1999
- ^ Hash URIs . w3.org. May 12, 2011. Accessed March 1, 2017.
- ↑ Remote Scripting with AJAX, Part 2 . Xml.com. Retrieved September 11, 2010.
- ↑ Jonathan Boutelle: Latency Must Die: Reducing Latency by Preloading Data ( Memento of September 29, 2007 in the Internet Archive ), August 26, 2004
- ↑ Ajax Blog - HTML, Javascript and XML coding techniques for Web 2.0 ( Memento from October 23, 2005 in the Internet Archive ) Async Requests over an Unreliable Network
- ↑ Marcus Baker: Listen kids, AJAX is not cool ( Memento from December 12, 2005 in the Internet Archive ) (archive version), June 3, 2005, accessed on March 7, 2014.
- ↑ Erik Hendriks, Michael Xu, Kazushi Nagayama: Understanding web pages better . May 23, 2014.
- ↑ Advanced Technical SEO - Searchmetrics Summit 2017. searchmetrics - youtube.com, November 29, 2017, accessed on December 19, 2017 .
literature
- Jesse James Garrett: Ajax: A New Approach to Web Applications. Adaptive Path LLC, February 18, 2005, The essay that coined the name. ( Memento of July 2, 2008 in the Internet Archive )
- Christian Wenz: AJAX. fast + compact. developer.press, 2006, ISBN 3-935042-92-2 .
- Olaf Bergmann, Carsten Bormann: AJAX - Fresh Approaches to Web Design. 1st edition. SPC TEIA Textbook Verlag, 2005, ISBN 3-935539-26-6 ( HTML version of the book ).
- Johannes Gamperl: Ajax. Galileo Computing, 2006, ISBN 3-89842-764-1 .
- Denny Carl: Ajax practical knowledge. O'Reilly, 2006, ISBN 3-89721-451-2 .
- Hannes Pfeiffer: Ajax: Modern web scripting. Data Becker, 2006, ISBN 3-8158-2801-5 .
- Dave Crane, Eric Pascarello, Darren James: Ajax in Action. The developer book for Web 2.0. Addison-Wesley, 2006, ISBN 3-8273-2414-9 ( individual chapters as online version , in English).
- Kai Jäger: Ajax in practice. Springer, 2007, ISBN 978-3-540-69333-8 .
- Ryan Asleson, Nathaniel T. Schutta: Foundations of Ajax. Apress, 2005, ISBN 1-59059-582-3 .
- Nicholas C. Zakas: Professional Ajax. 2nd Edition. Wrox, 2007, ISBN 0-470-10949-1 .
