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.
