top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

AJAX (Asynchronous Javascript And XML)

+4 votes
401 views
  • AJAX is not a new language but just a new way to use existing standards. With AJAX you can create better, faster and more user friendly web applications.
  • AJAX is based on Java script and HTTP requests AJAX Uses Java script to send and receive data between Web browser and Web Server.
  • AJAX techniques makes Web pages more responsive by exchanging data with the web server behind the scene, instead of reloading on entire web page each time a user makes a changes.
  • AJAX is runs in your browser It uses asynchronous data transfer (HTTP requests) between the information from the server instead of whole pages. This application makes Internet applications smaller, faster and more user friendly
  • AJAX Applications are browser and platform independent (Cross Platform, Cross Browser Technology)
  • AJAX uses following open standards: Java Script, XML, HTML, CSS

The Open Standards used in AJAX are well defined, supported by all major browser.

Creating a XMLHttpRequest object:

Different browser use different method to create an XMLHttpRequest object

IE uses an ActiveXObject and other browser uses a built in javascript object call XMLHttpRequest.

if (window.XMLHttpRequest)
{
            XMLHtpp = new XMLHttpRequest()
}
else if (windows.ActionxObject)
{
           XMLHttp = new ActiveXObject ("Microsoft.XMLHTTP")
}

Create the object the Microsoft way, available in IE-6 and above.

XMLHttp = new ActiveXObject ("Msxml2.XMLHTTP")

If this catches error, then try to use the older way (IE 5.5 and old)

XMLHttp = new ActiveObject ("Microsoft.XMLHTTP")

If XMLHttp still has a null value, try to create the object in the standard way like below:

XMLHttp = new XMLHttpRequest()

XML HttpRequest Method :

Then open () method: The open () method setup a request to web server.
The send () method: The send () method sends a request to the server.
The abort () method: The abort () method abort the current server request.

Ready State Description
0 ==>The request is not initialize.
1 ==> The request has been setup.
2 ==> The request has been sent.
3 ==> The request is in process state.
4 ==> The request is completed.

posted Jul 14, 2014 by Amit Kumar Pandey

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

AngularJS

AngularJS is an open source JavaScript framework that allows to move the presentation logic on the client side and thus separate it from the logic of the application that remains on the server. AngularJS aims to minimize this complexity by offering a great environment for development, as well as the means to test your apps. 

AngularJS

Pre-request Language

  • HTML
  • CSS
  • JavaScript

Start your First HTML page with AngularJS

AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag:

 

<!DOCTYPE html>

<Html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">

</script>

<Body>

<div ng-app="">

  <p>Addition of 5 and 7 = {{5 + 7}} </p>

</div>

</body>

</html>

 

 

AngularJS Applications

Data Binding

Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes. 

 

Controller

AngularJS controller to control the flow of data in the application. AngularJS controller is defined with ng-controller directive. AngularJS controller is a JavaScript object containing attributes/properties and functions. 

 

<!DOCTYPE html>

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">

</script>

<script>

//AngularJS Module

var app = angular.module('myApp', []);

//AngularJS Controller

app.controller('myCtrl', function($scope) {

    $scope.firstName= "Atindra";

    $scope.lastName= "Nath";

});

</script>

<body>

      <div ng-app="myApp" ng-controller="myCtrl">

      First Name: <input type="text" ng-model="firstName"><p/>

      Last Name: <input type="text" ng-model="lastName"><p/>

      Full Name: {{firstName + " " + lastName}}

      </div>

</body>

</html>

Output

Separating Controller and Module files

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<script src="module/moduleScript.js"></script>

<script src="controller/controllerScript.js"></script>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

      <div ng-controller="myCtrl">

      First Name: <input type="text" ng-model="firstName"><p/>

      Last Name: <input type="text" ng-model="lastName"><p/>

      Full Name: {{firstName + " " + lastName}}

      </div>

</body>

</html>

//AngularJS Module File (moduleScript.js)

var module = angular.module('myApp', []);

//AngularJS Controller (controllerScript.js)

module.controller('myCtrl', function($scope) {

    $scope.firstName= "Atindra";

    $scope.lastName= "Nath";

});

 

AngularJS Directives

AngularJS directives are extended HTML attributes with the prefix ng-.

  • ng-app − This directive starts an AngularJS Application.
  • ng-init − This directive initializes application data.
  • ng-model − This directive binds the values of AngularJS application data to HTML input controls.

ng-repeat − This directive repeats html elements for each item in a collection.

 

<body ng-app="myApp" ng-controller="myCtrl">

      <div>

      First Name: <input type="text" ng-model="firstName"><p/>

      Last Name: <input type="text" ng-model="lastName"><p/>

      Full Name: {{firstName + " " + lastName}}

      </div>

            <p ng-init="myCol='blue'">Write any color name

                  <input style="background-color:{{myCol}}"

                  ng-model="myCol" value="{{myCol}}">

            </p>

      <div ng-init="cost=5; quantity= [1, 15, 19, 2, 40] ;">

            <p>Total in dollar: ${{quantity [2] * cost}} </p>

      </div>

      <div>

        <ul>All Rainbow Colors

          <li ng-repeat="x in colors">

           <div style="background-color :{{ x}}; width: 10%" > {{x}} </div>

          </li>

        </ul>

      </div>

</body>

 

Output

READ MORE
...