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

AJAXJavaScriptScripting Languages

Avatar of undefined
Last Comment
JMRFan4Life

8/22/2022 - Mon
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

Bardobrave

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.
Badotz

It never reaches 4 because:
if(xhr.readyState < 4) {

Open in new window

says if it is LESS THAN 4.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
JMRFan4Life

ASKER
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.
Badotz

>>I figured out my issue,

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

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
JMRFan4Life

ASKER
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.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.