Advantages
Better interactivity:
This is pretty much the most striking benefit behind why several developers and webmasters are switching to AJAX for their websites. AJAX allows easier and quicker interaction between user and website as pages are not reloaded for content to be displayed.
Easier navigation:
AJAX applications on websites can be built to allow easier navigation to users in comparison to using the traditional back and forward button on a browser.
Compact:
With AJAX, several multi purpose applications and features can be handled using a single web page, avoiding the need for clutter with several web pages. For our use of AJAX on goedkope-zomervakantie.com, it took just a few lines of code!
Backed by reputed brands:
Another assuring reason to use AJAX on your websites is the fact that several complex web applications are handled using AJAX, Google Maps is the most impressive and obvious example, other powerful, popular scripts such as the vBulletin forum software has also incorporated AJAX into their latest version.
Where Should Ajax be Used?
Ajax should be used anywhere in a web application where small amounts of information could be saved or retrieved from the server without posting back the entire pages. A good example of this is data validation on save actions. Another example would be to change the values in a drop down list-box based on other inputs, such as state and college list boxes. When the user selects a state, the college list box will repopulate with only colleges and universities in that state.
Another great example is when the client needs to save or retrieve session values from the server, based on a user preference such as the height, width or position of an object. Adjusting the width could make a callback to the server to set the session variable for the new width. This way, whenever the page is refreshed, the server can adjust the object’s width based on this session variable. Otherwise, the object would go back to its initial default width.
Other features include text hints and autocomplete text boxes. The client types in a couple of letters and a list of all values that start with those letters appear below. A callback is made to a web service that will retrieve all values that begin with these characters. This is a fantastic feature that would be impossible without Ajax and is also part of the Ajax Control Toolkit.
Example with Ajax:
Index.html
<!DOCTYPE html>
<html>
<head>
<script src="fathi.js"></script>
<link href="fathi.css" type="text/css" rel="stylesheet">
</head>
<body>
<table id="table">
<tr>
<th id="tableHead">
Things in my pocket
</th>
</tr>
<tr>
<td id="item1">
Sony Xperia M Dual
</td>
</tr>
<tr>
<td id="item2">
Choclates
</td>
<tr>
</table>
<br/>
<input type="button" value="Im a dude" onclick="dude();" />
<input type="button" value="Im a alient" onclick="alient();" />
</body>
</html>
--------------------------------------------------------------------------
xample.js
function dude(){
table = document.getElementById("table");
th = document.getElementById("tableHead");
item1 = document.getElementById("item1");
item2 = document.getElementById("item2");
table.className = "dudeTable";
th.className = "dudeHead";
item1.className = "dudeItems";
item2.className = "dudeItems";
}
function alient(){
table = document.getElementById("table");
th = document.getElementById("tableHead");
item1 = document.getElementById("item1");
item2 = document.getElementById("item2");
table.className = "alientTable";
th.className = "alientHead";
item1.className = "alientItems";
item2.className = "alientItems";
}
--------------------------------------------------------------------------
xample.css
.dudeTable{
border: 3px solid #CC0000;
background-color: #0099CC;
color: white;
}
.dudeHead{
font-family: Verdana;
font-weight: bold;
font-size: 18px;
}
.dudeItems{
font-family: Arial;
font-size: 16px;
}
/****************/
.alientTable{
border: 10px solid #CC3399;
background-color: #FFFF00;
color: red;
}
.alientHead{
font-family: Georgia;
font-weight: bold;
font-size: 15px;
}
.alientItems{
font-family: Georgia;
font-size: 14px;
font-style: italic;
}
0 Comment to "What is Ajax Where it Used in Technology? "
Post a Comment