What is wrong with my simple AJAX example. Does you website have to be on a server?

Question

I'm not sure what is wrong all my files are in the same folder. First I will post HTML, then AJAX, and finally the .txt file.

HTML:

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Title of webpage</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="javascript.js"></script>
</head>
<body>
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button onclick="loadXMLDoc()">Change Content</button>

</body>
</html>

And my javascript/AJAX:

function loadXMLDoc(){
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "test.txt", true);
xmlhttp.send();
}

And my .txt file:

<h3>This text was changed</h3>
<p>And also I added a random paragraph</p>

Thankyou in advance for the help.

Are you doing it this way because you're just learning???? Cuz theres much easier ways to do this.... — Kylie, Jun 22 '13 at 21:16
What happens? Do you get any errors? Also, if you're including jQuery, why are you using `XMLHttpRequest`? — Blender, Jun 22 '13 at 21:16
yes, you need a webserver. you'r doing ajax calls, which do HTTP requests. Can't do HTTP without an http server. — Marc B, Jun 22 '13 at 21:16
Yes, you need something like WAMP (A web server stack for Windows) if you want to run AJAX requests locally. This is how you would implement the AJAX request in jQuery - http://stackoverflow.com/a/6470614/2470724 — Nick R, Jun 22 '13 at 21:17

actc · Accepted Answer · 2013-06-22T23:30:10.410

What you have looks quite good for your first steps with AJAX. But you really need a webserver. To get your example work, do the following:

Install a webserver on your machine. I suggest you use XAMPP for your first steps. Get it from here: http://www.apachefriends.org/en/xampp.html You should not have to configure something by yourself, just install it and you should end up with a webserver which runs "out-of-the-box".
Place all your files in the htdocs folder. In my example I named the HTML file ajax.html.
Ensure that your webserver is running. Open a browser and navigate to localhost. You should see a page with a big XAMPP on it.
Navigate to localhost/ajax.html. I tested your code and it worked.

Maybe this W3CSchools AJAX tutorial can provide you with more information about AJAX.

ThankYou that was helpful and I was using W3C schools already in case you didn't notice. That was all I needed to confirm I was doing something wrong. — user2489995, Jun 23 '13 at 03:32

score 0 · Answer 2 · answered Jun 22 '13 at 21:38

0

by seeing what you post, i think the problem is that you are not running this on a web server. On your javascript you are requesting test.txt with GET method on the client side, but there is no backend side that answers the get request with the text.txt file.

You can achieve this by installing a web server like apache and placing your files on the www or httpdocs folder.

answered Jun 22 '13 at 21:38

lazychino

41
3

So I can just put the text file in a folder called httpdocs or do I need to install a web server. First time using AJAX by the way. I knew it involved servers, But I thought it might work just by testing it in a browser. – user2489995 Jun 22 '13 at 22:01

What is wrong with my simple AJAX example. Does you website have to be on a server?

2 Answers2