第一個AJAX項目...（不會加載文本文件內聯）

這是我第一次使用AJAX，我似乎無法弄清楚爲什麼.txt文件不會加載？而是去只顯示文本的新頁面），即：在同一個頁面沒有加載：第一個AJAX項目...（不會加載文本文件內聯）

我的index.html頁面：

<html> 

<head> 
<meta charset="utf-8"> 
<title>Learning Ajax</title> 

</head> 

<body> 
    <!-- my first AJAX script --> 


    <h1>Learning Ajax</h1> 

    <a href="files/ajax.txt">Load Text Files</a> 

    <script src="js/main.js"></script> 

</body> 
</html>

這裏是我main.js腳本：

var message = "Test"; 

(function() { 

var link = document.getElementsByTagName("a")[0]; 

link.onClick = function(){ 
    var xhr = new XMLHttpRequest(); 

    //handle the 'onreadystatechange" event 
    //0 = un-initialized 
    //1 = loading 
    //2 = loaded (sent to server) 
    //3 = interactive (server is responding) 
    //4 = complete (request finished) 

    xhr.readystatechange = function(){ 
     if((xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304)){ 
      xhr.responseText;   

      var body = document.getElementsByTagName("body")[0];    
      var p = document.createElement("p");    
      var pText = document.createTextNode(xhr.responseText);   
      p.appendChild(pText); 
      body.appendChild(p); 
     };  
     //open the request 
     xhr.open("GET", "files/ajax.txt", true);   
     //send the request 
     xhr.send(null);  
     return false; 
    }; 
}; 
})(); 

alert(message);

我ajax.txt文件

..我只是有一些隨機的純文本：這是要加載的Ajax文本。

我不是本地運行這一點，但使用WAMP的Web服務器通過本地主機..

我缺少什麼？或在這裏俯瞰？

教程鏈接：tutsplus.com/lesson/the-simplest-ajax-script

來源

2014-01-22 whispers

嘗試將您的內容更改爲{'這是要加載的Ajax文本'}並將文件名改爲ajax.json –

解決你的問題：

將此替換到您的代碼：

的onClick - >的onclick（JS是區分大小寫）
readystatechange - > onreadystatechange的

然後把這段代碼出的onreadystatechange功能：

//open the request 
xhr.open("GET", "files/ajax.txt", true);   
//send the request 
xhr.send(null);  
return false;

這是新main.js：

var message = "Test"; 

(function() { 
var link = document.getElementsByTagName("a")[0]; 
link.onclick = function(){ 
var xhr = new XMLHttpRequest(); 

//handle the 'onreadystatechange" event 
//0 = un-initialized 
//1 = loading 
//2 = loaded (sent to server) 
//3 = interactive (server is responding) 
//4 = complete (request finished) 
xhr.onreadystatechange = function(){ 
    if((xhr.readyState == 4) && (xhr.status == 200 || xhr.status == 304)){ 

     xhr.responseText;   

     var body = document.getElementsByTagName("body")[0];    
     var p = document.createElement("p");    
     var pText = document.createTextNode(xhr.responseText);   
     p.appendChild(pText); 
     body.appendChild(p); 
    };  

    return false; 
}; 

//open the request 
xhr.open("GET", "files/ajax.txt?aiai", true);   
//send the request 
xhr.send(null);  
return false; 
}; 
})(); 

alert(message);

來源

2014-01-23 15:04:20 peppelauro

被接受爲更好的答案，因爲它專注於/使用爲答案提供的代碼。（總結：我需要在onreadystatechange（）函數之外移動open（）/ send（）例程...（也是第一個返回false;看起來並不需要）多數民衆贊成在指出我的錯誤！ -w – whispers

我認爲它更容易做這樣的：

第一，HTML：

<html> 

    <head> 
    <meta charset="utf-8"> 
    <title>Learning Ajax</title> 

    </head> 

    <body> 
     <!-- my first AJAX script --> 


     <h1>Learning Ajax</h1> 

     <a href="#" onClick="loadText()">Load Text Files</a> 
     <div id="textFiles"><!-- files display here --></div> 


    </body> 
</html>

JS ：

<script> 

if (window.XMLHttpRequest) { 
    var xmlhttp = new XMLHttpRequest(); 
} 
else { 
    var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 




function loadText() { 
    var message = "Test"; 
    xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState === 4 && xmlhttp.status === 200) { 
     document.getElementById("textFiles").innerHTML = xmlhttp.responseText; 
      alert(message); 
    } 
    else{ 
     document.getElementById("textFiles").innerHTML = "Loading Files..."; 
    } 

}; 
xmlhttp.open("POST",'files/ajax.txt',true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send(); 
} 

</script>

來源

2014-01-22 20:52:49 Alex

感謝您的回覆..但是，因爲我對AJAX是新手（第一次使用它）我喜歡嘗試和理解給出的例子以及它爲什麼不起作用。而不是製作一個全新的腳本。可以解釋爲什麼原始代碼不適用於'我'...但在教程中呢？ – whispers

第一個AJAX項目...（不會加載文本文件內聯）

回答

相關問題