Ajax Quick Tutorial

AJAX stands for Asynchronous JavaScript and XML. AJAX is not a programming language but a technique for creating interactive web applications. It sends and receives data from client browser to server(independent of server technology).

Significance

• Though XML is the common format, Ajax supports other types like plain text, Json
• It allows web pages to be updated asynchronously by exchanging data with a web server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

Limitations

• AJAX has browser incompatibility 
• For security reasons, modern browsers do not allow access across domains data

Workflow

• Trigger (on page load, onclick, onchange, etc,.)
• create XMLHttpRequest object in JavaScript
• send a request to a web server
• receive the response
• process the response in JavaScript

3 Way to use Ajax

Direct Method

function loadDoc() {
  var xhttp = new XMLHttpRequest(); //create XMLHttpRequest object in JavaScript
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) //checking the status and read the data
{document.getElementById("result").innerHTML = this.responseText;}
  };
  xhttp.open("GET", "feed.xml", true); // get or post
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//to set header for content type or cookies
  xhttp.send("m=1&type=summary");//for get parameters can be passed
  xhttp.send();
}

-----------
Callback Method
onclick="loadDoc('ajax_info.txt', myFunction)"

function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {cFunction(this);}
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("result").innerHTML = xhttp.responseText;
}

JQuery Method
add Jquery lib http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js
<button id="readFile">Read File</button>
$(document).ready(function() {
    $("#readFile").click(function() {
        $.ajax({
            url : "http://macrolayer.blogspot.com/2016/03/waterways.html?m=1",
            dataType: "text",
            success : function (data) {
                alert(data.length);
                alert(data);
            }
        });
    });
});

Method	Description
new XMLHttpRequest()	Creates a new XMLHttpRequest object
abort()	Cancels the current request
getAllResponseHeaders()	Returns header information
getResponseHeader()	Returns specific header information
open(method,url,async,user,psw)	"Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password"
send(optional string)	Sends the request to the server. parameter is used for POST requests.
setRequestHeader()	set the header content to be sent

Property	Description
onreadystatechange	Defines a function to be called when the readyState property changes
readyState	"Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready"
responseText	Returns the response data as a string
responseXML	Returns the response data as XML data
status	"Returns the status-number of a request 200: ""OK"" 403: ""Forbidden"" 404: ""Not Found"""
statusText	Returns the status-text (e.g. "OK" or "Not Found")