How ajax works? Difference between AngularJS and jQuery

Ajax which stands for Asynchronous JavaScript and XML is a set of techniques used in web development that allow the web pages to update the data without refreshing the entire web page. It can load and display data dynamically and respond to user input simultaneously giving a seamless user experience. With the help of this technique, the data can be sent and retrieved from the server asynchronously.

The essential components used while implementing Ajax consist

• XMLHttpRequest (XHR) object − The XHR object sends HTTP requests to the server and receives responses.

• Server-side script − processes the data and returns a response in a specific format.

• Client-side code − It sends the HTTP request to the server using the XHR object and handles the response to update the web page accordingly.

• Data Format − Th data that is exchanged between the client and server is usually in a specific format such as XML, JSON, or plain text.

Working of Ajax

Ajax is a set of technologies that allows the web page to update data without refreshing the whole page. It works by sending an asynchronous request from the client side to the server, enabling the page to update without a full refresh. After this, the server processes the request and sends back the response and finally with the help of DOM manipulation the web page is updated.

Use of AJAX in Angular and jQuery

Ajax is a combination of multiple technologies that can be used in multiple web development frameworks, including AngularJS and jQuery which provides some built-in support for Ajax, making it easy to implement in web apps.

What is Angular.js

AngularJS is a popular open-source framework built by Google used for building dynamic web applications like ReactJS. Angular provides has a powerful feature called data-binding which allows the developers to create complex user interfaces (UI) with less code.

The $http service of angular consist of methods that helps in making HTTP requests, which include GET, POST, PUT, DELETE, and many more. These methods are used by developers to send or receive requests to and from a server asynchronously. The service gives back the response data that can be handled using the AngularJS data-binding feature, allowing for easy manipulation of the DOM.

Example

The following code snippet shows how to make an Ajax request using the $http service in AngularJS.

$http({
   method: 'GET',
   url: '/api/data'
}).then(function(response) {
   // handle response data
}, function(error) {
   // handle error
});

The above examples use AngularJS's $http service to do a GET request to the URL /api/data. The $http service returns a promise object and is resolved after the HTTP response is received. The promise received is handled using the then() function, which takes two arguments - a success and an error callback function. Above, the success and error functions are defined using anonymous functions. The success function is called when the promise is resolved, and the response data is passed as an argument. Also, the error function will be called when the promise is rejected, and the details of the error are passed as an argument.

Features of Angular.js

• Two-way Data Binding − Angular provides a powerful data-binding feature that allows the data to flow in both directions between the model and view, providing real-time updates.

• Dependency Injection − Angular has built-in support for dependency injection, allowing developers to write modular and testable code. It simplifies code and makes it easier to manage complex applications.

• Directives − Angular provides a set of built-in directives, allowing developers to extend HTML with new attributes and elements and allows them to create reusable components and templates, improving code organization and reducing code duplication.

What is jQuery

jQuery is another popular JavaScript library among web developers as it provides a wide range of features in web development, including the use of Ajax. The jQuery.ajax() method consists of multiple methods that can be used for making Ajax requests. Some of them are the HTTP method, URL, and data to send. As Ajax gives back the response data, it can be handled with the use of jQuery data manipulation functions which helps in the easy manipulation of the DOM.

Example

The following code snippet shows how to make an Ajax request using the jQuery.ajax() method −

$.ajax({
   method: 'GET',
   url: '/api/data',
   success: function(response) {
      // handle response data
   },
   error: function(error) {
      // handle error
   }
});

In jQuery, we have created an AJAX request that sends an HTTP GET request to the "/api/data" endpoint. Here, the method option specifies the HTTP method to be used for the GET request. The url option specifies the endpoint of the request that will be made. Here the success & error functions are callback functions that will be executed depending on what outcome will be given by the AJAX request, If the AJAX request is successful, success will be called, and the data returned by the server will be passed as an argument, and if not, the error function will be called, and the error object that occurred is passed as an argument.

Features of jQuery

• DOM Manipulation − jQuery provides a set of functions for manipulating the Document Object Model (DOM), for creating dynamic and interactive web pages with ease

• Event Handling − jQuery provides a simple and consistent interface for handling events in web pages, making it easy to create responsive user interfaces.

• Ajax − jQuery provides a powerful set of functions for making Ajax requests, enabling developers to load and update data without refreshing the entire page.

Difference between Angular.js and jQuery

Basis	AngularJS	jQuery
Architecture	AngularJS is a complete MVC (Model-View-Controller) framework.	jQuery is a JavaScript library that focuses on DOM manipulation and event handling.
Data Binding	AngularJS provides two-way data binding, which means that changes in the model and the view are automatically synchronized.	jQuery requires manual DOM manipulation.
Dependency Injection	AngularJS provides built-in support for dependency injection, which simplifies the development process and makes the code more testable.	jQuery does not have a built-in dependency injection feature.
Routing	AngularJS provides a powerful routing system that allows developers to create single-page applications.	jQuery does not have a built-in routing system.
Testing	AngularJS provides built-in support for testing, which makes it easy to write unit tests and end-to-end tests for applications.	jQuery does not have a built-in testing framework.
Size	AngularJS is a more complex framework than jQuery.	jQuery is a lightweight library.
Complexity	AngularJS requires more time to learn and implement.	jQuery is easy to learn and use.
Mobile Support	AngularJS provides better support for mobile development, with features such as touch events and mobile-specific directives.	jQuery also has mobile support, but it is not as comprehensive as AngularJS

Conclusion

Ajax is a combination of technologies used in enabling web pages to update data without refreshing the entire page, providing a seamless user experience. This combination of technologies works by sending asynchronous requests from the client side to the server, and with the help of a popular language i.e, JavaScript within the user's browser and XMLHttpRequest (XHR), that is responsible for handling the client and server communication. Some of the essential components used in implementing Ajax include XMLHttpRequest (XHR) object, server-side script, client-side code, and data format.