Quick Contact

    AngularJS AJAX

    AJAX stands for “Asynchronous JavaScript AndXML”. AJAX is a newtechnique for creating better, faster, and more interactive web scripts with XML,HTML, CSS, PHP, ASP and Java Script by the server.AJAX is used to update parts of a web page, without reloading the whole page.That means with Ajax, you can communicate with the server to renew theinformation, without refreshing the web page.

    By jQuery and JavaScript, you can easily implement Ajax in your web pages.

    To run Ajax, you need a server.

    AngularJS provides a $http service for reading data and remote servers. It is used to retrieve the desired records from a server.

    AngularJS requires data in JSON format. Once the data is ready, $http gets the data form server in the following manner:


    function employeeController($scope,$http) {

    r url = “file.txt”;

    $http.get(url).success( function(response) {

    $scope.students = response;


    Here the file “file.txt” is students records. $http service makes an AJAX call and sets response to its property employees. This model is used to draw tables in HTML.

    AngularJS AJAX Example
    	< !DOCTYPE html>  
    	< html>  
    	< head>  
    	 < title>Angular JS Includes < /title>  
    	    < style>  
    	         table, th , td {  
    	            border: 1px solid grey;  
    	            border-collapse: collapse;  
    	            padding: 5px;  
    	         table tr:nth-child(odd) {  
    	            background-color: #f2f2f2;  
    	         table tr:nth-child(even) {  
    	            background-color: #ffffff;  
    	      < /style>  
    	   < /head>  
    	   < body>  
    	      < h2>AngularJS Sample Application< /h2>  
    	      < div ng-app = "" ng-controller = "studentController">  
    	         < table>  
    	            < tr>  
    	               < th>Name< /th>  
    	               < th>Age< /th>  
    	               < th>Class< /th>  
    	            < /tr>  
    	            < tr ng-repeat = "student in studentss">  
    	               < td>{{ student.Name }}< /td>  
    	               < td>{{ student.Age }}< /td>  
    	               < td>{{ student.Class }}< /td>  
    	            < /tr>  
    	         < /table>  
    	      < /div>  
    	      < script>  
    	         function studentController($scope,$http) {  
    	            var url = "data.txt";  
    	            $http.get(url).success( function(response) {  
    	               $scope.students = response;  
    	      < /script>  
    	      < script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
    	      < /script>  
    	   < /body>  
    	< /html>  

    Here the file data.txt contains the employee’s record.

    “records.txt” (students data in JSON format)
    	   "Name" : "Rohan Arrora",  
    	   "Age" : 14,  
    	   "Class" : "7th"  
    	   "Name" : "Ashish Tiwary",  
    	   "Age" : 17,  
    	   "Class" : "10th"  
    	   "Name" : "Navi Singh",  
    	   "Age" : 18,  
    	   "Class" : "12th"  
    	   "Name" : "Robin",  
    	   "Age" : 10,  
    	   "Class" : "5th"  

    Enroll Yourself in Live Classes For AngularJS Tutorial.

    To execute the above example, you have to deploy sampleAngularJS.htm and records.txt file to a web server.

    Open the file sampleAngularJS.htm using the URL of your server in a web browser and see the result.


    The result would look like this:

    Name Age Class
    Rohan Arrora 14 7th
    Ashish Tiwary 17 10th
    Navi Singh 18 12th
    Robin 10 5th
    HTTP Service Methods

    There are several shortcut methods of calling the $http service. In the above example, .get method of the $http service is used. Following are several other shortcut methods:

    • .delete()
    • .get()
    • .head()
    • .jsonp()
    • .patch()
    • .post()
    • .put()

    The response from the server is an object with these properties:

    • .config the object used to generate the request.
    • .data a string, or an object, carrying the response from the server.
    • .headers a function to use to get header information.
    • .status a number defining the HTTP status.
    • .statusText a string defining the HTTP status.
    AJAX Chart
    AngularJS AJAX
    readyState Explanation
    0 uninitialized
    1 initialized
    2 send data
    3 receive data
    4 Complete. Returned data is available
    http status Explanation
    200 the request succeeded
    401 unauthorized
    403 forbidden
    404 not found

    Enroll Yourself in Live Classes For Angularjs Training in Noida.

    Copyright 1999- Ducat Creative, All rights reserved.