Ajax doesn't load simple file

Question

I started learning AJAX and got problem on the beginning I can't solve. I got 2 files, main.html with code :

<!DOCTYPE html>
<html>
<head>
    <title>My page</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <button>apple</button>
    <div id="target">
    Press button
    </div>

    <script>
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++)
    {
        buttons[i].onclick = handleButtonPress;
    }

    function handleButtonPress(e)
    {

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.open("GET","blabla.txt",false);
        xmlhttp.send(null);

        document.getElementById("target").innerHTML=xmlhttp.responseText;

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

and "blabla.txt" with content :

asdasdsaldkjasdajsdl

Problem is that after clicking the button it should load content of blabla.txt file into the div element. Unfortunately it doesnt work with the reason i have no idea about.

I think its worthly to add that both files are placed in the same folder.

Are you resting this locally? (wont work in most browsers) Have you looked in your Browsers Console for errors? (F12) — Alex K., Sep 12 '14 at 13:01
Hmm when i looked into the console "XMLHttpRequest cannot load file:****. Cross origin requests are only supported for HTTP." — CSharpBeginner, Sep 12 '14 at 13:04

score 0 · Answer 1 · answered Sep 12 '14 at 13:02

0

xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
     document.getElementById("target").innerHTML=xmlhttp.responseText;
  }
 }

answered Sep 12 '14 at 13:02

ovi

566
4
17

score 0 · Answer 2 · answered Sep 12 '14 at 13:05

0

<div id="test"></div>

$(document).ready(function(){
   $.get('ajax/test.txt', function(data) {
      $('#test').html(data);
    });

})

answered Sep 12 '14 at 13:05

budamivardi

722
5
10

I got question, what is this language/technology u used in this snippet? As I know javascripts doesn't starts with "$" – CSharpBeginner Sep 12 '14 at 13:23
If you just want javascript without jQuery, so look this can be helpful for you http://stackoverflow.com/questions/15989911/get-html-source-code – budamivardi Sep 12 '14 at 13:55

score 0 · Answer 3 · answered Sep 12 '14 at 13:06

0

 var xmlhttp = new XMLHttpRequest();

 xmlhttp.onreadystatechange = function () {
     var DONE = (xmlhttp.readyState == 4 && xmlhttp.status==200) ;
     if (DONE){
         document.getElementById("target").innerHTML=xmlhttp.responseText;
     }
 };
 xmlhttp.open("GET","blabla.txt",false);
 xmlhttp.send(null);

Use the above code. You need to add the state of ajax to check ajax is completed or not. otherwise it will execute same time and will not found the response text.

answered Sep 12 '14 at 13:06

Code Lღver

15,573
16
56
75

It doesn't work, I just found out my problem. Im trying to send request to my local file since it's not possible in AJAX i believe, i have to send it to the server. – CSharpBeginner Sep 12 '14 at 13:08
@CSharpBeginner Its will work locally also but I think you need to give the full path or file. it is http://localhost/.... like – Code Lღver Sep 12 '14 at 13:10

Ajax doesn't load simple file

3 Answers3