第一個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示例不會運行

回答

相關問題