How to program with AJAX


How to program with AJAX ?

Introduction

ajax
image credit:commons.wikipedia.org

In discussing how to program with AJAX ? We must have a clear concept about what is AJAX?

Ajax (also AJAX; short for asynchronous JavaScript and XML) may be a cluster of interconnected web development techniques used on the client-side to design and use asynchronous net applications. With Ajax, web applications will send knowledge to and retrieve from a server asynchronously (in the background) . AJAX retrieves information from the XMLHttpRequest object.
Ajax isn’t one technology, however a gaggle of technologies. Hypertext markup language and CSS is employed in combination to price and elegance info. The DOM is accessed with JavaScript to dynamically show – and permit the user to move with – the data conferred. JavaScript and also the XMLHttpRequest object offer a technique for exchanging knowledge asynchronously between browser and server to avoid page reloads.

In today’s applications, it is common to use Ajax to load dynamic components of an internet site while not having to try to to a page refresh.
Imagine you have got some portion of the page (say, a listing of users records ) that you just need to dynamically update with Ajax.) The AJAX process that request just as we see in windows forms without even a post

How AJAX works?

In traditional JavaScript writing, if you would like to urge any data from a information or a file on the server, or send user data to a server, you’ll need to create an hypertext markup language kind of thing and obtain or POST information to the server. The user can need to click the “Submit” button to send/get the knowledge, watch for the server to reply, and so a brand new page can load with the results.
Because the server returns a brand new page on every occasion, this increases round trip time. As a result of it, applications will run slowly and have a tendency to be less easy. With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.
With AN HTTP request, an online page will create a call for participation to, and obtain a response from an online server, while not reloading the page. The user can stay a similar page, and he or she’s going to not notice that scripts request pages, or send information to a server within the background.

Retrieving an XML document using AJAX

When creating a server request in Ajax, the information came may be in either plain text/html. However with some special directions, Ajax will retrieve that well fashioned XML document and come it back to you as a XML object. This permits the XML knowledge to be simply parsed mistreatment normal DOM ways.

The given example shows reading the contents of XML file with AJAX

books_catalog.xml

<?xml version=”1.0″?>
<catalog>
<book id=”bk101″>
<author>Gambardella, Matthew</author>
<title>XML Developer’s Guide</title>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
<description>
An in-depth look at creating applications
with XML.
</description>
</book>
<book id=”bk102″>
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>
A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.
</description>
</book>
<book id=”bk103″>
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
<description>
After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.
</description>
</book>
<book id=”bk104″>
<author>Corets, Eva</author>
<title>Oberon’s Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
<description>
In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.
</description>
</book>
<book id=”bk105″>
<author>Corets, Eva</author>
<title>The Sundered Grail</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
<description>
The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon’s Legacy.
</description>
</book>
<book id=”bk106″>
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
<description>
When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.
</description>
</book>
<book id=”bk107″>
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
<description>
A deep sea diver finds true love twenty
thousand leagues beneath the sea.
</description>
</book>
<book id=”bk108″>
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
<description>
An anthology of horror stories about roaches,
centipedes, scorpions and other insects.
</description>
</book>
<book id=”bk109″>
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
<description>
After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.
</description>
</book>
<book id=”bk110″>
<author>O’Brien, Tim</author>
<title>Microsoft .NET: The Programming Bible</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
<description>
Microsoft’s .NET initiative is explored in
detail in this deep programmer’s reference.
</description>
</book>
<book id=”bk111″>
<author>O’Brien, Tim</author>
<title>MSXML3: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
<description>
The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.
</description>
</book>
<book id=”bk112″>
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
<description>
Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.
</description>
</book>
</catalog>

Code file

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc() {
var xmlhttp;
var txt, x, i;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
xmlDoc = xmlhttp.responseXML;
txt = “”;
x = xmlDoc.getElementsByTagName(“author”);
for (i = 0; i < x.length; i++) {
txt = txt + x[i].childNodes[0].nodeValue + “<br>”;
}
document.getElementById(“divStyle”).innerHTML = txt;
}
}
xmlhttp.open(“GET”, “books_catalog.xml”, true);
xmlhttp.send();
}
</script>
<title></title>
</head>

<body>

<div id=”divStyle”></div>
<button type=”button” onclick=”loadXMLDoc()”>Get Authors</button>

</body>
</html>

Syed Adeel Ahmed
Syed Adeel Ahmed
Analyst, Programmer, Educationist and Blogger at Technofranchise
Computer Systems Engineer from Sir Syed University Of Engineering & Technology.I am passionate about all types of programming.

Published by

Syed Adeel Ahmed

Computer Systems Engineer from Sir Syed University Of Engineering & Technology.I am passionate about all types of programming.

Leave a Reply