AngularJS Ajax Call: To get access to data in your web applications, the client must make requests to remote servers. With JavaScript, these are called AJAX requests. Using $http service, AngularJS makes AJAX requests for data from remote servers and returns a response to the application.
AngularJS uses services architecture to support the AngularJS separation of concern concept. It is good practice to make AngularJS AJAX calls by wrapping $http request into a factory and using it to serve data. This helps to keep your code more organized and separate the concerns. Also, it allows you to pre-process the data and use it in multiple controllers.
Standard web pages interact with databases and servers by using an HTML form to execute scripts that GET and POST data to the server. The user clicks a button to send/get the data, waits for the server response and views a new results page that has to be loaded in the browser. This process can be slow, especially when dealing with large files or great amounts of data.
By using AJAX, the JavaScript interacts directly with the server, using an XMLHttpRequest object. This allows a web page to make requests to, and get responses from web servers, without the page ever reloading. The user clicks a button that executes a script, and the results are shown in an HTML element that is identified by an ID.
Ajax in HTML Example
<div id="ajaxResponse"></div>
AngularJS Ajax Call Example (AJAX- $http)
Make an AJAX server request, and display the result in a header:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-controller="exampleCtri ng-app="exampleApp"">
<p>The School message is:</p>
<h1> {{exampleSchools}}</h1>
</div>
<p>The School is closed today for rain.</p>
<Script>
var sdntService = angular.module('schoolService',[])
school Service.factory('school Data Up', ['$http',function ($http) {
var urlBase='http://localhost:2307/Service.svc';
var schoolDataOp ={};
SchoolDataOp.getSchols function () {
return $http.get(urlBase+/GetSchools");
};
School DataOps.and School = function (stud) {
return $http.post(url Base+'/Add School',schools);
};
return Student DataOp;
}]);
Angular JS Ajax Example Output
