Here is the example. I am writing the code for 5 files. Just copy it. Craete same named files and put data in and test it.
—————————————————-
example.htm
<html>
<head>
<title>AJAX Tutorial</title><script language=”JavaScript” src=”ajax.js”></script>
<script language=”JavaScript”>
function doSomethingWithData(str)
{
document.getElementById(’MyID’).innerHTML = str;
}
</script>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><style type=”text/css”>
<!–
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #666666;
}
–>
</style></head>
<body>
<b>AJAX Tutorial: Example 1</b><br />
This example shows how to dynamically retrieve data from a JavaScript file.<br /><br />
<a href=”#” onClick=”loadScript(’Data1.js’)”>Data File 1</a><br />
<a href=”#” onClick=”loadScript(’Data2.js’)”>Data File 2</a><br />
<a href=”#” onClick=”loadScript(’Data3.js’)”>Data File 3</a><br />
<br />
<div id=”MyID”> </div>
</body>
</html>
ajax.js
function loadScript(scriptURL)
{
var newScript = document.createElement(”script”);
newScript.src = scriptURL;
document.body.appendChild(newScript);
}
function loadData(URL)
{
// Create the XML request
xmlReq = null;
if(window.XMLHttpRequest) xmlReq = new XMLHttpRequest();
else if(window.ActiveXObject) xmlReq = new ActiveXObject(”Microsoft.XMLHTTP”);
if(xmlReq==null) return; // Failed to create the request
// Anonymous function to handle changed request states
xmlReq.onreadystatechange = function()
{
switch(xmlReq.readyState)
{
case 0: // Uninitialized
break;
case 1: // Loading
break;
case 2: // Loaded
break;
case 3: // Interactive
break;
case 4: // Done!
// Retrieve the data between the <quote> tags
doSomethingWithData(xmlReq.responseXML.getElementsByTagName(’quote’)[0].firstChild.data);
break;
default:
break;
}
}
// Make the request
xmlReq.open (’GET’, URL, true);
xmlReq.send (null);
}
Data1.js
doSomethingWithData(”Text Data 1 - Hello World”);
Data2.js
doSomethingWithData(”Text Data 2- Happy Ajaxing”);
Data3.js
doSomethingWithData(”Data 3 - Example”);
—————————————————-
And thats it :)
Share This
Ajax, or AJAX, is a web development technique used for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is intended to increase the web page’s interactivity, speed, functionality, and usability.
The name is an acronym standing for Asynchronous JavaScript and XML. Ajax is asynchronous in that loading does not interfere with normal page loading. JavaScript is the programming language that Ajax function calls are made in. Data retrieved using the technique is commonly formatted using XML, as reflected in the naming of the XMLHTTPRequest object from which Ajax is derived.
Ajax is a cross-platform technology usable on many different operating systems, computer architectures, and Web browsers as it is based on open standards such as JavaScript and XML, together with open source implementations of other required technologies.
The Ajax technique uses a combination of:
XHTML (or HTML) and CSS, for marking up and styling information.
The DOM accessed with a client-side scripting language, especially ECMAScript implementations such as JavaScript and JScript, to dynamically display and interact with the information presented.
The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added <script> tags may be used.
XML is sometimes used as the format for transferring data between the server and client, although any format will work, including preformatted HTML, plain text and JSON. These files may be created dynamically by some form of server-side scripting.
Like DHTML, LAMP, and SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies.
The “core” and defining element of Ajax is the XMLHttpRequest object, which gives browsers the ability to make dynamic and asynchronous data requests without having to unload and reload a page. Given XMLHttpRequest can eliminate the need for page refreshes, other technologies become more prominently used and highlighted with this development approach.
Besides XMLHttpRequest, the use of DOM, CSS, and JavaScript provides a more-enhanced “single-page” experience.
Justification
The core justification for Ajax style programming is to overcome the page loading requirements of HTML/HTTP-mediated web pages. Ajax creates the necessary initial conditions for the evolution of complex, intuitive, dynamic, data-centric user interfaces in web pages—the realization of that goal is still a work in progress.
Web pages, unlike native applications, are loosely coupled, meaning that the data they display are not tightly bound to data sources and must be first marshaled (set out in proper order) into an HTML page format before they can be presented to a user agent on the client machine. For this reason, web pages have to be re-loaded each time a user needs to view different datasets. By using the XMLHttpRequest object to request and return data without a re-load, a programmer by-passes this requirement and makes the loosely coupled web page behave much like a tightly coupled application, but with a more variable lag time for the data to pass through a longer “wire” to the remote web browser.
For example, in a classic desktop application, a programmer has the choice of populating a tree view control with all the data needed when the form initially loads, or with just the top-most level of data—which would load more quickly, especially when the dataset is very large. In the second case, the application would fetch additional data into the tree control depending on which item the user selects. This functionality is difficult to achieve in a web page without Ajax. To update the tree based on a user’s selection would require the entire page to re-load, leading to a very jerky, non-intuitive feel for the web user who is browsing the data in the tree.
Share This
Loading ...
