Question

这是我第一次使用AJAX，我似乎无法弄清楚为什么.txt文件不会加载？但是转到一个只显示该文本的新页面，即：不加载在同一页面中：

我的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服务器的localhost运行..

我错过了什么？还是俯瞰在这里？

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

Answer 1

解决您的问题：

将此替换为您的代码：

onClick - ＆gt; onclick（js区分大小写）
readystatechange - ＆gt; 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);

Answer 2

我认为这样做更容易：

首先，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>

第一个AJAX项目......（不会加载文本文件内联）

2 个答案: