Link to home
Start Free TrialLog in
Avatar of JMRFan4Life
JMRFan4Life

asked on

Sample Ajax request

hey all,

i am trying to write a plain javascript example that makes a simple ajax request and i cannot get it to work. Not sure what I am missing, the Jquery method works.

I have created a folder with this code below in an html file and a plain text file called test.txt

Thanks
<!DOCTYPE html>  
<html>  
<head>
<title>Ajax test</title> 
 
</head>  
<body>

<div id="container">fail blog</div>
<script type="text/javascript">

		var xhr;
		
		xhr = new XMLHttpRequest();

		xhr.onreadystatechange = ensureReadiness;

		function ensureReadiness() {
			if(xhr.readyState < 4) {
				return;
			}

			if(xhr.status !== 200) {
				return;
			}

			// all is well
			alert('wtf');
			console.log(xhr.responseText);
			
		}

		xhr.open('GET', 'test.txt', true);
		xhr.send('');
		
		//jquery method
		//$('#container').load('test.txt');
</script>
</body>
</html>

Open in new window

Avatar of JMRFan4Life
JMRFan4Life

ASKER

after some adjustments and cleanup i have this. i can log the ready state and state 3 displays the resposneText, however i never hit 4.

<!DOCTYPE html>  
<html>  
<head>
<title>Ajax test</title> 
 
</head>  
<body>

<div id="container">fail blog</div>
<script type="text/javascript">


var ajaxLoadTest = {

	LoadTextFile : function(url, callback){
		var xhr;
		
		xhr = new XMLHttpRequest();

		xhr.onreadystatechange = ensureReadiness;

		function ensureReadiness() {
			if(xhr.readyState < 4) {
				console.log(xhr.responseText + 'readyState =' + xhr.readyState );
				
				return;
			}

			if(xhr.status === 200) {
				console.log('great failure' + xhr.responseText);
				return;
			}
			
			if(xhr.status === 4) {
				console.log('great success' + xhr.responseText);
				callback(xhr);
			}
			
		}

		xhr.open('GET', url, true);
		xhr.send('');
		
		//jquery method
		//$('#container').load('test.txt');

	}
};


ajaxLoadTest.LoadTextFile('test.txt', function(xhr){console.log(xhr.responseText)});

</script>
</body>
</html>

Open in new window

I don't know what you are seeking to achieve accessing a .txt file through an AJAX call.

First thing I'd check on a problem of this type is that my url is being fully understood by the browser. Keep in mind that test.txt is not exactly a url, and if your browser correctly states that it's a file it will seek that file on a path that probably is not the place where your .html file is.

Try using a url with full path to the file.
It never reaches 4 because:
if(xhr.readyState < 4) {

Open in new window

says if it is LESS THAN 4.
I figured out my issue,
I was testing if status was 4 instead of readystate.

This is just an Ajax example to learn the native Javascript Ajax process which will then provide a better foundation for using other Javascript libraries.
>>I figured out my issue,

Odd, because I thought I pointed out the problem?
ASKER CERTIFIED SOLUTION
Avatar of experts1
experts1

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I never said your were incorrect, but I had an issue with my test condition that was further down in the code. Originally I was logging the readyState to test progression. I left that our is the posted code. Both ways solve the issue.