UNIT-6 Web Designing Technologies (JavaScript-DHTML)

Ajax
• AJAX stands for Asynchronous JavaScript and XML.
• AJAX allows you to send and receive data asynchronously without reloading the web page.
So it is fast.
• AJAX allows you to send only important information to the server not the entire page. So only
valuable data from the client side is routed to the server side. It makes your application
interactive and faster.
• Ajax is a technique for creating fast and dynamic web pages.
• It is a group of inter-related technologies like JavaScript, DOM, XML, HTML/XHTML, CSS,
XMLHttpRequest etc.

1. HTML/XHTML and CSS:

These technologies are used for displaying content and style. It is mainly used
for presentation.
2. DOM:
It is used for dynamic display and interaction with data.
3. XML or JSON:
For carrying data to and from server. JSON (JavaScript Object Notation) is like
XML but short and faster than XML.
4. XMLHttpRequest
For asynchronous communication between client and server.
5. JavaScript:
It is used to bring above technologies together. Independently, it is used mainly
for client-side validation.
Applications using Ajax

• Google Maps, Gmail, YouTube, twitter and Facebook etc.

Advantages of Ajax
1. Better interactivity:
-Ajax allows easier and quicker interaction between user and website as whole pages are
not reloaded for content to be displayed.
2. 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.
3. Compact:
With Ajax, several multipurpose applications and features can be handled using a single web
page. It just requires a few lines of code.
4. Backed by reputed brands:
Several complex web applications are handled using Ajax, Google Maps is the most
impressive and obvious example.
 Disadvantages of Ajax
1. The back and refresh button are rendered useless:
2. It is built on JavaScript -A percentage of website surfers prefer to turn JavaScript functionality
off on their browser making the Ajax application useless.
3. Browser support: All browsers do not support JavaScript or XMLHttpRequest object
4. Security and User privacy: Not all concerns are addressed. Issues surrounding security and user
privacy need to be considered when developing an Ajax application.
5. Accessibility: Because not all browsers have JavaScript or XMLHttpRequest object support, you
must ensure that you provide a way to make the web application accessible to all users.
6. Bookmark and Navigation: Since, Ajax is used to asynchronously load bits of content into an
existing page, some of the page information may not correspond to a newly loaded page. Browser
history and bookmarks may not have the correct behavior since the URL was unchanged despite
parts of the page being changed.

1. Synchronous (Classic Web Application Model):

• The nature of interaction between the client
and the server is of start-stop-start-stop (i.e.,
click-wait)
• The browser response to the user action by
discarding the current HTML page.
• The request is sent to the web server. When
the server completes the processing of request,
it returns the response page to the Web
browser.
• Browser refreshes the screen and display the
new HTML page. This is called as
synchronous request response model.
• This approach makes lot of technical sense,
but doesn't make for great user experience.
While the server doing its thing, but user is
waiting. And at every step task, the user some
more. In fact, why should the user see the
application go to the server at all?
 Asynchronous (Ajax Web-Application Model):
• The intermediary layer Ajax Engine)
introduced between the user and the Web
server.
• The Web page sends its requests using
JavaScript.
• The request is done asynchronously, meaning
that code execution does not wait for
response.
• The server response comprises of data and not
the presentation.
• The Ajax engine can understand and interpret
the data.
• Most of the page does not change, only parts
of the page that need to change are updated.
• The JavaScript dynamically updates the web
page, without redrawing everything.
• For the Web server nothing has change; it still
responds each request. This way you never
have to wait around.
• The Ajax engine, irrespective of the server,
does asynchronous communication.

XMLHttpRequest

• An object of XMLHttpRequest is used for asynchronous communication between client and

server.
• It can send the HTTP request, and receive responses.

It performs following operations:

1. Sends data from the client in the background

2. Receives the data from the server
3. Updates the webpage without reloading it.
Properties of XMLHttpRequest object

Property Description

onReadyStateChange It is called whenever readystate attribute changes. It must not be used

with synchronous requests.

readyState represents the state of the request. It ranges from 0 to 4.

0 UNOPENED object initialized, open() is not called.

1 OPENED open is called but send() is not called.

2 HEADERS_RECEIVED send() is called, and headers and status are

available.

3 LOADING Downloading data; responseText holds the data.

After the browser has established a communication with the server, but
before the server has completed the response.

4 DONE The operation is completed fully.

reponseText returns response as text.

responseXML returns response as XML

status Returns the status as a number (e.g., 404 for "Not Found" and 200 for
"OK").

statusText Returns the status as a string (e.g., "Not Found" or "OK").

Methods of XMLHttpRequest object

Method Description

void open(method, URL) opens the request specifying get or post

method and url.

void open(method, URL, async) same as above but specifies asynchronous or

not.
True- means that the script processing carries
on after the send () method without waiting for
a response,
False- means that the script waits for a
response before continuing script processing.

void open(method, URL, async, same as above but specifies username and
username, password) password.

void send(string) send request.

setRequestHeader(header,value) it adds request headers.

abort() Cancels the current request,

getAllResponseHeaders () Returns the complete set of HTTP headers

as a string.

getResponseHeader( headerName ) Returns the value of the specified HTTP

header.

Creating the XMLHttpRequest Object

• XMLHttpRequest is implemented in different ways by the browsers

1. In internet Explorer 6.0 And older, XMLHttpRequest is implemented as an ActiveX

control and it can be initiated as follows.

objectvar=new ActiveXObject("Microsoft.XMLHTTP");

2. For the other web browsers, XMLHttpRequest is native object and it can be initiated
as follows.

objectvar =new XMLHttpRequest();

The following code is used to create XMLHttpRequest Object.

<script>
var request;
function demo()
{
if(window.XMLHttpRequest)
{ //code for IE7+Chrome,opera
request=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{ //code for IE6. IE6
request=new ActiveXObject("Microsoft.XMLHTTP");
}
}
</script>

Example: A ajax program to read a text file and print the contents of the file when the user click
on the button.
<html><body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
<script>
function loadDoc() //info.txt file
{ <h1>AJAX</h1>
var xhttp; <p>AJAX is not a programming language.</p>
if(window.XMLHttpRequest) <p>AJAX is a technique for accessing web
{
servers from a web page.</p>
xhttp =new XMLHttpRequest();
} <p>AJAX stands for Asynchronous JavaScript
else if(window.ActiveXObject) And XML.</p>
{
xhttp =new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "info.txt", true);
xhttp.send();
}
</script>
</body></html>
Ajax PHP Framework
• There are various PHP frameworks available, like Ajax Core, cakePHP, Xajax, Sajax, Zephyr to
integrate Ajax with PHP. These frameworks supports Model, View and Controller (MVC)
architecture. They reduces the writing of same code and common function repeatedly.
• The Sajax is an Ajax based framework which generate Ajax-enabled JavaScript from many server-
side languages like PHP, ASP, ColdFusion, Perl, Python and ruby.
• This Sajax bridge execute server-side code and uses Object Remoting technique.
Example: A Ajax program to accept two numbers.
// ajax_add.html file
<html><body>
<script type="text/javascript">
function showadd(n1,n2)
{
var XHRobj;
if(window.XMLHttpRequest)
{
XHRobj= new XMLHttpRequest();
}
else
{
XHRobj=new ActiveXObject("Microsoft.XMLHTTP");
}
XHRobj.onreadystatechange=function()
{
if(XHRobj.readyState==4 && XHRobj.status==200)
{
document.getElementById("myDiv").innerHTML=XHRobj.responseText;
}
}
XHRobj.open("GET","ajaxadd.php?v1="+n1+"&v2="+n2,true);
XHRobj.send();
}
</script><form>
Enter no1 <input type=text name=n1 ><br>
Enter no2 <input type=text name=n2 ><br>
<input type =button value=Addition onclick="showadd(form.n1.value,form.n2.value)">
</form>
<div id="myDiv"></div>
</body></html>
// ajaxadd.php file
<?php
$n1=$_GET['v1'];
$n2=$_GET['v2'];
$c=$n1+$n2;
echo"Addition of two numbers is:$c";
?>

Example: AAjax program to search book.

// booksearch.html file
<html>
<head>
<script type="text/javascript">
function showdet(str)
{
var XHRobj;
if(window.XMLHttpRequest)
{
XHRobj= new XMLHttpRequest();
}
else
{
XHRobj=new ActiveXObject("Microsoft.XMLHTTP");
}
XHRobj.onreadystatechange=function()
{
if(XHRobj.readyState==4 && XHRobj.status==200)
{
document.getElementById("myDiv").innerHTML=XHRobj.responseText;
}
}
XHRobj.open("GET","booksearch.php?q="+str,true);
XHRobj.send();
}
</script></head><body><form>
enter book Name<input type =text name="n1" id=n1 onKeyUp="showdet(form.n1.value)">
</form>
<div id="myDiv">suggestions</div>
</body>
</html>
// booksearch.php
<?php
$m="";
$a=array("php","java","tcs","jsp","dotnet","perl");
$q=$_GET['q'];
if(strlen($q)>0)
{
for($i=0;$i<count($a);$i++)
{
if(strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($m=="")
{
$m=$a[$i];
}
else
{
$m=$m.",".$a[$i];
}
}
}
if($m=="")
{
echo"no books";

}
else echo $m;
}
?>
Handling XML Data Using PHP and AJAX
Example: Create an AJAX program to fetch information from an XML File.
==========================================================================
//BOOK.html
<html><head>
<script type="text/javascript">
function showTECH(str)
{
if(str=="")
{
document.getElementById("myDiv").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{
XHRobj= new XMLHttpRequest();
}
else
{
XHRobj=new ActiveXObject("Microsoft.XMLHTTP");
}
XHRobj.onreadystatechange=function()
{
if(XHRobj.readyState==4 && XHRobj.status==200)
{
document.getElementById("myDiv").innerHTML=XHRobj.responseText;
}
}
XHRobj.open("GET","book.php?q="+str,true);
XHRobj.send();
}
</script></head><body><form>
select a TECH:
<select name="TECH" onchange="showTECH(this.value)">
<option value="">Select a TECH:</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="TCS">TCS</option>
<option value="N/W">N/W</option>
<option value="ASP">ASP</option>
</select></form>
<div id="myDiv"><b>Book info will be listed here..</b></div>
</body></html>
 //book.XML FILE
<?xml version="1.0"?>
<BOOKINFO>

<BOOK ID="L001">
<BNAME>PHP</BNAME>
<AUTHOR>NIRALIr</AUTHOR>
<YEAR>2015 </YEAR>
<PRICE>300</PRICE>
</BOOK>
<BOOK ID="L002">
<BNAME>N/W</BNAME>
<AUTHOR>NIRALIr</AUTHOR>
<YEAR>2015 </YEAR>
<PRICE>300</PRICE>
</BOOK>
<BOOK ID="L003">
<BNAME>JAVA</BNAME>
<AUTHOR>TECH-MAX</AUTHOR>
<YEAR>2015 </YEAR>
<PRICE>350</PRICE>
</BOOK>
<BOOK ID="L004">
<BNAME>TCS</BNAME>
<AUTHOR>VISION</AUTHOR>
<YEAR>2014 </YEAR>
<PRICE>400</PRICE>
</BOOK>
</BOOKINFO>

//PHP FILE // save file with book.php

<?php
$q= $_GET["q"];
$xml=simplexml_load_file("BOOK.xml")or die("cannot Load");
foreach ($xml->BOOK as $a)
{
IF($a->BNAME==$q)
{
echo "Book Id:".$a['ID'];
echo "<br>Book Name:".$a->BNAME;
echo "<br>Author".$a->AUTHOR;
echo "<br>Year".$a->YEAR;
echo "<br> Price".$a->PRICE;
}
}
?>
 Connecting Database using PHP and AJAX
Create a web application to acess database using AJAX
// actot.html

<html>
<head>
<script type="text/javascript">
function showdet(str)
{
if(str=="")
{
document.getElementById("myDiv").innerHTML="";
return;
}
if(window.XMLHttpRequest)
{
XHRobj= new XMLHttpRequest();
}
else
{
XHRobj=new ActiveXObject("Microsoft.XMLHTTP");
}
XHRobj.onreadystatechange=function()
{
if(XHRobj.readyState==4 && XHRobj.status==200)
{
document.getElementById("myDiv").innerHTML=XHRobj.responseText;
}
}
XHRobj.open("GET","actor.php?q="+str,true);
XHRobj.send();
}
</script></head><body><form>
enter Actor Name<input type =text name=n1>:
<br><input type =button value=getinfo onclick="showdet(form.n1.value)">
</form>
<div id="myDiv"><b>Movie Details will be listed here..</b></div>
</body>
</html>
 // actor.php file

<?php
$q=$_GET["q"];
echo"Actor Name:$q<br>";
$c=pg_connect("host=localhost port=5432 dbname=demo user=postgres password=ssracs");
$sql="select movie.mno,mname,myear from movie,actor where movie.mno=actor.mno and
aname='".$q."'";
$result=pg_query($c,$sql);
echo"<table border='1'><tr><th>mno</th><th>mname</th><th>year</th></tr>";
while($r=pg_fetch_row($result))
{
echo "<tr>";
foreach( $r as $v)
{
echo "<td>$v</td>";
}
echo "</tr>";
}
echo"</table>";
?>