Question

我已经开始在W3Schools网站上完成AJAX教程了，我的第一个例子甚至都没有运行。为什么不运行呢？它在浏览器中打开，但单击按钮时没有任何反应。

教程URL;

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

这是我在Notepad ++中创建的HTML页面

<!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>

通过选择Run＆gt;＆gt;运行HTML页面Notepad ++中的chrome（但也尝试过Firefox和IE）。 ajax_info.txt文件与HTML文件位于同一位置。这是它的内容;

AJAX不是一种编程语言。

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

AJAX代表Asyncronous JavaScript和XML。

Answer 1

您必须更改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();
}

Answer 2

由于拼写错误xhhtp而不是xhttp。

Answer 3

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

如果您运行本地Web服务器，您可以看到您的代码正常工作，该服务器提供有问题的html文件（将txt文件保存在与html文件相同的目录中）。

如果您使用的是Mac，运行本地Web服务器的简便方法是从您的html文件所在位置运行以下代码：

python -m SimpleHTTPServer 8001

然后在浏览器中转到 http://localhost:8001/yourhtmlfile.html

既然你提到了notepad ++，看起来你不是在Mac上，但是一些轻量级的谷歌搜索会给你一个类似于windows的设置。

Answer 4

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

第一个AJAX示例将无法运行

4 个答案: