Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
QuakeLive

Testing Ajax

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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;

  • Upvote 1

Share this post


Link to post
Share on other sites

Ok ,I just added a missing single quotation mark.

 

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

 

f52l2c.jpg

 

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. :unsure:

Share this post


Link to post
Share on other sites

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.

  • Upvote 2

Share this post


Link to post
Share on other sites

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.

2s66nw8.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

  • Upvote 2

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...