<HTML>
<HEAD>
<TITLE>Ajax Joke of the Day Application</TITLE>
<script language = "javascript" type = "text/javascript">
var Request = false;
if (window.XMLHttpRequest) {
Request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
Request = new ActiveXObject("Microsoft.XMLHTTP");
}
function retrieveJoke(url, elementID) {
if(Request) {
var RequestObj = document.getElementById(elementID);
Request.open("GET", url, true);
Request.onreadystatechange = function()
{
if (Request.readyState == 4 && Request.status == 200) {
RequestObj.innerHTML = Request.responseText;
}
}
Request.send(null);
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Where do bees go when they get married?</H1>
<FORM>
<INPUT type = "button" value = "Fetch Answer"
onclick = "retrieveJoke('joke.txt', 'DivTarget')">
</FORM>
<DIV id="DivTarget"> </DIV>
</BODY>
</HTML>
This file is located in the same folder with the following file named joke.txt:
Where do bees go after marriage? Honeymoon.
When the button on the HTML file is clicked after it is loaded into the browser, the joke in the txt file is supposed to appear just below the button without any page refresh. But nothing is happening really, either in Firefox or in IE. The page remains as it is. Can somebody tell me what is wrong?
This post has been edited by cupidvogel: 06 June 2011 - 02:19 AM

New Topic/Question
Reply



MultiQuote




|