Ajax 程序无法在 chrome 上运行答案

【问题标题】：Ajax program not functioning on chromeAjax 程序无法在 chrome 上运行
【发布时间】：2016-08-11 23:35:06
【问题描述】：

我为一个小型 ajax 程序编写了以下代码。
我可以在 IE 11 上执行它，但不能在 chrome 和 firefox 上执行

html 文件：

<html>
<head><title>Ajax Page</title>
<script>
function ajax_handler(){
    try
    {
        var xmlhttp = new XMLHttpRequest();
    }catch(e1){
        try{
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(e2){
            try{
                var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
            }catch(e3){
                alert('ajax not supported');
                return false;
            }
        }
    }
    var rollno = document.getElementById("roll").value;
    xmlhttp.onreadystatechange = getresult;
    var url = 'ajax.php?roll='+rollno;
    xmlhttp.open("GET",url,true);       
    xmlhttp.send(null); 
}
function getresult(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            var sp = document.getElementById("result");
            sp.innerText=xmlhttp.responseText;
        }
    }
</script>
</head>

<body>
    Enter roll:<input type="text" id="roll" name="roll" /><br />
    <input type="button" name="submit" value="submit" onclick="ajax_handler()" /><br />
<span id="result"></span>
</body>
</html>

对应的PHP页面：

<?php
$roll = $_GET['roll'];
if($roll == 1001){
    echo 'passed';
}
?>

可以看出我的 PHP 程序没有发回任何
XML数据。它只发回文本。我在做什么错误

【问题讨论】：

浏览器开发工具网络选项卡。可以在那里查看和调试请求/响应。响应内容是什么？
我认为这不适用于任何浏览器，因为您正在尝试从不相关的函数访问局部变量。
@MattiVirkkunen 是的。刚刚弄明白了。谢谢
@JamesThanks.that 帮助我找出了错误。

标签： javascript php ajax google-chrome xmlhttprequest

【解决方案1】：

在声明 XMLHttpRequest 对象时错误地使用了 var。删除它并让它工作。

【讨论】：

【解决方案2】：

在尝试代码后，我意识到它确实可以在 chrome 上运行，但问题在于 getresult() 函数。内联定义 onreadystatechange 函数比在别处定义它更安全。该错误主要是 onreadystatechange 不知道 xmlhttp 对象的事实。这是代码。

    <html>
    <head><title>Ajax Page</title>
    <script>
    function ajax_handler(){
        try
        {
    var xmlhttp = new XMLHttpRequest();
    console.log('success');
}catch(e1){
    try{
        var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch(e2){
        try{
            var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e3){
            alert('ajax not supported');
            return false;
        }
    }
}
var rollno = document.getElementById("roll").value;
//function is defined inline rather than defining it elswhere and calling the function
xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        var sp = document.getElementById("result");
        sp.innerText=xmlhttp.responseText;
    }
};
var url = 'test.php?roll='+rollno;
xmlhttp.open("GET",url,true);       
xmlhttp.send(); 
    }
</script>
</head>

<body>
Enter roll:<input type="text" id="roll" name="roll" /><br />
<input type="button" name="submit" value="submit" onclick="ajax_handler()" /><br />
<span id="result"></span>
</body>
</html>

【讨论】：