第一个AJAX示例不会运行

我已经开始通过W3Schools网站上的AJAX教程工作，并且我的第一个示例甚至不会运行。为什么不这样做呢？它在浏览器中打开，但点击按钮时没有任何反应。第一个AJAX示例不会运行

教程URL;

https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_ie

这里是我在记事本++

<!DOCTYPE html> 
<html> 
<body> 

<h1>The XMLHttpRequest Object</h1> 

<p id="demo">Let AJAX change this text.</p> 

<button type="button" onClick="loadDoc()">Change Content</button> 

<script> 
    function loadDoc() { 
    var xhttp; 
    if (window.XMLHttpRequest) { 
    // code for modern browsers 
    xhttp = new XMLHttpRequest(); 
    } else { 
    // code for IE6 and IE5 
    xhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    document.getElementById("demo").innerHTML = this.responseText; 
} 
}; 
xhttp.open("GET", "ajax_info.txt", true); 
xhttp.send(); 
} 
</script> 
</body> 
</html>

创建了HTML页面通过我在记事本中选择Run >>铬运行HTML网页++（但尝试Firefox和IE太）。 ajax_info.txt文件与HTML文件位于同一位置。这是它的内容;

AJAX不是一种编程语言。

AJAX是一种从网页访问Web服务器的技术。

AJAX代表Asyncronous JavaScript和XML。

来源

2017-04-06 AJF

你在浏览器调试器中有任何错误吗？也许你还需要一个Web服务器来完成这样的请求。 – alpham8

@ alpham8没有错误。该教程没有提到任何有关Web服务器的信息我编辑了“它在浏览器中打开的问题，但是当我点击按钮时没有任何反应” – AJF

它可以使用这个网址：https：//www.w3schools.com/js/ajax_info.txt？ – alpham8

谢谢大家。我安装了Apache并将端口设置为7777（因为端口80上已经有IIS），并将文件放在apache的htdocs位置，并使用了url http://localhost:7777/htdocslocation/FirstAJAXExample.html，并且它工作正常。

来源

2017-04-06 14:48:13 AJF

为什么你不IIS我们呢？对于您的简单示例，它是否在IIS或Apache下运行并不重要。选择一个平台并删除其他平台。在同一个系统上的两台Web服务器是不好的做法。 PS：而对于IIS，你得到了IIS管理器，这是一个非常好的管理IIS的GUI工具。 – alpham8

由于错字xhhtp而不是xhttp。

来源

2017-04-06 11:24:26

我已更正错误 - 感谢您突出显示，但仍然没有区别。我修改了“它在浏览器中打开，但没有任何反应，当我点击按钮” – AJF

打字错误校正后，它就像我的浏览器中的魅力一样工作。该脚本由我的测试环境中的laravel-elixir-server提供。 –

感谢Tobias - 我安装了apache，因此我会尝试通过其本地主机和端口号来调查运行。 – AJF

必须更改xhhtp.onreadystatechange，而不是xhttp.onreadystatechange和xhhtp.send();代替xhttp.send();

function loadDoc() { 
    debugger; 
    var xhhtp; 
    if (window.XMLHttpRequest) { 
    // code for modern browsers 
    xhhtp = new XMLHttpRequest(); 
    } else { 
    // code for IE6 and IE5 
    xhhtp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
    xhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
    document.getElementById("demo").innerHTML = this.responseText; 
} 
}; 
xhhtp.open("GET", "ajax_info.txt", true); 
xhhtp.send(); 
}

来源

2017-04-06 11:30:54

已更改，但结果仍然相同。谢谢 – AJF

如果你直接打开html页面，那么通常这个错误是因为你需要一个服务器。我想，你使用npm http-server。我运行该代码没有错误。 –

谢谢。我安装了apache，所以会通过apache localhost和端口号运行。将调查 – AJF

您应该CORS阅读起来。例如： https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

你可以看到你的代码工作，如果你运行一个本地Web服务器，后者有问题的HTML文件（保存在同一目录中的HTML文件的txt文件）。

如果你是在Mac上，一个简单的方法来运行本地Web服务器是运行从您的HTML文件下面的代码：

python -m SimpleHTTPServer 8001

然后在浏览器去 http://localhost:8001/yourhtmlfile.html

既然你提到记事本++，似乎你不是在Mac上，但一些光谷歌搜索会给你一个类似的窗口设置。

来源

2017-04-06 11:42:24 knopch1425

谢谢。当我进一步了解这一点时，您的答案对于调试非常有趣。我已经安装了Apache，所以会通过它的本地主机 – AJF

来看看为什么要运行python？ Mac有捆绑的apache – alpham8

祝你好运@ jack95 - 请做upvote如果答案帮助你 – knopch1425

第一个AJAX示例不会运行

回答

相关问题