Ajax (programming)
Encyclopedia
Ajax is a group of interrelated web development
methods used on the client-side
to create asynchronous web application
s. With Ajax, web applications can send data to, and retrieve data from, a server
asynchronously (in the background) without interfering with the display and behavior of the existing page. Data usually retrieved using the
. Despite the name, the use of XML is not needed (JSON
is often used instead), and the requests do not need to be asynchronous
.
Ajax is not one technology, but a group of technologies. HTML
and CSS
can be used in combination to mark up and style information. The DOM
is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
.
Asynchronous loading of content first became practical when Java applet
s were introduced in the first version of the Java language in 1995. These allow compiled
client-side code to load data asynchronously from the web server after a web page is loaded. In 1996, Internet Explorer
introduced the iframe
element to HTML
, which also enabled asynchronous loading. In 1999, Microsoft utilized its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer (http://home.microsoft.com). In April 2000 Microsoft filed a patent on the basic Ajax technology, which was granted in June 2006, related to ASP
. In 1999, Microsoft created the XMLHTTP ActiveX
control in Internet Explorer 5
, which was later adopted by Mozilla
, Safari
, Opera
and other browsers as the XMLHttpRequest JavaScript
object. Microsoft has adopted the native XMLHttpRequest model as of Internet Explorer 7
, though the ActiveX version is still supported. The utility of background HTTP requests to the server and asynchronous web technologies remained fairly obscure until it started appearing in full scale online applications such as Outlook Web Access
(2000) and Oddpost
(2002), and later, Google
made a wide deployment of Ajax with Gmail
(2004) and Google Maps
(2005).
The term Ajax was coined on February 18, 2005 by Jesse James Garrett
in an article entitled "Ajax: A New Approach to Web Applications", based on techniques used on Google web pages.
On April 5, 2006 the World Wide Web Consortium
(W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official web standard.
explained that the following technologies are incorporated:
Since then, however, there have been a number of developments in the technologies used in an Ajax application, and the definition of the term Ajax. In particular, it has been noted that JavaScript is not the only client-side scripting language that can be used for implementing an Ajax application; other languages such as VBScript
are also capable of the required functionality. JavaScript is the most popular language for Ajax programming due to its inclusion in and compatibility with the majority of modern web browsers. Also, XML is not required for data interchange and therefore XSLT is not required for the manipulation of data. JavaScript Object Notation
(JSON) is often used as an alternative format for data interchange, although other formats such as preformatted HTML or plain text can also be used.
Web development
Web development is a broad term for the work involved in developing a web site for the Internet or an intranet . This can include web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development...
methods used on the client-side
Client-side
Client-side refers to operations that are performed by the client in a client–server relationship in a computer network.Typically, a client is a computer application, such as a web browser, that runs on a user's local computer or workstation and connects to a server as necessary...
to create asynchronous web application
Web application
A web application is an application that is accessed over a network such as the Internet or an intranet. The term may also mean a computer software application that is coded in a browser-supported language and reliant on a common web browser to render the application executable.Web applications are...
s. With Ajax, web applications can send data to, and retrieve data from, a server
Web server
Web server can refer to either the hardware or the software that helps to deliver content that can be accessed through the Internet....
asynchronously (in the background) without interfering with the display and behavior of the existing page. Data usually retrieved using the
XMLHttpRequestXMLHttpRequestXMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text...
objectObject (computer science)
In computer science, an object is any entity that can be manipulated by the commands of a programming language, such as a value, variable, function, or data structure...
. Despite the name, the use of XML is not needed (JSON
JSON
JSON , or JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects...
is often used instead), and the requests do not need to be asynchronous
Asynchrony
Asynchrony, in the general meaning, is the state of not being synchronized.* Asynchronous learning* Collaborative editing systemsIn specific terms of digital logic and physical layer of communication, an asynchronous process does not require a clock signal, in contrast with synchronous and...
.
Ajax is not one technology, but a group of technologies. HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
and CSS
Cascading Style Sheets
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
can be used in combination to mark up and style information. The DOM
Document Object Model
The Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
is accessed with JavaScript to dynamically display, and to allow the user to interact with the information presented. JavaScript and the XMLHttpRequest object provide a method for exchanging data asynchronously between browser and server to avoid full page reloads.
History
In the 1990s, most web sites were based on complete HTML pages; each user action required that the page be re-loaded from the server (or a new page loaded). This process is inefficient, as reflected by the user experience: all page content disappears then reappears, etc. Each time a page is reloaded due to a partial change, all of the content must be re-sent instead of only the changed information. This can place additional load on the server and use excessive bandwidthBandwidth (computing)
In computer networking and computer science, bandwidth, network bandwidth, data bandwidth, or digital bandwidth is a measure of available or consumed data communication resources expressed in bits/second or multiples of it .Note that in textbooks on wireless communications, modem data transmission,...
.
Asynchronous loading of content first became practical when Java applet
Java applet
A Java applet is an applet delivered to users in the form of Java bytecode. Java applets can run in a Web browser using a Java Virtual Machine , or in Sun's AppletViewer, a stand-alone tool for testing applets...
s were introduced in the first version of the Java language in 1995. These allow compiled
Compiler
A compiler is a computer program that transforms source code written in a programming language into another computer language...
client-side code to load data asynchronously from the web server after a web page is loaded. In 1996, Internet Explorer
Internet Explorer
Windows Internet Explorer is a series of graphical web browsers developed by Microsoft and included as part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part of the add-on package Plus! for Windows 95 that year...
introduced the iframe
IFrame
iFrame can be:* I-frames, in video compression; see video compression picture types* iFrame * The HTML iframe element....
element to HTML
HTML
HyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
, which also enabled asynchronous loading. In 1999, Microsoft utilized its iframe technology to dynamically update the news stories and stock quotes on the default page for Internet Explorer (http://home.microsoft.com). In April 2000 Microsoft filed a patent on the basic Ajax technology, which was granted in June 2006, related to ASP
Active Server Pages
Active Server Pages , also known as Classic ASP or ASP Classic, was Microsoft's first server-side script engine for dynamically-generated Web pages. Initially released as an add-on to Internet Information Services via the Windows NT 4.0 Option Pack Active Server Pages (ASP), also known as Classic...
. In 1999, Microsoft created the XMLHTTP ActiveX
ActiveX
ActiveX is a framework for defining reusable software components in a programming language-independent way. Software applications can then be composed from one or more of these components in order to provide their functionality....
control in Internet Explorer 5
Internet Explorer 5
Microsoft Internet Explorer 5 was a graphical web browser released in March 1999 by Microsoft, primarily for Microsoft Windows, but initially with versions available for Apple Macintosh, Sun Solaris, and HP-UX. It was one of the main participants of the first browser war...
, which was later adopted by Mozilla
Mozilla
Mozilla is a term used in a number of ways in relation to the Mozilla.org project and the Mozilla Foundation, their defunct commercial predecessor Netscape Communications Corporation, and their related application software....
, Safari
Safari (web browser)
Safari is a web browser developed by Apple Inc. and included with the Mac OS X and iOS operating systems. First released as a public beta on January 7, 2003 on the company's Mac OS X operating system, it became Apple's default browser beginning with Mac OS X v10.3 "Panther". Safari is also the...
, Opera
Opera (web browser)
Opera is a web browser and Internet suite developed by Opera Software with over 200 million users worldwide. The browser handles common Internet-related tasks such as displaying web sites, sending and receiving e-mail messages, managing contacts, chatting on IRC, downloading files via BitTorrent,...
and other browsers as the XMLHttpRequest JavaScript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
object. Microsoft has adopted the native XMLHttpRequest model as of Internet Explorer 7
Internet Explorer 7
Windows Internet Explorer 7 is a web browser released by Microsoft in October 2006. Internet Explorer 7 is part of a long line of versions of Internet Explorer and was the first major update to the browser in more than 5 years...
, though the ActiveX version is still supported. The utility of background HTTP requests to the server and asynchronous web technologies remained fairly obscure until it started appearing in full scale online applications such as Outlook Web Access
Outlook Web Access
Outlook Web App , originally called Outlook Web Access and before that Exchange Web Connect , is a webmail service of Microsoft Exchange Server 5.0 and later...
(2000) and Oddpost
Oddpost
Oddpost was a pay-for webmail service, in 2002, that pioneered the use of JavaScript to mimic a desktop mail application, the first notable foray into using Ajax methodologies for webmail...
(2002), and later, Google
Google
Google Inc. is an American multinational public corporation invested in Internet search, cloud computing, and advertising technologies. Google hosts and develops a number of Internet-based services and products, and generates profit primarily from advertising through its AdWords program...
made a wide deployment of Ajax with Gmail
Gmail
Gmail is a free, advertising-supported email service provided by Google. Users may access Gmail as secure webmail, as well via POP3 or IMAP protocols. Gmail was launched as an invitation-only beta release on April 1, 2004 and it became available to the general public on February 7, 2007, though...
(2004) and Google Maps
Google Maps
Google Maps is a web mapping service application and technology provided by Google, free , that powers many map-based services, including the Google Maps website, Google Ride Finder, Google Transit, and maps embedded on third-party websites via the Google Maps API...
(2005).
The term Ajax was coined on February 18, 2005 by Jesse James Garrett
Jesse James Garrett
Jesse James Garrett is a user experience designer. In a 2005 paper, Garrett coined the term Ajax to describe the technology behind emerging services like Google Maps and Google Suggest, as well as the resulting user experience which made it possible to eliminate reloading the whole...
in an article entitled "Ajax: A New Approach to Web Applications", based on techniques used on Google web pages.
On April 5, 2006 the World Wide Web Consortium
World Wide Web Consortium
The World Wide Web Consortium is the main international standards organization for the World Wide Web .Founded and headed by Tim Berners-Lee, the consortium is made up of member organizations which maintain full-time staff for the purpose of working together in the development of standards for the...
(W3C) released the first draft specification for the XMLHttpRequest object in an attempt to create an official web standard.
Technologies
The term Ajax has come to represent a broad group of web technologies that can be used to implement a web application that communicates with a server in the background, without interfering with the current state of the page. In the article that coined the term Ajax, Jesse James GarrettJesse James Garrett
Jesse James Garrett is a user experience designer. In a 2005 paper, Garrett coined the term Ajax to describe the technology behind emerging services like Google Maps and Google Suggest, as well as the resulting user experience which made it possible to eliminate reloading the whole...
explained that the following technologies are incorporated:
- HTMLHTMLHyperText Markup Language is the predominant markup language for web pages. HTML elements are the basic building-blocks of webpages....
(or XHTMLXHTMLXHTML is a family of XML markup languages that mirror or extend versions of the widely-used Hypertext Markup Language , the language in which web pages are written....
) and CSSCSS-Computing:*Cascading Style Sheets, a language used to describe the style of document presentations in web development*Central Structure Store in the PHIGS 3D API*Closed source software, software that is not distributed with source code...
for presentation - The Document Object ModelDocument Object ModelThe Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents. Aspects of the DOM may be addressed and manipulated within the syntax of the programming language in use...
(DOM) for dynamic display of and interaction with data - XMLXMLExtensible Markup Language is a set of rules for encoding documents in machine-readable form. It is defined in the XML 1.0 Specification produced by the W3C, and several other related specifications, all gratis open standards....
for the interchange of data, and XSLTXSLTXSLT is a declarative, XML-based language used for the transformation of XML documents. The original document is not changed; rather, a new document is created based on the content of an existing one. The new document may be serialized by the processor in standard XML syntax or in another format,...
for its manipulation - The XMLHttpRequestXMLHttpRequestXMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text...
object for asynchronous communication - JavaScriptJavaScriptJavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
to bring these technologies together
Since then, however, there have been a number of developments in the technologies used in an Ajax application, and the definition of the term Ajax. In particular, it has been noted that JavaScript is not the only client-side scripting language that can be used for implementing an Ajax application; other languages such as VBScript
VBScript
VBScript is an Active Scripting language developed by Microsoft that is modeled on Visual Basic. It is designed as a “lightweight” language with a fast interpreter for use in a wide variety of Microsoft environments...
are also capable of the required functionality. JavaScript is the most popular language for Ajax programming due to its inclusion in and compatibility with the majority of modern web browsers. Also, XML is not required for data interchange and therefore XSLT is not required for the manipulation of data. JavaScript Object Notation
JSON
JSON , or JavaScript Object Notation, is a lightweight text-based open standard designed for human-readable data interchange. It is derived from the JavaScript scripting language for representing simple data structures and associative arrays, called objects...
(JSON) is often used as an alternative format for data interchange, although other formats such as preformatted HTML or plain text can also be used.
Drawbacks
- In pre-HTML5 browsers, pages dynamically created using successive Ajax requests do not automatically register themselves with the browser's history engine, so clicking the browser's "back" button may not return the browser to an earlier state of the Ajax-enabled page, but may instead return to the last full page visited before it. Workarounds include the use of invisible iframeIFrameiFrame can be:* I-frames, in video compression; see video compression picture types* iFrame * The HTML iframe element....
s to trigger changes in the browser's history and changing the URL fragment identifierFragment identifierIn computer hypertext, a fragment identifier is a short string of characters that refers to a resource that is subordinate to another, primary resource...
(the part of a URL after the '#') when Ajax is run and monitoring it for changes.- However, HTML5 provides an extensive API standard for working with the browser's history engine.
- Dynamic web page updates also make it difficult to bookmark and return to a particular state of the application. Solutions to this problem exist, many of which again use the URL fragment identifier.
- The solution provided by HTML5 for the above problem also applies for this.
- Depending on the nature of the Ajax application, dynamic page updates may interfere disruptively with user interactions, especially if working on an unstable Internet connection. For instance, editing a search field may trigger a query to the server for search completions, but the user may not know that a search completion popup is forthcoming, and if the internet connection is slow, the popup list may show up at an inconvenient time, when the user has already proceeded to do something else.
- Because most web crawlerWeb crawlerA Web crawler is a computer program that browses the World Wide Web in a methodical, automated manner or in an orderly fashion. Other terms for Web crawlers are ants, automatic indexers, bots, Web spiders, Web robots, or—especially in the FOAF community—Web scutters.This process is called Web...
s do not execute JavaScript code, publicly indexable web applications should provide an alternative means of accessing the content that would normally be retrieved with Ajax, thereby allowing search engineSearch engineA search engine is an information retrieval system designed to help find information stored on a computer system. The search results are usually presented in a list and are commonly called hits. Search engines help to minimize the time required to find information and the amount of information...
s to index it. - Any user whose browser does not support JavaScript or XMLHttpRequest, or simply has this functionality disabled, will not be able to properly use pages which depend on Ajax. Devices such as smartphoneSmartphoneA smartphone is a high-end mobile phone built on a mobile computing platform, with more advanced computing ability and connectivity than a contemporary feature phone. The first smartphones were devices that mainly combined the functions of a personal digital assistant and a mobile phone or camera...
s and PDAPDAA PDA is most commonly a Personal digital assistant, also known as a Personal data assistant, a mobile electronic device.PDA may also refer to:In science, medicine and technology:...
s may not have support for the required technologies, though this is decreasingly an issue. The only way to let the user carry out functionality is to fall back to non-JavaScript methods. This can be achieved by making sure links and forms can be resolved properly and do not rely solely on Ajax. - Similarly, some web applications which use Ajax are built in a way that cannot be read by screen-reading technologies, such as JAWSJAWS (screen reader)JAWS is a computer screen reader program in Microsoft Windows that allows blind and visually impaired users to read the screen either with a text-to-speech output or by a Refreshable Braille display....
. The WAI-ARIAWAI-ARIAis a draft technical specification published by the World Wide Web Consortium that specifies how to increase the accessibility of dynamic content and user interface components developed with Ajax, HTML, JavaScript and related technologies...
standards provide a way to provide hints in such a case. - Screen readers that are able to use Ajax may still not be able to properly read the dynamically generated content.
- The same origin policySame origin policyIn computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but...
prevents some Ajax techniques from being used across domains, although the W3C has a draft of the XMLHttpRequest object that would enable this functionality. Methods exist to sidestep this security feature by using a special Cross Domain Communications channel embedded as an iframe within a page, or by the use of JSONP.
- Ajax-powered interfaces may dramatically increase the number of user-generated requests to web servers and their back-ends (e.g. databases). This can lead to longer response times and/or additional hardware needs.
- The asynchronous, callback-style of programming required can lead to complex code that is hard to maintain, to debug and to test.
Functional
- jQueryJQueryjQuery is a cross-browser JavaScript library designed to simplify the client-side scripting of HTML. It was released in January 2006 at BarCamp NYC by John Resig...
- MooToolsMooToolsMooTools is a lightweight, object-oriented, web-application framework for JavaScript, written in JavaScript. It is released under the free, open-source MIT License...
- PrototypePrototype Javascript FrameworkThe Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson in February 2005 as part of the foundation for Ajax support in Ruby on Rails. It is implemented as a single file of JavaScript code, usually named prototype.js...
- Extjs
- DojoDojo ToolkitDojo Toolkit is an open source modular JavaScript library designed to ease the rapid development of cross-platform, JavaScript/Ajax-based applications and web sites. It was started by Alex Russell, Dylan Schiemann, David Schontzler, and others in 2004 and is dual-licensed under the modified BSD...
See also
- Ajax frameworkAjax frameworkIn web application development, an Ajax framework is a framework which leverages Ajax, a collection of technologies for building dynamic web pages on the client side...
- Comet (programming)Comet (programming)Comet is a web application model in which a long-held HTTP request allows a web server to push data to a browser, without the browser explicitly requesting it. Comet is an umbrella term, encompassing multiple techniques for achieving this interaction. All these methods rely on features included by...
- List of Ajax frameworks
- Reverse Ajax
- Rich Internet applicationRich Internet applicationA Rich Internet Application is a Web application that has many of the characteristics of desktop application software, typically delivered either by way of a site-specific browser, via a browser plug-in, independent sandboxes, extensive use of JavaScript, or virtual machines...
- XMLHttpRequestXMLHttpRequestXMLHttpRequest is an API available in web browser scripting languages such as JavaScript. It is used to send HTTP or HTTPS requests directly to a web server and load the server response data directly back into the script. The data might be received from the server as XML text or as plain text...
External links
- Ajax: A New Approach to Web Applications Article that coined the term and Q&A.
- Ajax Tutorial with GET, POST, text and XML examples.