Ajax chap 4

Chap 4. Ajax in Depth 1

4. Ajax in Depth
1. Write the Ajax code to illustrate how JavaScript code can be returned from the server by a PHP
script.
A PHP script can be used to send a JavaScript back from the server to the client browser. In the client
browser, this JavaScript can be evaluated by using the eval() function of JavaScript.

The PHP file JAVASCRIPT.PHP is as follows:
<?php
echo 'myalert()';
?>

The HTML file JAVASCRIPT.HTML is as follows:
<html>
<head>
<title>Returning JavaScript</title>
<script language = "javascript">
var xhr = false;

if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

function getData(dataSource)
{
if(xhr)
{
xhr.open("GET", dataSource);

xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
eval(xhr.responseText);
}
}

xhr.send(null);
}
}

function myalert()
{
var targetDiv = document.getElementById("targetDiv");

targetDiv.innerHTML = "Got the JavaScript OK.";
}
</script>
</head>

mukeshtekwani@hotmail.com Prof. Mukesh N. Tekwani

2 Ajax in Depth

<body>
<H1>Returning JavaScript</H1>

<form>
<input type = "button" value = "Fetch JavaScript"
onclick = "getData('javascript.php')">
</form>

<div id="targetDiv">
<p>The fetched data will go here.</p>
</div>
</body>
</html>

2. Write the Ajax code to illustrate how to return a JavaScript object from the server.
<html>
<head>
<title>Converting text to a JavaScript object</title>
<script>
var text = "{method: 'adder', operand1: 2, operand2: 3};";
var jSObject;

eval('jSObject = '+ text);

eval(jSObject.method + '(' + jSObject.operand1 + ',' +
jSObject.operand2 + ');');
function adder(op1, op2)
{
var sum = op1 + op2;
alert(op1 + " + " + op2 + " = " + sum);
}
</script>
</head>

<body>
<h1>Converting text to a JavaScript object</h1>
</body>
</html>

3. Write Ajax code to get the following header information from the server: data about the server,
current date and time on server, date of last modification of a file type of document being
accessed.
To get the header information, we use the HEAD method with the XMLHttpRequest object open().
This is instead of the GET method.

The data transferred from the server are the values of the Http headers returned by the server when an
Ajax script it tries to read a file on the server. If we send a GET request, we get the text file back from
the server. But if we send HEAD, we get data about the file or metadata.

Why is header information important? We can se the information in HTTP header before we try to
download the resource from the server. The HTTP header will contain information about resource size,
type, last-modified date, etc. This allows us to decide whether to download a resource. Also if the user
tries to download a resource that does not exist, we can inform the user.

Prof. Mukesh N Tekwani mukeshtekwani@hotmail.com


File HEAD.HTML

<html>
<head>
<title>Getting header information</title>
var xhr = false;
{
}
{
}

function getData(dataSource, divID)
{
if(xhr)
{
var obj = document.getElementById(divID);
xhr.open("HEAD", dataSource); //observe that we have used
// HEAD instead of GET.

{
{
obj.innerHTML = xhr.getAllResponseHeaders();
}
}
xhr.send(null);
}
}
</script>
</head>

<body>
<H1>Getting header information</H1>
<form>
<input type = "button" value = "Display Message"
onclick = "getData('data.txt', 'targetDiv')">
</form>

</div>
</body>
</html>

The output of this, on my computer, was:

Server: Microsoft-IIS/5.1 X-Powered-By: ASP.NET Date: Tue, 09 Nov 2010 17:54:30 GMT
Content-Type: text/plain Accept-Ranges: bytes Last-Modified: Thu, 04 Nov 2010 08:15:17
GMT Etag: "f27876af87bcb1:b44" Content-Length: 43


4 Ajax in Depth

4. Modify the above program to obtain only the last modified date from the Http header.
Instead of using getAllResponseHeaders method, we will use the getResponseHeader
method to get only data for specific header, like this:

File : DATE.HTML

<html>
<head>
<title>Getting date information</title>
var xhr = false;

{
}
{
}

function getData(dataSource, divID)
{
if(xhr)
{
var obj = document.getElementById(divID);
xhr.open("HEAD", dataSource);

{
{
obj.innerHTML = "data.txt was last modified on
" + xhr.getResponseHeader("Last-Modified");
}
}
xhr.send(null);
}
}
</script>
</head>

<body>
<H1>Getting date information</H1>
<form>
<input type = "button" value = "Display Date" onclick =
"getData('data.txt', 'targetDiv')">
</form>

</div>
</body>
</html>



5. Modify the above program so that it displays the following parts of a date: date, month, year,
hours, minutes, seconds.
The modified part is shown below:

{
var date = new Date(xhr.getResponseHeader("Last-Modified"));
var details;
details = "Date: " + date.getDate() + '<br>';
details = details + "Month: " + date.getMonth() + '<br>';
details = details + "Year: " + date.getFullYear() + '<br>';
details = details + "Hours: " + date.getHours() + '<br>';
details = details + "Minutes: " + date.getMinutes() + '<br>';
details = details + "Seconds: " + date.getSeconds() + '<br>';
obj.innerHTML = details
}

6. Write Ajax code to check whether a URL exisis.
<html>
<head>
<title>Returning JavaScript</title>
var xhr = false;
{
}
{
}
function getData(dataSource, divId)
{
if(xhr)
{
var obj = document.getElementById(divId);
xhr.open("HEAD", dataSource);
{
{
obj.innerHTML = "URL exists";
}
else
{
obj.innerHTML = "URL does not exist";
}
}
xhr.send(null);
}
}
</script>
</head>


6 Ajax in Depth

<body>
<H1>Returning JavaScript</H1>
<form>
<input type = "button" value = "Fetch JavaScript"
onclick = "getData('data22.txt', 'targetDiv')">
</form>

</div>
</body>
</html>


Ajax chap 4

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (12)

Similar to Ajax chap 4

Similar to Ajax chap 4 (20)

More from Mukesh Tekwani

More from Mukesh Tekwani (20)

Recently uploaded

Recently uploaded (20)

Ajax chap 4