Ajax embedded in today’s application
Ajax is common part of every web application these days. Everyone wants their web application should be like gmail application. Every event fire without submitting page to web server, is become biggest priority of every programmer. All process working behind web screen, if you are open thing, it starts working for next task which you can do next. If you open photo album, and click on first photo, it will downloading next photo for you without asking from you, and if you click on next photo you will get surprise, photo will open immediately. Form validation, pre loaded images, dynamic data loading on request from server, everything is part of ajax. Ajax made our life very easy and more comfortable according to past. Speed of web application and working scenario on web completely changed.
Most of top websites already switched to ajax and more is on queue for converting their web application with ajax enabled.
jQuery is javascript API with punch line of “The write less, Do More in JavaScript”. jQuery is really thing which can change programming style in JavaScript. jQuery reduce your code and provide more output, it also increase rapid speed of programming.
Look at example
Suppose we have a web page in which we need to call content from another file on onClick function. We have two option Ajax and jQuery
Example with Ajax
page1.jsp
<head>
<title>Ajax Example</title>
<script src="ajax.js"></script>
<script>
function loadPage()
{
loadContent();
}
</script>
</head>
<body>
<div id="ctn"></div>
<a href="javascript:loadPage()">Load Dynamic content</a>
</body>
</html>
content.html
ajax.js
function loadContent()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="content.html"
xmlHttp.onreadystatechange=getData;
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
return
}
function getData()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("ctn").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var objXMLHttp=null
if (window.XMLHttpRequest)
{
objXMLHttp=new XMLHttpRequest()
}
else if (window.ActiveXObject)
{
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp
}
Ajax needs this work to load content from server.
Take same example of jQuery to load content from server.
Example of jQuery
page1.jsp
<head>
<title>jQuery Example</title>
<script src="jquery-1.2.6.js"></script> //download http://www.jQuery.com/
<script>
function loadPage()
{
$("#ctn").load("content.html");
}
</script>
</head>
<body>
<div id="ctn"></div>
<a href="javascript:loadPage()">Load Dynamic content</a>
</body>
</html>
content.html
We saw ajax need to write lot of code to load content from server, but jQuery need their API to include in page1.jsp web file. After including jQuery.js file all work is done by jQuery API. We need to remember which function or plugin have to use to run our program and task. This also saves our time of development and silly mistakes in program. Our main function becomes to search and study function of jQuery and plugins provided by jQuery and more people who love jQuery.
Loading ...
Link to Us