Testing Ajax

[QuakeLive]

Hi,

 

I can not figure out why the first example does not work. Also, I downloaded and tested code from this site - and it does not work...

 

This example starts on page 433:

 

 

To test the information covered so far, this next example will simply request a resource and write the received response to the page (Figure 11.1). The relevant HTML is: fiGURe 11 1 The content shown below the button will be retrieved from another file via Ajax.

 

<div><button type=”button” id=”btn”>Run the test</button><br>
<p id=”output”></p></div>

 

I would put this in a file named test.html, which would include both the ajax. js script (the contents of which were just shown) and then test.js, to be written in the following steps. You’ll also need to create a plain text file named test.txt, and you can place any amount of HTML or text in it. Store this text file in a resources directory, to keep it separate from the other files

 

Here is my ajax.js:

function getXMLHttpRequestObject() {
	var ajax = null;
	if (window.XMLHttpRequest) {
		ajax = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
	}
	return ajax;
}

Here is my test.js:

window.onload = function() {
	'use strict';
	var ajax = getXMLHttpRequestObject();
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) {
			if ((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304)) {
				document.getElementById('output').innerHTML = ajax.responseText;
			} else {
				document.getElementById('output').innerHTML = 'Error: + ajax.statusText;
			}
		}
	};
	document.getElementById('btn').onclick = function() {
		ajax.open('GET', 'resources/test.txt', true);
		ajax.send(null);
	};
};

Also, there is some text file in resources/test.txt...

 

And it does not work (tested on Firefox, Opera, IE, Chrome). The same is with code downloaded form this site - when I click on button - nothing happens.

 

Do you know what could be the problem?

 

Thanks in advance!

[HartleySan]

Do any errors show up in your console?

What about the network panel? What info shows up there for the Ajax request?

[Edward]

If there is bit of javascript syntax wrong the whole thing won't work, i see a missing single quotation mark missing at this point

 

document.getElementById('output').innerHTML = 'Error: + ajax.statusText;

 

so it should be

 

document.getElementById('output').innerHTML = 'Error:' + ajax.statusText;

[QuakeLive]

Ok ,I just added a missing single quotation mark.

 

Here is how it looks now after clicking on the button:

 

 

What about the network panel? What info shows up there for the Ajax request?

I did not understand this, I think that I have never used network panel that you are mentioning here.

[HartleySan]

Chrome (my personal preference) and other browsers have a network panel that allows you to view all outgoing requests and responses. In Chrome, the network panel is within the dev tools. If you don't know how to use the Chrome dev tools, please Google it. They are essential for any serious front-end work.

 

Once you're in the network panel, make the Ajax request, and you'll see it logged with all of the details.

Please let us know if you see any errors in there. Also, check the console in the dev tools, and let us know if there are any JS syntax errors in there.

 

Thanks.

[QuakeLive]

Chrome (my personal preference) and other browsers have a network panel that allows you to view all outgoing requests and responses. In Chrome, the network panel is within the dev tools. If you don't know how to use the Chrome dev tools, please Google it. They are essential for any serious front-end work.

 

Once you're in the network panel, make the Ajax request, and you'll see it logged with all of the details.

Please let us know if you see any errors in there. Also, check the console in the dev tools, and let us know if there are any JS syntax errors in there.

 

Thanks.

[HartleySan]

Weird. I didn't see those images before. I see them now though. Sorry.

Your FF console is saying that there is an error in the text file.

[QuakeLive]

I tested with different .txt. files and it's always the same error. Also, Chrome is saying something else (the picture above in my previous post), but I don't understand it because .js code looks fine... ?

 

test.html:

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Testing Ajax</title>
		<link rel="stylesheet" href="css/clean.css">
	</head>
	<body>
		<h1>Ajax Test</h1>
		<div><button type="button" id="btn">Run the test</button><br>
			<p id="output"></p>
		</div>
		<script src="js/ajax.js"></script>
		<script src="js/test.js"></script>
	</body>
</html>

js/ajax.js:

function getXMLHttpRequestObject() {
	var ajax = null;
	if (window.XMLHttpRequest) {
		ajax = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
	}
	return ajax;
}

js/test.js:

window.onload = function() {
	'use strict';
	var ajax = getXMLHttpRequestObject();
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4) {
			if ((ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304)) {
				document.getElementById('output').innerHTML = ajax.responseText;
			} else {
				document.getElementById('output').innerHTML = 'Error:' + ajax.statusText;
			}
		}
	};
	document.getElementById('btn').onclick = function() {
		ajax.open('GET', 'resources/test.txt', true);
		ajax.send(null);
	};
};
	

... and there is a text file: resources/test.txt

[HartleySan]

I tested your code, and it works fine.

I think the big issue though is that you're trying to Ajax-request a file using the file:// protocol. In other words, you're not running the request through a server.

 

Try starting up XAMPP, or whatever web server you use, and run the script through that. You should be fine.

[QuakeLive]

I tested your code, and it works fine.

I think the big issue though is that you're trying to Ajax-request a file using the file:// protocol. In other words, you're not running the request through a server.

 

Try starting up XAMPP, or whatever web server you use, and run the script through that. You should be fine.

Sorry, that was a problem. I was thinking that XAMPP (apache) was needed only for server side scripts such as PHP, but now I see that it must be used because of HTTP protocol. Sorry again.

 

Thanks!