For VendorsBlog
Login

AJAX Development

AJAX Development

Ajax (also AJAX; short for asynchronous JavaScript and XML) is a set of web development techniques using many web technologies on the client side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

Ajax is not a single technology, but rather a group of technologies. HTML and CSS can be used in combination to mark up and style information. The webpage can then be modified by JavaScript to dynamically display—and allow the user to interact with—the new information. The built-in XMLHttpRequest object within JavaScript is commonly used to execute Ajax on webpages allowing websites to load content onto the screen without refreshing the page. Ajax is not a new technology, or different language, just existing technologies used in new ways.

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 Garrett explained that the following technologies are incorporated:

  • HTML (or XHTML) and CSS for presentation
  • The Document Object Model (DOM) for dynamic display of and interaction with data
  • JSON or XML for the interchange of data, and XSLT for its manipulation
  • The XMLHttpRequest object for asynchronous communication
  • JavaScript to bring these technologies together

Since then, however, there have been a number of developments in the technologies used in an Ajax application, and in the definition of the term Ajax itself. XML is no longer required for data interchange and, therefore, XSLT is no longer 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. A variety of popular JavaScript libraries, including JQuery, include abstractions to assist in executing Ajax requests.

Asynchronous HTML and HTTP (AHAH) involves using XMLHTTPRequest to retrieve (X)HTML fragments, which are then inserted directly into the Web page.

The most popular products in category AJAX Development All category products

F.A.Q about AJAX Development

What Is AJAX?

AJAX is an acronym that stands for Asynchronous JavaScript and XML, and it describes a set of development techniques used for building websites and web applications. According to web developer and Skillcrush WordPress instructor Ann Cascarano, the best way to understand AJAX is to start with identifying its specific purpose in the web development process. AJAX’s core function is to update web content asynchronously (the “A” of AJAX), meaning a user’s web browser doesn’t need to reload an entire web page when only a small portion of content on the page needs to change.

One of the most ubiquitous examples of asynchronous updating is Google’s “Google Suggest” feature. When you enter a search query into Google’s search bar and the Google website automatically begins offering auto-complete options while you type, that’s AJAX in action. The content on the page changes (in this case, the auto-complete options in the search bar) without having to manually refresh the page (something that would make Google Suggest impractical to use). Features like Google Suggest are a fundamental part of contemporary web browsing, which points to how essential AJAX is in web development. In addition to Google Suggest, Cascarano says that AJAX is commonly used to update features like status and notification bars, online forms, comments sections, and surveys and polls. But what exactly are the “J” and “X” of AJAX and how do they make asynchronous updating possible?

JavaScript and XML

As mentioned above, the “J” in AJAX stands for JavaScript. JavaScript is a type of scripting language—coding languages used to automate website processes so web developers don’t have to individually program each instance of the process that appears on a page. In JavaScript’s case, it’s used specifically to create, add, and manage dynamic website content. In other words, after markup languages like HTML and CSS are used to build and display static web features (headers, fonts, paragraphs, etc.), JavaScript is then used to control features that require real time updates while a visitor is viewing a page (think interactive maps, animated graphics, scrolling video, jukeboxes, etc). Since JavaScript is in the business of updating page content without requiring viewers to manually reload entire pages, it’s a critical component for AJAX’s asynchronous updating.

The “X” in AJAX is XML (Extensible Markup Language). As its name suggests, XML is a markup language, which means it’s in the same family as languages like HTML and CSS. Markup languages are coding languages used to annotate parts of a web document that are intended to give web browsers instructions about how to understand, process, and display a web page, versus the actual text intended to be displayed on the page. While HTML and CSS focus on instructing how page content is displayed (paragraphs, headers, fonts, colors, etc.), XML is used to transfer data stored on the page to the browsers that view it. Individual computer systems are often incompatible with one another and can’t understand or interact with data formatted by a different system. XML allows developers to bypass this obstacle by storing data in plain text format between XML tags. By doing this, XML offers a way of storing, moving, and sharing data that isn’t dependent on a particular software or hardware system (something that’s crucial for the internet, where data needs to be available and understandable across all software and hardware platforms). RSS feeds—subscription web feeds that allow users to access content from blogs and news sources as they are updated in real time—are built with XML and are an example of the language’s practical data-sharing capabilities. But how does XML combine with JavaScript to form AJAX?

How Does AJAX Work?

According to Cascarano, JavaScript and XML combine to make asynchronous updating happen through the use of something called an XMLHttpRequest object. When a user visits a web page designed to make use of AJAX and a prescribed event occurs (the user loads the page, clicks a button, fills out a form, etc.) JavaScript creates an XMLHttpRequest object, which then transfers data in an XML format between a web browser (the program being used to view the website) and a web server (the software or hardware where a website’s data is stored). The XMLHttpRequest object sends a request for updated page data to the web server, the server process the request, a response is created server-side and sent back to the browser, which then uses JavaScript to process the response and display it on the screen as updated content.

To recap: JavaScript automates the updating process, the request for updated content is formatted in XML to make it universally understandable, and JavaScript again kicks in to refresh the relevant content for the user viewing the page. Cascarano notes that the AJAX technique ignores extraneous page data and only handles requests for updated information and the updated information itself. This is really the heart of AJAX’s effectiveness, making websites and applications that use AJAX faster and more responsive for users.

Materials