Blog Single

AJAX - Asynchronous JavaScript + XML

AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script. Ajax uses XHTML for content, CSS for presentation, along with Document Object Model and JavaScript for dynamic content display. Conventional web applications transmit information to and from the sever using synchronous requests. It means you fill out a form, hit submit, and get directed to a new page with new information from the server. AJAX is not a programming language. AJAX just uses a combination of: A browser built-in XMLHttpRequest object (to request data from a web server) JavaScript and HTML DOM (to display or use the data) AJAX, is a client side technique for communication with a web server. In other words, it allows you to fetch data ‘in the background’ without having to reload a whole page. In a typical web request, you send a URL request to the server and the server responds with the corresponding HTML, CSS, and JavaScript that generates a full new page in your browser. In contrast, in a typical AJAX request, the HTML, CSS, and JavaScript is already loaded. Instead of making a URL request for another whole page, you use JavaScript to talk to the server and receive smaller pieces of information that can range from HTML to other data formats like JSON and XML. The JavaScript then acts on the response and updates the page accordingly, without having to refresh the entire page.

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. 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?

#2. 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?

#3. How does AJAX works?

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. 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.

Remember, if you’ve already learned JavaScript, HTML, and XML, or even if you’re currently in the learning process, AJAX is simply a method of bringing those skills together that can be picked up over the course of hours, as opposed to an entirely new skillset.

At a high level an AJAX request consists of the URL you a making a request to, and then corresponding settings to handle the response. Below are a few of the more popular callbacks that make up the settings: success: what to do if the URL request is successful error: what to do if the URL request is unsuccessful timeout: how long to allow the URL request to run before an error message pops up beforeSend: runs before the AJAX request, good place to put a spinner complete: runs after both success and error, good place to stop a spinner

Ajax requests are triggered by JavaScript code; your code sends a request to a URL, and when it receives a response, a callback function can be triggered to handle the response. Because the request is asynchronous, the rest of your code continues to execute while the request is being processed, so it's imperative that a callback be used to handle the response. Unfortunately, different browsers implement the Ajax API differently. Typically this meant that developers would have to account for all the different browsers to ensure that Ajax would work universally. Fortunately, jQuery provides Ajax support that abstracts away painful browser differences. It offers both a full-featured $.ajax() method, and simple convenience methods such as $.get(), $.getScript(), $.getJSON(), $.post(), and $().load().

In general, Ajax does not work across domains. For instance, a webpage loaded from example1.com is unable to make an Ajax request to example2.com as it would violate the same origin policy.