Ajax/Java project
For this project you will modify a small AJAX script to add some additional capabilities. Ultimately, your project will consist of 5 files:
- proj7.html (the main project page)
- proj7.js (your JavaScript)
- message1.txt
- message2.txt
- message3.txt
The model you will use is the Ajax Demo Program. Using that program as a foundation, do the following:
- Modify the message files so that your name will display somewhere in the message.
- Modify proj7.html so that the script is removed to a separate file (proj7.js)
- Modify the html file so that 3 additional buttons are placed on a line below the current buttons. These buttons will be labeled RED, BLUE, and BLACK.
- Modify the proj7.js script so that a single function is added to change the color of the text in the message. The buttons themselves should pass the desired color to the function when calling it, i.e. the function should handle any color passed to it.
The project should work like a sample that will be shown to you in class. The change must be done using this method and NOT by refreshing the entire page.
This is the code that will be adjusted:
ajax.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html >
<head>
<script type=”text/javascript”>
function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
xmlhttp.open(“GET”,url,false);
xmlhttp.send(null);
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
xmlhttp.open(“GET”,url,false);
// Do not send null for ActiveX
xmlhttp.send();
}
document.getElementById(‘test’).innerHTML=xmlhttp.responseText;
}
</script>
<title>MIS 4530 Ajax Sample</title>
</head>
<body>
<div id=”test”>
<h2>Let AJAX change this text</h2>
</div>
<button type=”button” onclick=”loadXMLDoc(‘test1.txt’)”>Message 1</button>
<button type=”button” onclick=”loadXMLDoc(‘test2.txt’)”>Message 2</button>
<button type=”button” onclick=”loadXMLDoc(‘test3.txt’)”>Original</button>
</body>
</html>
test1.txt
<p>There are several reasons you might want to use AJAX:</p>
<ul>
<li>Reduce the amount of data flowing from the server to the client</li>
<li>Speed up the web page</li>
<li>Make the application act more like a local app than a web page</li>
<li>Allow filtering at the client end to prevent corrupted data from being
sent to the server</li>
</ul>
test2.txt
<p>Most good web developers have many things in their toolboxes, including JavaScript, php, mysql, xml, and html. These tools all lead to robust, interactive web pages and add to the capability of the developer to to design flexible, artistic, and useful web pages.</p>
test3.txt
<h2>Let AJAX change this text</h2>
This will show what the above code will look like:
http://www.eiu-mis.net/samples/ajax/ajax.html
All that really needs to be done is to add a RED, BLUE, and BLACK button horizontally under the message buttons and when those buttons are clicked it will change the color of the message shown regardless of which message is clicked.
"You need a similar assignment done from scratch? Our qualified writers will help you with a guaranteed AI-free & plagiarism-free A+ quality paper, Confidentiality, Timely delivery & Livechat/phone Support.
Discount Code: CIPD30
Click ORDER NOW..


