Asynchronous Requests in JavaScript: AJAX, JQUERY, FETCH and AXIOS.

#javascript #jquery #ajax #node

Browser-Server Relationship in Web Pages
Browser-Server: Traditional Model
A normal web page (browser) asks the server for data in order to function. In the past, the browser would request data from the server, and the server would respond with a new DOM document, which the browser would fetch and reload the page.

AJAX (Asynchronous JavaScript + XML)
Introduction to AJAX
AJAX is an emerging programming technique in which we make asynchronous requests to the server. The browser, through JavaScript, requests data, and AJAX collects the request and requests it from the server without changing the page. The server returns the data response to AJAX, which picks up and reloads only the desired area of the DOM. This made it possible to achieve web applications capable of continually updating without having to reload the entire page.

AJAX operation
The AJAX technique with XML is based on the use of the XMLHttpRequest (XHR) object to make asynchronous requests. Currently, there are more modern alternatives, such as the fetch object to make these requests. Over time, XML fell into disuse because it was too verbose, and JSON began to be used, a new standard that is more concise in terms of information than XML.

Now, the magic of AJAX is that it understands JSON formats.
Therefore, the server, when requesting data from the database, returns the response in JSON format. The server returns the response to AJAX, which takes the JSON and structures it into the desired section of the browser's DOM.
AJAX works as an intermediary between the client and the server.

Therefore, the requests and responses obtained will be managed in the background by AJAX, improving the user experience and the interactivity, speed and usability of the web application.

XMLHttpRequest (XHR) object
The XMLHttpRequest object is native to browsers. To use it, a new XMLHttpRequest object is created. Next, we open this object and tell it to make a GET request to the specified URL. Then, we tell the object to send the request. If we want to do something with the response, we create a listener for the onload event and define a function where we can access the response and do something with it. However, the response is not in JSON format yet. Therefore, we can define the response as JSON before sending the request.

An AJAX request used to be done as follows:

JQUERY for AJAX
Introduction to jQuery
jQuery is a JavaScript library created in 2006 to simplify DOM (Document Object Model) manipulation and other common JavaScript tasks. At a time when working with JavaScript and the DOM required writing a lot of detailed and tedious code, jQuery made it possible to accomplish these tasks with just a few lines of code, making web development significantly easier. In this context, jQuery allowed AJAX requests to be made, considerably reducing the lines of code, working below XHR.

Historical Advantages of jQuery
1. DOM Simplification: jQuery simplified these interactions, allowing developers to make significant changes with less code.

2. Cross-Browser Compatibility: jQuery standardized these operations, ensuring that the code worked uniformly in different browsers.

3. AJAX Simplified: jQuery introduced methods like $.ajax(), $.get(), and $.post(), which made it easy to make asynchronous requests to the backend with simple syntax.

4. Extensible Plugins: jQuery allowed the creation of plugins that extended its functionality, such as jQuery UI, which provided advanced user interface components such as accordions and modal dialogs.

5. User Interface Components: jQuery also included components such as autocomplete, datepicker, among others, which did not exist at that time, contributing to its popularity.

6. jQuery Mobile: jQuery launched jQuery Mobile to address incompatibilities between mobile and desktop browsers, ensuring that certain components worked correctly on touch devices.

Bootstrap and jQuery: Until version 4, Bootstrap, one of the most popular CSS libraries, relied on jQuery for its interactive components. Although Bootstrap 5 has removed this dependency, many older projects still use older versions of Bootstrap.

Use in Environments and CMS: jQuery has been integrated into many development environments and content management systems (CMS). For example, ASP.NET MVC included jQuery by default since 2008, and older versions of WordPress used it as well.

JQUERY request:

JavaScript Evolution
Over time, JavaScript has evolved significantly, extending its functionalities and covering many tasks that could previously only be easily solved with jQuery. Currently, JavaScript has various libraries and frameworks that facilitate the execution of asynchronous requests, the dynamic manipulation of the DOM and the reduction of lines of code necessary for these tasks. Many of these tools have contributed to the componentization of web pages.

Technologies like Angular, React, and Vue.js emerged, providing advanced tools for building complete web applications. These technologies abstract away much of the code that jQuery simplified, allowing developers to create applications more efficiently. In addition to componentization, they offer solutions for routing, state management, testing, and ergonomics, among others.

Angular and React, for example, allow application componentization. This involves encapsulating a specific part of the user interface and its logic into independent, reusable component blocks. Each component has its own HTML template, JavaScript logic (or TypeScript in the case of Angular), and CSS styles. These components combine to create organized and reactive, that is, dynamic user interfaces.

On the other hand, jQuery could present performance problems if not optimized properly. As developers used more jQuery plugins, the code became heavier and web pages took longer to load. This led to the search for lighter and more efficient solutions, such as those mentioned above.

FETCH:
Among them, he created the native fetch API to make asynchronous requests in very few lines with pure JS, in an easier and more standardized way:

Fetch works with promises, which means it returns a promise. This promise can be consumed in two ways: using the “then()” and “catch()” methods, or the async/await functions.

Among its advantages, it is a native browser API, so it does not require the inclusion of external libraries and is lighter. Additionally, it uses promises, which makes it easier to handle asynchronous operations and improves code readability.

However, it does not support older browsers without a polyfill and does not automatically handle network errors and responses with unsuccessful HTTP status codes, requiring more manual handling.

AXIOS
Subsequently, the external library axios was created to make asynchronous requests. It is necessary to import it to be able to use it. It also works with promises, so they can be handled using the “then()” and “catch()” methods, or the async/await functions.

Among its advantages, it offers features such as intercepting requests and responses, canceling requests, and setting timeouts. Additionally, it solves the disadvantages of fetch, in terms of automatically handling network errors and unsuccessful HTTP status codes.

Current Relevance of jQuery
Although jQuery has been an incredibly useful tool, its use has declined in favor of more modern technologies. However, there are still reasons to use jQuery in certain contexts:

1. Legacy Applications: Many older applications and websites still depend on jQuery, especially those built with CMS. Migrating these applications to modern technologies can be expensive and time-consuming.

2. Bootstrap: Until version 4, Bootstrap, one of the most popular CSS libraries, depended on jQuery for its interactive components. Although Bootstrap 5 has removed this dependency, many older projects still use older versions of Bootstrap.

3. Required Functionality: If a specific project requires jQuery and there is no compelling need to change, it may be practical to continue using it.

Conclusion
jQuery has played a crucial role in the evolution of web development, providing a solution to many problems that JavaScript faced in the past. Even though many of its functionalities are now integrated into JavaScript and new technologies, jQuery is still relevant in certain contexts. If it is not necessary to use jQuery, it is preferable to opt for modern alternatives that offer more advantages and efficiency.

Keywords
• DOM: HTML tree, with all its head and body tags.

•** Synchronous:** A series of steps are executed, one followed by the other.

• Asynchronous: If there is a step that takes longer than others, this step can be done asynchronously, that is, while the rest of the steps continue to execute, it takes time to complete. It means that you don't have to reload the page.

• XML: Technique of exchanging data, which sends the entire DOM HTML document.

•JSON (JavaScript Object Notation): Much more compact way to transmit data.