AJAX in a nutshell

AJAX stands for asynchronous JavaScript and XML. AJAX is a combination of technologies to achieve the goal of asynchronous JS requests which can be performed simultaneously(as opposed to Synchronous which is basically imperative). The technologies that AJAX is made up of are the following:

• HTML and CSS for marking up and styling information.
• The DOM accessed with JavaScript to dynamically display and interact with the information presented.
• A method for exchanging data asynchronously between browser and server, thereby avoiding page reloads. The XMLHttpRequest (XHR) object is usually used, but sometimes an IFrame object or a dynamically added tag is used instead.
• A format for the data sent to the browser. Common formats include XML, pre-formatted HTML, plain text, and JavaScript Object Notation (JSON). This data could be created dynamically by some form of server-side scripting.

The following diagram illustrates the process.

AJAX’s fundamental function is to create fast and dynamic web pages. It does this by sending HTTP requests to the server asynchronously, this means that the entire web page doesn’t need to reload in order to update most content. The response data is parsed using the DOM(Document Object Model). AJAX that returns JSON (the data format of choice for most web developers today) is officially called AJAJ, but this term is not widely used. My personal favourite way to perform an AJAX request is using a . Some advantages and disadvantages of AJAX are as follows:

Advantages

• It reduces the traffic levels between the client and server, potentially speeding up your website if done properly, for example using lazy loading techniques.
• The response time is faster which increases performance and speed.
• You can use JSON instead of XML which is much easier to parse.
• AJAX communicates over the HTTP protocol, which means it has access to GET,PUT, POST, DELETE and HEAD requests.

Disadvantages

• It can increase design, devtime and complexity of your application, possibly unnecessarily.
• You may need to import third party libraries to facilitate AJAX requests, for example Redux-thunk if you are using Redux for state management.
• AJAX apps have worse security as all of the files are downloaded to the client side.
• SEO may suffer in AJAX apps as browsers cannot index AJAX pages.
• If your user is using a JS disabled browser(unlikely these days) then your app won’t work. A more likely scenario would be that your user has disabled JS inadvertently in the settings for their browser.
• Due to security constraints you can only use it to access info from the host that served the initial page, if you need to display info from another server, it’s not possible from within the AJAX.

AJAX in a nutshell, in a nutshell:

Here come the juicy bullet points:

• Stands for asynchronous JavaScript and XML.
• Uses HTTP protocol to communicate.
• Does not require entire browser window to reload to change data.
• JSON is the current returned data format of choice for the web.

Resources