javascript - ajax php 调用不返回任何内容

Question

我希望 php 返回一个值给 ajax。我正在效仿 W3 学校的例子，但没有什么乐趣。这是 javascript/ajax 代码:

function createReport() {
    var xmlhttp;    
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById("report").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","test.php",true);
    xmlhttp.send();
}

我在一个我知道正在触发的事件处理程序中进行了以下调用(它所做的其他事情工作正常)

createReport();

稍后在 html 的正文部分中我有:

<div id="report">Report will be placed here...</div>

如果我单独运行 test.php，它会正确显示“将其返回到 ajax”，所以我知道这是有效的。这是 PHP 代码:

<?php
echo 'return this to ajax';
?>

我的理解是“报告将放置在这里...”将替换为“将其返回给ajax”。但什么也没发生。我也没有看到 Firefox 或 IE 控制台中列出任何错误。有什么想法吗？

Answer 1

我个人认为 w3cschools 不是一个学习的好地方(参见 http://www.w3fools.com/ )。

可能是因为你设置ajax的顺序而出现问题，你这样做:

XMLHttpRequest/onreadystatechange/open/send

更好(如果不遵循这个顺序可能会在旧版浏览器中出现一些缺陷):

XMLHttpRequest/open/onreadystatechange/send

Note: do not worry, the "open(...)" does not start listeners. Listeners only work after the "send(...)"

另一个原因可能是您没有创建 XMLHttpRequest.status 的“错误处理”，它用于验证服务器响应中的错误。

试试这个:

<script>
function XHR(){
    if(window.XMLHttpRequest){//outers browsers
        return new XMLHttpRequest();
    } else if(window.ActiveXObject){//IE
        try{
            return new ActiveXObject("Msxml2.XMLHTTP");
        } catch(ee) {//IE
            try{
                return new ActiveXObject("Microsoft.XMLHTTP");
            } catch(ee) {}
        }
    }
    return false;
}

function createReport(){
    var xhr = XHR();// call ajax object
    if(xhr){
        xhr.open("GET", "test.php", true);//setting request (should always come first)
        xhr.onreadystatechange = function(){//setting callback
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("report").innerHTML=xhr.responseText;
                } else {//if the state is different from 200, is why there was a server error (eg. 404)
                    alert("Server return this error: " + String(xhr.status));
                }
            }
        };
        xhr.send(null);//send request, should be the last to be executed.
    } else {
        alert("Your browser no has support to Ajax");
    }
}
</script>

<div id="report">Report will be placed here...</div>

<script>
createReport();//prefer to call the function after its div#report
</script>

要防止缓存，请替换:

xhr.open("GET", "test.php", true);

由

xhr.open("GET", "test.php?nocache="+(new Date().getTime()), true);