AJAX
----
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing(Internet) standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
AJAX is about updating parts of a web page, without reloading the whole page.
AJAX applications are browser- and platform-independent!
The keystone of AJAX is the XMLHttpRequest object.
The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
-> 'XMLHttpRequest' object is used for data exchange asynchronusly.
Basic Flow of Ajax
------------------
1. When an event occurs in a browser, an 'XMLHttpRequest' object is created and send that request object to server.
2. In server Http request is processed and send responce to browser.
There are few methods for XMLHttpRequest to process, they are,
open(method,url,async)
send(string)
setRequestHeader(header,value)
When async=true, 'onreadystatechange' event is used to execute response, this event is triggered every time the 'readyState' changes.
The 'readyState' property holds the status of the XMLHttpRequest.
Three important properties of the 'XMLHttpRequest' object:
onreadystatechange -
Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState -
Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status -
200: "OK"
404: Page not found
To get the response data from the server we use properties 'responseText' & 'responseXML' for xmlhttprequest object.
Sample Example
--------------
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
/* To create an 'XMLHttpRequest' object */
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest(); // here xmlhttprequest object is created
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/* 'onreadystatechange' is used when async=true, to execute when the response is ready */
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; // responseText : gets the response data as a string
// responseXML : gets the response data as XML
}
}
/* xmlhttprequest object methods are open(method,url,async), send(string) and setRequestHeader(header,value) */
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Example for retrieving websphere connections feed in ajax:
var getMyKeyURL = "https://tecnics.connections.com/communities/service/atom/forms/communities/my?sortField=lastmod&inclForum=true&ps=3&forceRefresh=1386773191722";
$.ajax({
type : "GET",
url : getMyKeyURL,
dataType : "xml",
cache : false,
async : true,
success : function(data) {
alert("XML File is loaded!");
alert("data: "+data);
var author = $(data).find("author").last();
alert("author: "+author);
name = $(author).find("name").text();
alert("name: "+name);
myKey = $(author).find("userid").text();
alert("myKey : "+myKey);
},
error: function() {
alert("getMyKey error...!");
}
});
----
AJAX = Asynchronous JavaScript and XML.
AJAX is not a new programming language, but a new way to use existing(Internet) standards.
AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.
AJAX is about updating parts of a web page, without reloading the whole page.
AJAX applications are browser- and platform-independent!
The keystone of AJAX is the XMLHttpRequest object.
The XMLHttpRequest object is used to exchange data with a server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
-> 'XMLHttpRequest' object is used for data exchange asynchronusly.
Basic Flow of Ajax
------------------
1. When an event occurs in a browser, an 'XMLHttpRequest' object is created and send that request object to server.
2. In server Http request is processed and send responce to browser.
There are few methods for XMLHttpRequest to process, they are,
open(method,url,async)
send(string)
setRequestHeader(header,value)
When async=true, 'onreadystatechange' event is used to execute response, this event is triggered every time the 'readyState' changes.
The 'readyState' property holds the status of the XMLHttpRequest.
Three important properties of the 'XMLHttpRequest' object:
onreadystatechange -
Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState -
Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
status -
200: "OK"
404: Page not found
To get the response data from the server we use properties 'responseText' & 'responseXML' for xmlhttprequest object.
Sample Example
--------------
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
/* To create an 'XMLHttpRequest' object */
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest(); // here xmlhttprequest object is created
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
/* 'onreadystatechange' is used when async=true, to execute when the response is ready */
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; // responseText : gets the response data as a string
// responseXML : gets the response data as XML
}
}
/* xmlhttprequest object methods are open(method,url,async), send(string) and setRequestHeader(header,value) */
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
Example for retrieving websphere connections feed in ajax:
var getMyKeyURL = "https://tecnics.connections.com/communities/service/atom/forms/communities/my?sortField=lastmod&inclForum=true&ps=3&forceRefresh=1386773191722";
$.ajax({
type : "GET",
url : getMyKeyURL,
dataType : "xml",
cache : false,
async : true,
success : function(data) {
alert("XML File is loaded!");
alert("data: "+data);
var author = $(data).find("author").last();
alert("author: "+author);
name = $(author).find("name").text();
alert("name: "+name);
myKey = $(author).find("userid").text();
alert("myKey : "+myKey);
},
error: function() {
alert("getMyKey error...!");
}
});
