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") |
