[SOLVED] new at this please help

meomike2000 · June 1, 2009

please help, i am trying to get an understanding for ajax and js......

i found a site http://www.sitepoint.com/article/build-your-own-ajax-web-apps/3/ and a book with the same examples in it...

maybe it is just me but i cant seem to get this part to work right.......

the first example worked fine....

here is what i got.

appmonitor2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type"
		content="text/html; charset=iso-8859-1" />
	<title>App Monitor</title>
	<script type="text/javascript" src="ajax.js"></script>
	<script type="text/javascript">
		// URL to monitor
		var TARGET_URL = 'fakeserver.php';
		// Seconds between request
		var POLL_INTERVAL = 5;
		// How many entities bars to show in the bar graph
		var MAX_POLL_ENTRIES = 10;
		// Seconds to wait for server response
		var TIMEOUT_THRESHOLD = 10;
	</script>
	<script type="text/javascript" src="appmonitor2.js"></script>

	<link rel="stylesheet" href="appmonitor2.css" type="text/css" />		
</head>
<body>
	<div id="statusMessage">App Status:
		<span id="currentAppState"></span>
	</div>
	<div id="buttonArea"></div>
</body>
</html>

ajax.js (was required in the first example as well and it works.)

function Ajax() {
this.req = null;
this.url = null;
this.method = 'GET';
this.async = true;
this.status = null;
this.statusText = '';
this.postData = null;
this.readyState = null;
this.responseText = null;
this.responseXML = null;
this.handleResp = null;
this.responseFormat = 'text', // 'text', 'xml', or 'object'
this.mimeType = null;

this.init = function() {
	if (!this.req) {
		try {
			//Try to create object for Firefox, Safari, IE7, etc.
			this.req = new XMLHttpRequest();
		}
		catch (e) {
			try {
				// Try to create object for later versions of IE.
				this.req = new ActiveXObject('MSXML2.XMLHTTP');
			}
			catch (e) {
				try {
					//Try to create object for early versions of IE.
					this.req = new AxtiveXObject('Microsoft.XMLHTTP');
				}
				catch (e) {
					//could not create an xmlhttprequest object.
					return false;
				}
			}
		}
	}
	return this.req;
};

this.doReq = function() {
	if (!this.init()) {
		alert('could not create XMLHttpRequest object.');
		return;
	}
	this.req.open(this.method, this.url, this.async);
	if (this.mimeType) {
		try {
			req.overrideMimeType(this.mimeType);
		}
		catch (e) {
			// couldn't override MIME type -- IE6 or Opera?
		}
	}
	var self = this; // Fix loss-of-scope in inner function
	this.req.onreadystatechange = function() {
		var resp = null;
		if (self.req.readyState == 4) {
			switch (self.responseFormat) {
				case 'text':
					resp = self.req.responseText;
					break;
				case 'xml':
					resp = self.req.responseXML;
					break;
				case 'object':
					resp = req;
					break;
			}
			if (self.req.status >= 200 && self.req.status <= 299) {
				self.handleResp(resp);
			}
			else{
				self.handleErr(resp);
			}
		}
	};
	this.req.send(this.postData);
};

this.setMimeType = function(mimeType) {
	this.mimeType = mimeType;
};

this.handleErr = function() {
	var errorWin;
	try {
		errorWin = window.open('', 'errorWin');
		errorWin.document.body.innerHTML = this.responseText;
	}
	catch (e) {
		alert('An error occurred, but the error message cannot be '
		+ 'displayed. This is probably because of your browser\'s '
		+ 'pop-up blocker.\n'
		+ 'Please allow pop-ups from this web site if you want to '
		+ 'see the full error message.\n'
		+ '\n'
		+ 'Status Code: ' + this.req.status + '\n'
		+ 'Status Description: ' + this.req.statusText);
	}
};

this.abort = function() {
	if (this.req) {
		this.req.onreadystatechange = function() { };
		this.req.abort();
		this.req = null;
	}
};

this.doGet = function(url, hand, format) {
	this.url = url;
	this.handleResp = hand;
	this.responseFormat = format || 'text';
	this.doReq();
};

}

fakeserver.php

<?php
header('Content-Type: text/plain');
sleep(rand(1, 5));
print 'ok';
?>

and appmonitor2.js

var Status = new function() {
this.init = function() {
	// dont mind me, just a sub ...
};
this.startProc = function() {
	// another stub function
};
}

var Monitor = new function() {
this.targetURL = null;
this.pollInterval = null;
this.maxPollEntries = null;
this.timeoutThreshold = null;
this.ajax = new Ajax();
this.start = 0;
this.pollArray = [];
this.pollHand = null;
this.timeoutHand = null;
this.reqStatus = Status;

this.init = function() {
	var self = Monitor;
	self.targetURL = TARGET_URL;
	self.pollInterval = POLL_INTERVAL;
	self.maxPollEntries = MAX_POLL_ENTRIES;
	self.timeoutThreshold = TIMEOUT_THRESHOLD;
	self.toggleAppStatus(true);
	self.reqStatus.init();
};

window.onload = Monitor.init;

this.toggleAppStatus = function(stopped) {
	var self = Monitor;
	self.toggleButton(stopped);
	self.toggleStatusMessage(stopped);
};

this.toggleButton = function(stopped) {
	var self = Monitor;
	var buttonDiv = document.getElementById('buttonArea');
	var but = document.createElement('input');
	but.type = 'button';
	but.className = 'inputButton';
	if (stopped) {
		but.value = 'Start';
		but.onclick = self.pollServerStart;
	}
	else {
		but.value = 'Stop';
		but.onclick = self.pollServerStop;
	}
	if (buttonDiv.firstChild) {
		buttonDiv.removeChild(buttonDiv.firstChild);
	}
	buttonDiv.appendChild(but);
	buttonDiv = null;
};

this.toggleStatusMessage = function(stopped) {
	var statSpan = document.getElementById('currentAppState');
	var msg;
	if (stopped) {
		msg = 'Stopped';
	}
	else {
		msg = 'Running';
	}
	if (statSpan.firstChild) {
		statSpan.removeChild(statSpan.firstChild);
	}
	statSpan.appendChild(document.createTextNode(msg));
};

this.pollServerStart = function() {
	var self = Monitor;
	self.doPoll();
	self.toggleAppStatus(false);
};
this.pollServerStop = function() {
	alert('This will stop the application polling the server.');
};

this.doPoll = function() {
	var self = Monitor;
	var url = self.targetURL;
	var start = new Date();
	self.reqStatus.startProc();
	self.start = start.getTime();
	self.ajax.doGet(self.tartgetURL + '?start=' + self.start, self.showPoll);
	self.timeoutHand = setTimeout(self.handleTimeout, self.timeoutThreshold * 1000);
};

this.showPoll = function(str) {
	var self = Monitor;
	var diff = 0;
	var end = new Date();
	clearTimeout(self.timeoutHand);
	self.reqStatus.stopProc(true);
	if (str == 'ok') {
		end = end.getTime();
		diff = (end - self.start) / 1000;
	}
	if (self.updatePollArray(diff)) {
		self.printResult();
	}
	self.doPollDelay();
};

this.doPollDelay = function() {
	var self = Monitor;
	self.pollHand = setTimeout(self.doPoll, self.pollInterval * 1000);
};

this.handleTimeout = function() {
	alert("Timeout!");
};

this.updatePollArray = function(responseTime) {
	alert("Recording response time: " + responseTime);
};

this.printResult = function() {
	//empty stub function
};
}

at this point I should be able to load the page and see the example figure 3.2.

but all I see is the

App Status:

can anybody help...

meomike2000 · June 2, 2009

i have figured out the problem

it was with the file appmonitor2.js

here is the new one for comparison

notice the moved

window.onload = Monitor.init;

var Status = new function() {
this.init = function() {
	// dont mind me, just a sub ...
};
this.startProc = function() {
	// another stub function
};
}

var Monitor = new function() {
this.targetURL = null;
this.pollInterval = null;
this.maxPollEntries = null;
this.timeoutThreshold = null;
this.ajax = new Ajax();
this.start = 0;
this.pollArray = [];
this.pollHand = null;
this.timeoutHand = null;
this.reqStatus = Status;

this.init = function() {
	var self = Monitor;
	self.targetURL = TARGET_URL;
	self.pollInterval = POLL_INTERVAL;
	self.maxPollEntries = MAX_POLL_ENTRIES;
	self.timeoutThreshold = TIMEOUT_THRESHOLD;
	self.toggleAppStatus(true);
	self.reqStatus.init();
};





this.toggleAppStatus = function(stopped) {
	var self = Monitor;
	self.toggleButton(stopped);
	self.toggleStatusMessage(stopped);
};

this.toggleButton = function(stopped) {
	var self = Monitor;
	var buttonDiv = document.getElementById('buttonArea');
	var but = document.createElement('input');
	but.type = 'button';
	but.className = 'inputButton';
	if (stopped) {
		but.value = 'Start';
		but.onclick = self.pollServerStart;
	}
	else {
		but.value = 'Stop';
		but.onclick = self.pollServerStop;
	}
	if (buttonDiv.firstChild) {
		buttonDiv.removeChild(buttonDiv.firstChild);
	}
	buttonDiv.appendChild(but);
	buttonDiv = null;
};

this.toggleStatusMessage = function(stopped) {
	var statSpan = document.getElementById('currentAppState');
	var msg;
	if (stopped) {
		msg = 'Stopped';
	}
	else {
		msg = 'Running';
	}
	if (statSpan.firstChild) {
		statSpan.removeChild(statSpan.firstChild);
	}
	statSpan.appendChild(document.createTextNode(msg));
};

this.pollServerStart = function() {
	var self = Monitor;
	self.doPoll();
	self.toggleAppStatus(false);
};
this.pollServerStop = function() {
	alert('This will stop the application polling the server.');
};

this.doPoll = function() {
	var self = Monitor;
	var url = self.targetURL;
	var start = new Date();
	self.reqStatus.startProc();
	self.start = start.getTime();
	self.ajax.doGet(self.tartgetURL + '?start=' + self.start, self.showPoll);
	self.timeoutHand = setTimeout(self.handleTimeout, self.timeoutThreshold * 1000);
};

this.showPoll = function(str) {
	var self = Monitor;
	var diff = 0;
	var end = new Date();
	clearTimeout(self.timeoutHand);
	self.reqStatus.stopProc(true);
	if (str == 'ok') {
		end = end.getTime();
		diff = (end - self.start) / 1000;
	}
	if (self.updatePollArray(diff)) {
		self.printResult();
	}
	self.doPollDelay();
};

this.doPollDelay = function() {
	var self = Monitor;
	self.pollHand = setTimeout(self.doPoll, self.pollInterval * 1000);
};

this.handleTimeout = function() {
	alert("Timeout!");
};

this.updatePollArray = function(responseTime) {
	alert("Recording response time: " + responseTime);
};

this.printResult = function() {
	//empty stub function
};
}

window.onload = Monitor.init;

Sign In

[SOLVED] new at this please help

Recommended Posts

meomike2000

Link to comment

Share on other sites

meomike2000

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information