AngularJS

AngularJS – Ajax

AJAX is Asynchronous JavaScript and XML, which is used on the client side as a group of interrelated web development techniques, in order to create asynchronous web applications. According to the AJAX model, web applications can send and retrieve data from a server asynchronously without interfering with the display and the behavior of the existing page.

Many developers use JSON to pass AJAX updates between the client and the server. Websites updating live sports scores can be considered as an example of AJAX. If these scores have to be updated on the website, then they must be stored on the server so that the webpage can retrieve the score when it is required. This is where we can make use of JSON formatted data.

Any data that is updated using AJAX can be stored using the JSON format on the web server. AJAX is used so that javascript can retrieve these JSON files when necessary, parse them, and perform one of the following operations −

  • Store the parsed values in the variables for further processing before displaying them on the webpage.
  • It directly assigns the data to the DOM elements in the webpage, so that they are displayed on the website.

AJAX is a developer’s dream, because you can:

  • Update a web page without reloading the page
  • Request data from a server – after the page has loaded
  • Receive data from a server – after the page has loaded
  • Send data to a server – in the background

Capture.PNG


AngularJS provides $https: control which works as a service to read data from the server. The server makes a database call to get the desired records. AngularJS needs data in JSON format. Once the data is ready, $https: can be used to get the data from server in the following manner −

var app = angular.module("myApp",[]);
app.controller("myController",function ($scope,$http){
 
 var requestPromise = $http.get('info.txt');
 
 // requestPromise: object that has 3 properties.
 // success - error - $$state (which is private object). 
 requestPromise.success(function(response){
   $scope.info = response;
   console.log($scope.info);
 });
 requestPromise.error(function(){
   console.log("Failed");
 });
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s