Hi,
I am new to Ajax and I am currently learning Ajax using a textbook by matthew eernisse from sitepoint.com. I am in the first chapter just trying to grasp the basics of Ajax.

I am encountering a problem with the code of some ajax code I am working with from the textbook. First, I created an Ajax class in a javascript file called ajax1.js (below is what the code looks like):

Ajax1.js
// JavaScript Document
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 ActiveObject('Microsoft.XMLHTTP');
					}
					catch (e) {
						//Could not create an XMLHttpRequest object.
						return false;
					}
				}
			}
		}
		return this.req;
	};
	this.setMimeType = function(mimeType) {
      this.mimeType = mimeType;
    };
	//event handler for sending request
	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) {
				// Do stuff to handle response
				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.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 browsers '
				  + 'pop-up blocker.\n'
				  + 'Please allow pop-up from this web site if you want to '
				  + 'see the full error messages.\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();
	};
			
	
}

After creating this file, I created a php file called ajaxtes.php. Below is its code:

ajaxtest.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Test</title>
<script src="ajax1.js" type="text/javascript"> </script>
<script type="text/javascript">

      var hand = function(str) {
        alert(str);
      }
      var ajax = new Ajax();
      ajax.doGet('http://localhost/a-jax/faskeserver.php', hand);
</script>
</head>

<body>
</body>
</html>

if you look at the code carefully you will see that this ajaxtest page is trying to get some response from the faskeserver.php page and so i created a page called faskeserver.php and this is what its code looks like:

faskeserver.php
<title>Fake Server</title>
<?php
header('Content-Type: text/plain');
sleep(rand(3, 12));
print 'ok';
?>

Now according to the textbook, when I load the ajaxtest.php file on my webserver, I will get a delay between 3-12 seconds as seen in the faskeserver.php page before i'll see a standard javascript alert saying ok. But anytime, i load the ajaxtest.php page, beneath the browser, i see that the page load's but with error on the page and so the ajax test doesn't work. I have checked the three pages i created and i dont know were the error lies.

I am also kind of wondering how the ajaxtest.php page will just display ok without nothing to trigger the javascript code in the <head> tag.

I would like someone to take a look at the codes I am up to see where the error lies because right now i really cant proceed with the textbook without knowing the solution of this basic ajax. I would also like an explanation of how ajax works in this pages.

This article has been dead for over six months. Start a new discussion instead.